ajax使用回调函数的例子(原生代码和jquery代码)

via: http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22

 

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.cnblogs.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(){

//请求出错处理

}

});