XMLHTTPRequest

前言

XMLHTTPRequest和Ajax是什么关系呢？XMLHTTPRequest是Ajax使用的基础，详细来说就上篇博客提到的五个步骤点击打开链接

下面详细分析五个步骤：

一、建立xmlHttpRequest对象

在IE6以下版本中： 

xmlhttp = newActiveXObject("Microsoft.XMLHTTP")

IE7以上及Firefox等其他浏览器中：

xmlhttp = newXMLHttpRequest()

二、设置回调函数  

xmlHttp.onreadystatechange= callback;  

callback是一个函数，callback函数是一种以参数形式传递给另一个函数的函数。如果我们写成如下形式：

xmlHttp.onreadystatechange= callback();  //这种形式表示将callback的返回值赋给了xmlHttp.onreadystatechange，是错误的。  

详细了解onreadystatechange事件：onreadystatechange事件

三、与服务器建立连接

open()用于初始化HTTP请求参数，但并不发送（send）；

语法：open(method,url,async,username,password)

下面看看每个参数代表的含义：

1)method：取值可谓get，post，head。

• GET方式使用URL提交数据，就是说提交的数据会附加在目标URL后，以"?"与URL分开，字符数字原样发送，空格替换为"+"，其余字符使用%XX替换（XX是该字符对应的ASCII码）。

xmlHttp.open("get","ajax?name="+ name,true)

• POST方式则是将请求的数据放置在HTTP HEADER中提交。

xmlHttp.open("post","ajax?name="+ name,true) //get方式  
  
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded") //此步注意设置请求头信息

基于上述原因，GET方式对于提交数据有1024字节的限制，而POST方式则没有（ 因此上传文件只能使用POST方式）；且POST方式要比GET方式要安全，因为GET方式发送的数据是会显示在地址栏的。

2）url：指定了 请求的目标文件地址。

3）async：取值为true或者false。指定了请求模式是 同步（false）还是 异步（true）。

• 当async为true时，表示为异步请求。即请求之后，不等待响应，继续执行之后的代码。此时需要规定在响应处于 onreadystatechange事件中的就绪状态时执行的函数。
• 当async为false时，表示为同步请求。即请求之后，要等待完全响应才能继续执行之后的代码。（此种模式容易造成堵塞，因此推荐使用异步请求模式）

四、向服务器端发送数据 

如果是get方式，代码如下：

xmlHttp.send(null); 

如果是post方式，代码如下：

xmlHttp.send(name="+ nam);  

五、在回调函数中针对不同的响应状态进行处理  

 XMLHttpRequest对象有两个属性来存储响应的内容（应该就是读取的目标文件的内容）： responseText和 responseXML

1.responseText属性：目前为止从服务器端接收到的响应体（不包括头部），如果还没有接收到数据（ 例如readyState<3），则是一个空字符串。

注：如果响应包含了为响应体指定编码的头部，则使用该编码。否则，使用 Unicode UTF-8。

2.responseXML属性：对请求的响应，解析为XML并作为Document对象返回。

***************************************************************************************************************************

 

XMLHttpRequest对象除了以上两个与相应内容相关的属性，还有三个于发送请求相关的属性： readyState、status、statueText

1. readyState属性表示的是HTTP请求的状态，当一个XMLHttpRequest对象被创建时，这个属性值从0开始，直到接受到完整的HTTP响应，这个值增加到4。

0：Uninitialized初始化状态。XMLHttpRequest对象已被创建或已被abort()方法重置；

1：Open open()方法已调用，但send()方法还没被调用，请求尚未发送

2：Sent send()方法已调用，HTTP请求已发送到服务器，但还没有收到响应

3：Receiving 所有响应头部已经收到。响应体开始接收但尚未完成

4：Loaded HTTP响应已经完全接收。

readyState属性值不会递减，除非当一个请求在处理过程中调用了open()或abort()方法。

每次这个属性值增加时，都会触发onreadystatechange事件句柄。

2. status属性是由服务器返回的HTTP代码状态。只能在readyState的值大于或等于3的时候读取，否则会出错。

status的值为200时，表示读取成功；而404表示"NotFound"错误。

3. statusText属性与status参数代表的含义相同，只是该参数使用字符串而不是数字来表示当前状态。

• status为200时对应的statusText的值为"OK"；
• status为404时对应的statusText的值为"Not Found"。

结语

Ajax，异步加载，部分更新，动态网页，很神奇的东西，想要完全掌握，还差很多，加油。