jq中的ajax与原生ajax,原生Ajax 和Jq Ajax

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

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

HTML代码：

ajax示例

.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;}

• 春
• 夏
• 秋
• 冬

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("失败！");

}

})

});

来自：http://www.cnblogs.com/duanhuajian/archive/2012/10/20/2731840.html