ajax使用回调函数的例子（原生代码和jquery代码）
一、 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 //处理完毕
<script type="text/javascript" >
//创建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);
}
}
</script>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.cn.com/rss",
beforeSend: function(XMLHttpRequest){
//ShowLoading();
},
success: function(data, textStatus){
$(".ajax.ajaxResult").html("");
$("item",data).each(function(i, domEle){
$(".ajax.ajaxResult").append("<li>"+$(domEle).children("title").text()+"</li>");
});
},
complete: function(XMLHttpRequest, textStatus){
//HideLoading();
},
error: function(){
//请求出错处理
}
});