首页 > 代码库 > Ajax--JavaScript实现

Ajax--JavaScript实现

Ajax:一种不用刷新整个页面便可与服务器通讯的办法
  Ajax实现的步骤:

    1、创建XMLHttpRequest对象

    2、服务器向浏览器响应请求(注册监听)

    3、浏览器与服务器建立连接

    4、浏览器向服务器发送请求

     readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
                0 代表未初始化。 还没有调用 open 方法
                1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
                2 代表已加载完毕。send 已被调用。请求已经开始
                3 代表交互中。服务器正在发送响应
                4 代表完成。响应发送完毕
                
            常用状态码及其含义:
                404 没找到页面(not found)
                403 禁止访问(forbidden)
                500 内部服务器出错(internal service error)
                200 一切正常(ok)
                304 没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

    xhr.open(method, url, asynch);
             * 与服务器建立连接使用
             * method:请求类型,类似 “GET”或”POST”的字符串。
             * url:路径字符串,指向你所请求的服务器上的那个文件。请求路径
             * asynch:表示请求是否要异步传输,默认值为true(异步)。

    send()方法:
                   * 如果浏览器请求的类型为GET类型时,通过send()方法发送请求数据,服务器接收不到    
                   * 如果浏览器请求的类型为POST类型时,通过send()方法发送请求数据,服务器可以接收

 

Demo:

Get方式window.onload=function(){    document.getElementById("ok").onclick=function(){        var xhr=createXmlHttpRequest();//获取XmlHttpRequest对象                xhr.onreadystatechange=function(){//回调函数            if(xhr.readyState==4){//回调状态                if(xhr.status==200 || xhr.status==304)//服务器状态吗                {                    var date=xhr.responseText;//服务器返回数据                    alert(date);                }            }        };        var id="A001";        alert(id);        xhr.open("GET","../testGetServelet?id="+id,true);//1、发送方式2、页面路径,3、请求是否异步,默认为true        xhr.send(null);//发送数据--get方式,这里不用写数据,即使写了数据服务器端也无法接收    };        function createXmlHttpRequest(){           var xmlHttp;           try{    //Firefox, Opera 8.0+, Safari           xmlHttp=new XMLHttpRequest();            }catch (e){                   try{    //Internet Explorer                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");                   }catch (e){                      try{                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");                      }catch (e){}             }    }   return xmlHttp; }};
 1 Post方式 2  3 window.onload=function(){ 4     document.getElementById("ok").onclick=function(){ 5         var xhr=createXmlHttpRequest(); 6         xhr.onreadystatechange=function(){ 7             if(xhr.readyState==4) 8             { 9                 if(xhr.status==200 || xhr.status==304)10                 {11                     var data=http://www.mamicode.com/xhr.responseText;12                     alert(data);13                 }14             }15         };16         17         xhr.open("post","../testGetServelet",true);        18         //如果是POST请求方式,设置请求首部信息19          xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");20          xhr.send("a=1&b=2");21     };22     23     function createXmlHttpRequest(){24            var xmlHttp;25            try{    //Firefox, Opera 8.0+, Safari26            xmlHttp=new XMLHttpRequest();27             }catch (e){28                    try{    //Internet Explorer29                   xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");30                    }catch (e){31                       try{32                           xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");33                       }catch (e){}  34            }35     }36    return xmlHttp;37  }38     39 };

 

Ajax--JavaScript实现