An Analysis of the Basic Principles of Ajax
Basic concepts
Asynchronous Javascript and XML.
A technique for creating fast dynamic Web pages with minimal exchange with the server to update the pages
Common Cases
- Search page displays search results without refreshing
- Registration page prompts for availability of items
- Tmall Shopping Cart Add Delete Modification
Asynchronous Loading Advantage
- Request a small amount of data, not the entire page
- Make Internet programs smaller, faster, and more friendly
Knowledge Required
- A server-side development language PHP/Java/Python
- . Javascript front-end development language JQuery/ HTML
Fundamentals of Ajax
Basic working principle
- Add an intermediate layer between server and user
- Asynchronous requests do not block client operations
- Clients send asynchronous requests through the browser's built-in XMLHttpRequest
Three ways to achieve asynchronous loading
Get Request
Code can talk best, first is front-end code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Ajax Demo</title>
</head>
<body>
<button id="btn">Send An Ajax Request</button>
<div id="box"></div>
</body>
<script>
$("#btn").click(function(){
$.get("demo1.php",{'username':'json','age':'18'},function(data){
$("#box").html(data);
} );
});
</script>
</html>
Here is the processing for the backend
<?php
echo 'Test Ajax';
echo '<pre>';
var_dump($_GET);
echo '</pre>';
?>
Post Request
The code is almost identical to the above except that you change $.get() to $.post().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Ajax Demo</title>
</head>
<body>
<button id="btn">Send An Ajax Request</button>
<div id="box"></div>
</body>
<script>
$("#btn").click(function(){
$.post("demo1.php",{'username':'json','age':'18'},function(data){
$("#box").html(data);
} );
});
</script>
</html>
Here is the processing for the backend
<?php
echo 'Test Ajax';
echo '<pre>';
var_dump($_POST);
echo '</pre>';
?>
Ajax() Request
The ajax approach actually includes get and post, and the content format differs from the above.
Front end
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<title>Ajax Demo</title>
</head>
<body>
<button id="btn">Send An Ajax Request</button>
<div id="box"></div>
</body>
<script>
$("#btn").click(function(){
$.ajax({
'url':'demo1.php',
'data':{'username':'json','age':18},
'success':function(data){
$("#box").html(data);
},
'dataType':'html',
'type':'get'
//'type':'post'
});
});
</script>
</html>
Backend as above
<?php
echo 'Test Ajax';
echo '<pre>';
var_dump($_GET);
//var_dump($_POST);
echo '</pre>';
?>
Send Type Description
- "XML": Returns an XML document.
"HTML": Returns plain text HTML information.
"script": Returns plain text JavaScript code.
"JSON": Returns JSON data.
"JSONP": JSONP format.
"Text": returns a plain text string