一、 ajax代码存在的问题(异步交互的问题)

ajax所请求的url，如果因为网络等问题，很久没有回应，则给用户造成“假死”的现象。

代码如下：

xmlHttp = GetXmlHttpObject();

xmlHttp.open();

xmlHttp.send();

//下面这句，会一直等待，直到有返回值

alert(xmlHttp.responseText);

二、 ajax代码异步交互的解决方式

1. Javascript原生ajax代码

先创建xmlhttp对象，然后执行open和send，通过xmlHttp.onreadystatechange = stateChanged回调函数来处理返回值。

readyState== 0 //尚未加载

readyState== 1 //正在加载

readyState== 2 //加载完毕

readyState== 3 //正在处理

readyState== 4 //处理完毕

//创建ajax

function testAjax(){

xmlHttp = GetXmlHttpObject();

if(xmlHttp == null){

alert("浏览器不支持");

return;

}

var url = "http://www.qq.com";

xmlHttp.onreadystatechange = stateChanged;

xmlHttp.open("GET", url, true);

xmlHttp.send();

//document.getElementById("txt").innerHTML=xmlHttp.responseText;

}

//创建不同的ajax对象

function GetXmlHttpObject(){

var xmlHttp = null;

try{

//firefox opera safari

xmlHttp = new XMLHttpRequest();

}catch (e){

//ie

try{

xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");

}catch(e){

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

}

return xmlHttp;

}

//监控状态

function stateChanged()

{

if (xmlHttp.readyState==4)

{

//document.getElementById("txt").innerHTML=xmlHttp.responseText;

alert(xmlHttp.responseText);

}

}

2. jquery中ajax的写法

(1)Post写法

var txt = $("input").val();//换的某个输入框的value

//使用post方法，传输值为suggest=txt，绑定回调函数

$.post("test.html", {suggest:txt}, function(result){

$("#div").html(result);

});

(2)Get写法

var txt = $("input").val();//换的某个输入框的value

//使用get方法，传输值为suggest=txt，绑定回调函数

$.get("test.html", {suggest:txt}, function(result){

$("#div").html(result);

});

(3)ajax写法(通过http请求)

$.ajax({

type: "get",

url: "http://www.cnblogs.com/rss",

beforeSend: function(XMLHttpRequest){

//ShowLoading();

},

success: function(data, textStatus){

$(".ajax.ajaxResult").html("");

$("item",data).each(function(i, domEle){

$(".ajax.ajaxResult").append("

"+$(domEle).children("title").text()+"");

});

},

complete: function(XMLHttpRequest, textStatus){

//HideLoading();

},

error: function(){

//请求出错处理

}

});