Ajax的简单理解

Ajax能够不用从新加载整个页面，与服务器交换数据并更新页面的局部内容。减小服务器端的压力。

Ajax的原理简单来讲经过XmlHttpRequest对象来向服务器发异步请求，从服务器得到数据，而后用javascript来操做DOM而更新页面。这其中最关键的一步就是从服务器得到请求数据。

首先，咱们先来看看XMLHttpRequest这个对象的属性。

它的属性有：

  　　onreadystatechange  每次状态改变所触发事件的事件处理程序。

  　　responseText     从服务器进程返回数据的字符串形式。

  　　responseXML    从服务器进程返回的DOM兼容的文档数据对象。

  　　status           从服务器返回的数字代码，好比常见的404（未找到）和200（已就绪）

  　　status Text       伴随状态码的字符串信息

  　　readyState       对象状态值

　　　　0 (未初始化) 对象已创建，可是还没有初始化（还没有调用open方法）

　　　　1 (初始化) 对象已创建，还没有调用send方法

　　　　2 (发送数据) send方法已调用，可是当前的状态及http头未知

　　　　3 (数据传送中) 已接收部分数据，由于响应及http头不全，这时经过responseBody和responseText获取部分数据会出现错误，

　　　　4 (完成) 数据接收完毕,此时能够经过经过responseXml和responseText获取完整的回应数据

Ajax的建立过程：

一、建立XMLHttpRequest对象；

二、建立一个http请求,用open(method,url,async)；

• method：请求的类型；GET 或 POST
• url：文件在服务器上的位置
• async：true（异步）或 false（同步）                            

三、设置响应http状态变化的函数；

四、发送http请求；

五、获取异步调用返回的数据；

六、使用JS和DOM实现局部刷新。

代码实现：

var xmlhttp;

  function createXMLHttpRequest(){
    var xmlhttp;
    if (window.XMLHttpRequest){
      xmlhttp=new xmlHttpRequest(); //Netscape浏览器中的建立方式
    }else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器的建立方式
    }
    //异步调用服务器段数据
    if(xmlhttp!=null){
      xmlhttp.open("GET/POST",url,true);  //建立HTTP请求
      xmlhttp.onreadystatechange=httpStateChange;//设置HTTP请求状态变化的函数
      xmlhttp.send(null);  //发送请求
    }else{
      alert("不支持XHR")
    }
  }

   //响应HTTP请求状态变化的函数
  function httpStateChange(){//判断异步调用是否完成
    if(xmlhttp.readyState==4 && xmlhttp.status==200){
      //判断异步调用是否成功,若是成功开始局部更新数据
        //code...
    }
  }