从一进入这个IT行业的时候就经常听人们提及Ajax技术，当时一直由于其它原因没能学过。但是后来在学习基于jquery封装的Easyui框架时，里面有提及到ajax的方法，当时就直接用了也没往太深处想，现在有机会了，我要好好探一探究竟。以下内容是我从网上搜索后整理的，菜鸟见解，如有不对之处还望各路大神指正，先谢之。

1.AJAX 是什么？

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML，别问我什么是异步，自己百度去）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

在不使用ajax的网页中，如果想更新数据的话，会重新加载这个页面，当然使用后就不一样了。


2.AJAX的核心处理技术


XMLHttpRequest 对象

核心处理对象XMLHttpRequest是一个浏览器内置的组件，最早出现在IE4里面。所有现代浏览器均支持 XMLHttpRequest 对象，只不过IE5和IE6使用的组件叫做 ActiveXObject。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。


创建 XMLHttpRequest 对象

创建 XMLHttpRequest 对象的语法：

var iable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var iable=new ActiveXObject("Microsoft.XMLHTTP");

我在网上看到别人博客里面有另一种写法（不知道区别在哪儿，先记录上+_+）：

IE5之前 var xmlreq = ActionXObject("Microsoft.XMLHTTP");
IE5之后 var xmlreq = ActionXObject("Msxml2.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }


3.常用方法及属性

是一个浏览器内置的组件，最早出现在IE4里面。所有现代浏览器均支持 XMLHttpRequest 对象，只不过IE5和IE6使用的组件叫做 ActiveXObject。

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

常用方法：

  1. xmlreq.abort():取消当前的HTTP请求

  2. xmlreq.open():初始化一个HTTP请求，指定请求的方法（Get/Post）、URL、身份验证信息（不太理解这个身份验证）等。

  3. xmlreq.setRequestHeader()：设置HTTP请求的头信息

  4. xmlreq.getResponseHeader():获取响应内容的HTTP头信息

  5. xmlreq.send(date):发送一个HTTP请求道服务器

常用属性：

  1.  xmlreq.onreadystatechange;指定当发生就绪状态变更事件时的处理者，通常是JavaScript函数，xmlreq.onreadystatechange=function xx(){//回调函数}

  2. xmlreq.readyState  XMLHttpRequest对象专有的异步响应的状态

    0 表示初始化，即XMLHttpRequest对象未创建open()方法未调用

    1 表示XMLHttpRequest对象被创建，但请求未发出send()为调用 

    2 表示HTTP请求已经发出正在处理中，这时可以取得HTTP头信息，但是HTTP响应内容不可用

    3 表示HTTP响应内容部分数据可用，但响应还没有完成

    4 表示服务器响应完成，可以从属性responseBody、responseText、responseXML中获得完整响应内容

  3. xmlreq.status 200(按照HTTP协议规定的状态值)

    xmlreq.readyState = 4 与xml.status=200的区别：

    举个例子来讲：从服务器A发送一仓库瓷器，到浏览器B，中间可能会有很多车来进行运输，而且各个车走的路线也不同。如何去验证收到的货物数量正确并且没有货物破损?

    xmlreq.readyState = 4 验证返回的货物数量是否OK

    xmlreq.status = 200    验证返回的货物的完整性是否OK


  4. 响应主体的responseBody：以无符号字节数数组描述响应内容正文

  5. 响应流responseStream：以IStream(二进制数据流)形式描述响应内容正文

  6. 响应文本的responseText：响应内容正文的纯文本形式

  7. 响应XMl responseXMl：以XML Dom 描述响应内容正文，（常用）


4.AJAX的开发步骤

(1) 创建XMLHttpRequest对象

      创建时要判断一下当前浏览器是否支持XMLHttpRequest对象

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

(2) 创建完对象后，使用xmlhttp.open(method,url,async)方法指定要连接的服务器代码和请求提交方法

xmlhttp.open("GET","test1.txt"+ Math.random(),true);//为了避免得到缓存结果，加上一个唯一id（GET）

(3) 指定服务器完成后，处理服务器响应内容---回调函数

xmlhttp.onreadystatechange=function()//回调函数
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)//当调用成功时，所做的时间处理
    {
    document.getElementById("XXX").innerHTML=xmlhttp.responseText;//把返回的文本内容赋给页面元素
    }
  }

(4) 使用xmlhttp.send()提交请求

xmlhttp.send();


5.AJAX的方法详解

(1).xmlhttp.open(method,url,async);

描述：

method：请求的类型：GET或POST

        与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）

  • 向服务器发送大量数据（POST 没有数据量限制）

  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠 

 

一个简单的 GET 请求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是缓存的结果。

为了避免这种情况，请向 URL 添加一个唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通过 GET 方法发送信息，请向 URL 添加信息：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

一个简单 POST 请求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header,value)：header：规定头的名称；value：规定头的值

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
如果不加上这句话在post方式提交时会导致服务器端获取AJAX POST数据失败。

url：文件在服务器上的位置

async：true(异步)或false(同步)

一般情况下不建议使用同步，但是在一些小型数据请求中也可以使用。

当使用 async=true 时，响应处于 onreadystatechange 事件中的就绪状态时的函数。

AJAX执行时：

  • 在等待服务器响应时执行其他脚本

  • 当响应就绪后对响应进行处理


(2)onreadystatechange 事件(POST方式请求时，一般GET方式就直接把成功后执行的程序放在send方法后面即可)

触发条件：每当 readyState 改变时，就会触发 onreadystatechange 事件。


好吧，这篇先整理到这儿，感谢w3school网站学习资料，也感谢别人的学习资料：http://blog.163.com/magicc_love/blog/static/18585366220129841216712/，

下一篇详细整理一下ajax的应用实例。