`

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

    博客分类:
  • Ajax
 
阅读更多

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

//请求出错处理

}

});

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics