Ajax的原理

       Ajax全称为：Asynchronous JavaScript + XML

       Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR为向服务器发送请求和解析服务器相应提供了流畅的接口，能以异步方式从服务器取得更多信息，意味着用户单击后，能够没必要刷新页面也能取得新的数据，也就是说，可使用XHR对象取得新数据，而后再经过DOM将新数据插入到页面中。另外，虽然名字中包含了XML的成分，但Ajax同窗与数据格式无关，这种技术就是无需刷新页面便可从服务器取得数据，但也不必定是XML数据

Ajax是由下列几种技术组合而成：

一、运用HTML和CSS来实现页面，表达信息

二、使用XMLHttpRequest和Web服务器进行数据的异步通讯

三、运用JavaScript操做DOM实现动态局部刷新

Ajax的原理

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

XMLHttpRequest对象

XmlHttpRequest是ajax的核心机制，IE5是第一款引入XHR对象的浏览器，在IE5中，XHR对象是经过MSXHML库中的一个ActiveX对象实现的

建立一个XMLHttpRequest对象：

var xhr = new XMLHttpRequest();复制代码

对象属性：

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

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

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

（4）status                                  从服务器返回的数字代码，好比常见的404和200

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

（6）getAllResponseHeader()    获取全部的相应报头

（7）getResponseHeader()        查询响应中的某个字段的值

（8）readyState                           对象状态值

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

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

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

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

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

工做流程

一、向服务器发送请求

xhr.open("GET",url,true);
xhr.send();复制代码

open( method, url, async ) 函数支持三个参数

method：   请求方式，GET或POST

url：            请求的url

async：       true（异步）/false（同步），默认值为true

send( string ) 函数的参数只有请求方式为post时用到，即咱们的请求参数

二、监听请求状态并处理返回值

xhr.onreadystatechange = function (){
  if(xhr.readyState == "4" && xhr.status == "200") {
    //请求成功
    var data = xhr.responseText;
  }else {
    //异常捕获
    console.log(xhr.status);
  }
}复制代码

以上即为ajax的原理及原生基础实现