Ajax简单的异步交互

   ajax简单的异步交互,可以先从get方式开始说起

那么创建一个Ajax与服务器端的异步请求,需要完成三个

步骤1、XMLHttpRequest对象的创建

if(window.XMLHttpRequest){//针对IE7以上 以及标准浏览器
    var xhr=new XMLHttoRequest();
}else if(window.ActiveXObject){
    var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

步骤2、注册回调函数

xhr.onreadystatechange=callback;
或者xhr.onreadystatechange=function(){
  //codes here  
}

步骤3、设置连接信息

xhr.open("GET",url,true)//其中true表示为异步交互

步骤4、发送数据

xhr.send(null);

ps:同步方式下:send会在服务器返回数据后才执行

异步方式下:send会立即完成执行

function callback(){//注册回调函数
  //判断对象的状态是否交互完成
  if(xhr.readyState==4){
   //判断http请求是否成功
    if(xhr.status==200){
       //获取服务器端返回的数据
       var response=xhr.responseText; 
       //可以显示在前台特定的地方 
    }
 }  
}    

最后注意一个问题,也是当初测试时候遇到的问题,这种写好的代码要在服务器端环境下运行,要将写好的东西,部署在本机服务器环境下,通过localhost来访问,方可看到效果,否则会报错!

第二部分,如果是发送ajax的post异步请求

xmlHttp.onreadystatechange = callback;
        xmlHttp.open("POST",url,true);
        xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
        xmlHttp.send(parameter);

注意以上几点,必须要设置一个请求的头文件,send里面发送一些我们需要的参数

posted on 2012-09-07 00:06  菜虫Leo  阅读(2691)  评论(0编辑  收藏  举报

导航