一步一步理解Ajax(一)

Ajax是Asynchronous Javascript And XML的缩写。
作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。

1、创建XMLHttpRequest对象
    var xhr =  new XMLHttpRequest()
对于IE早期版本(IE7及以下版本)使用,new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP")等方式创建对象

2、XMLHttpRequest对象常用属性和常用方法
    属性
    readystate       返回XMLHTTP请求的当前状态码
    state               返回当前请求的HTTP状态码
    statusText       返回HTTP状态码对应的文本

    方法
    onreadystatechange    监听readystate和state状态
    open                          建立连接请求
    send                          发送连接请求

    readystate状态码
    0(未初始化)    对象已建立,但尚未初始化
    1(初始化)       对象已建立,尚未调用send方法
    2(发送数据)    send方法已调用,但是当前的状态码及http头未知
    3(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
    4(完成)         数据接收完毕,此时可以通过responseBody和responseText获取完整的回应数据

   state常用状态码
   200            OK                          服务器成功返回网页
   404            Not Found                客户端所有请求的页面不存在
   503            Service Unavailable    服务器响应超时

   open(method,URL,flag,name,password)方法有五个参数
   method参数用于指定使用什么方式向服务器发送HTTP请求,参数可以为get、post、head、put和delete五种
   url指定服务器的URL
   flag参数用于指定提交HTTP请求方方式,true为异步(默认),false为同步
   name提交用户名,可选
   password提交密码,可选

   //  创建XMLHttpRequest对象
   function  createXHR(){
       return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   function Ajax(){

        var xhr=new createXHR();
        xhr.onreadystatechange=function(){
            if(4==xhr.readystate&&200==state){
                 /*  成功 */
            }
            else{
                /*  异常 */
            }
        }
       xhr.open("get",url,true);
       xhr.send();
   }

 

上一篇:一步一步理解拖拽Drag(三)


下一篇:一步一步理解日历calendar(二)