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的创建过程：

1、创建XMLHttpRequest对象；

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

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

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

4、发送http请求；

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

6、使用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...
    }
  }