原生Ajax和jQueryAjax的区别示例分析_jquery

 　　前言：这次介绍的是利用ajax与后台进行数据交换的小例子，所以demo必须通过服务器来打开。服务器环境非常好搭建，从网上下载wamp或xampp，一步步安装就ok，然后再把写好的页面放在服务器中指定的位置。打开时，在浏览器地址栏输入“localhost/指定页面”或者“127.0.0.1/指定页面”打开。

　　下面列出demo的HTML、PHP、原生ajax 、jq ajax代码。

　　HTML代码：

代码如下:

春

夏

秋

冬

　　PHP代码：

代码如下:
<?php
$details = array (
'spring' => "

人间四月芳菲尽，山寺桃花始盛开

",
'summer' => "

水晶帘动微风起，满架蔷薇一院香

",
'fall' => "

金井梧桐秋叶黄，珠帘不卷夜来霜

",
'winter' => "

梅须逊雪三分白，雪却输梅一段香

"
);
echo $details[$_REQUEST['LiName']];
?>

　　原生ajax：

代码如下:

var lis = document.getElementById('list').getElementsByTagName('li');
window.onload = initPage;
function initPage() {
for (var i=0; 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('没有成功创建请求')
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;
}
}
}

　　JQ ajax:

代码如下:

$('#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("失败！");
}
})
});