Sample analysis of the difference between native Ajax and jQuery Ajax
- 2020-05-07 19:11:46
- OfStack
Introduction: this is a small example of using ajax for data exchange with the background, so demo must be opened through the server. The server environment is very easy to set up, download wamp or xampp from the Internet, 1 step by step to install ok, and then put the written page in the specified location in the server. When opened, enter "localhost/ specified page" or "127.0.0.1/ specified page" in the browser address bar to open.
The HTML, PHP, native ajax, jq ajax codes are listed below.
HTML code:
<!doctype html>
<html>
<head>
<title>ajax The sample </title>
<meta charset='utf-8' />
<link rel="stylesheet" type="text/css" href="css/common.css" />
<style type="text/css">
.main{height:400px;width:800px;margin:100px auto 0;border:1px solid #000;}
.list{height:400px;width:200px;float:left;background:#ddd;}
.inf{height:400px;width:600px;float:right;background:#ccc;text-align:center;}
.list li{width:200px;text-align:center;margin:50px 0 0;font-size:24px;cursor: pointer;
}
.inf img{width:360px;height:270px;margin:15px auto;}
.inf p{width:580px;text-align:left;text-indent:2em;font-size:14px;margin:0 10px;}
</style>
</head>
<body>
<div class='main'>
<div class='list' id='list'>
<ul>
<li name='spring' id='spring'> In the spring </li>
<li name='summer' id='summer'> In the summer </li>
<li name='fall' id='fall'> In the autumn </li>
<li name='winter' id='winter'> In the winter </li>
</ul>
</div>
<div class='inf' id='inf'>
<!-- What to insert -->
</div>
</div>
</body>
<script type="text/javascript" charset="utf-8" src="js/jQuery.js"></script>
</html>
PHP code:
<?php
$details = array (
'spring' => "<img src='images/spring.jpg' alt='' /><p> human 4 Moon fangfei, mountain temple peach began to bloom </p>",
'summer' => "<img src='images/summer.jpg' alt='' /><p> Crystal curtain moves the breeze, full of roses 1 Courtyard sweet </p>",
'fall' => "<img src='images/fall.jpg' alt='' /><p> Golden well wutong autumn leaves yellow, pearl curtain does not roll night frost </p>",
'winter' => "<img src='images/winter.jpg' alt='' /><p> Mei must be snow 3 Cent white, snow but lose plum 1 Period of incense </p>"
);
echo $details[$_REQUEST['LiName']];
?>
Native ajax:
<script type="text/javascript">
var lis = document.getElementById('list').getElementsByTagName('li');
window.onload = initPage;
function initPage() {
for (var i=0; i<lis.length; i++) {
txt = lis[i];
txt.onclick = function () {
getDetails(this.id);
}
}
}
function creatRequest() {
try {
request = new XMLHttpRequest();
}
catch (tryMS) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (otherMS) {
try {
request = new ActiveXObject("Miscrosoft.XMLHTTP");
}
catch (failed) {
request = null;
}
}
}
return request;
}
function getDetails(itemName) {
request = creatRequest();
if (request == null) {
alert(' The request was not successfully created ')
return;
}
var url = "getDetails.php?LiName="+escape(itemName);
request.open("GET",url,true);
request.onreadystatechange = displayDetails;
request.send(null);
}
function displayDetails() {
if (request.readyState == 4) {
if (request.status == 200) {
detailDiv = document.getElementById("inf");
detailDiv.innerHTML = request.responseText;
}
}
}
</script>
JQ ajax:
<script type="text/javascript">
$('#list li').click ( function () {
$.ajax({
type:'GET',
data:'',
url:"getDetails.php?LiName="+this.id,
success:function(data){
$('#inf').html(data);
},
dataType:'text',
error:function (){
alert(" Failure! ");
}
})
});
</script>