Ajax技术---原理与知识点

Ajax（Asynchronous JavaScript + XML 的简写）能够向服务器请求额外的数据而无须卸载页面，可以带来更好的用户体验。

Ajax技术的核心是XMLHttpRequest对象（简称XHR），XHR能够以异步方式从服务器取得更多信息，意味着用户单击后，可以不必刷新页面也能取得新数据。也就是说，可以使用XHR对象取得新数据，然后再通过DOM将新数据插入到页面中。

 

使用Ajax的方法与步骤

①我们要用XHR对象向服务器请求数据， 首先，我们得创建一个XHR对象，如下：

var xhr = new XMLHttpRequest();    //  标准浏览器 创建方式

var xhr = new ActiveXObject('Microsoft.XMLHTTP');    //  IE6 创建方式

 

② 创建了XHR对象之后，要调用的第一个方法就是open()，

ex： xhr.open('get', 'async.php', true);

open()方法的3个参数：

第1个参数：要发送的请求的类型（ “get”，“post”）

第2个参数：请求的URL

第3个参数：表示是否异步发送请求的布尔值，true表示异步，false表示同步

open()方法会启动一个针对第二个参数（URL）的（get 或者 post） 请求，但并不会真正发送请求，而只是启动一个请求以备发送。注意：URL和执行代码的当前页面（当然也可以是绝对路径）必须在同一个域中，并且使用相同端口和协议，否则会引发安全错误。

 

请求类型（第1个参数）详解：

get请求 ：

1：可传送简单数据，需要将参数字符串追加到URL的末尾，以便将信息发送给服务器。

2：它会被客户端的浏览器缓存起来，那么，别人就可以从浏览器的历史记录中，读取到此客户的数据，比如帐号和密码等。因此，在某些情况下，get方法会带来严重的安全性问题。

3：另外get传送的数据量较小，不能大于2KB，但处理效率高，通常是post方式的2倍 。

4：使用get请求经常会发生一个错误，就是参数字符串的格式有问题。字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码，然后再能放到URL的末尾(URL的末尾还要用？连接参数字符串)，并且所有键-值对儿都必须由”&“分隔，ex：example.php?name1=value1&name2=value2

 

post请求 ：

1：当使用POST方式时，浏览器把各表单字段元素及其数据作为HTTP消息的实体内容发送给Web服务器，而不是作为URL地址的参数进行传递，所以相对get请求方式是安全的。

2：使用POST方式传递的数据量要比使用GET方式传送的数据量大的多，可以达到2M 。

3：使用post请求，需要在send()方法之前，设置Context-Type的头信息，如下：

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

4：参数字符串格式也是名/值一一对应的键值对,每对值用&号隔开.如 "name=abc&sex=man&age=18"

5：参数在Send(参数)方法中发送,例：  xml.send("name=abc&sex=man&age=18"); 

 

get与post的差别小结：

1.Post传输数据时，不需要在URL中显示出来，而Get方法要在URL中显示。 

2.Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节. 

3.Post顾名思义,就是为了将数据传送到服务器段,Get就是为了从服务器段取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容，而Get是在Http头部传输的。

4.get 方法用Request.QueryString["strName"]接收，post 方法用Request.Form["strName"] 接收

5.一般来说，尽量避免使用Get方式提交表单，因为有可能会导致安全问题

 

③ 要发送上面的请求，必须调用send()方法,

ex： xhr.send(null);

send()方法接收一个参数，即要作为请求主体发送的数据。如果不需要通过请求主体发送数据（比如get方式），则必须传入null，因为这个参数对有些浏览器来说是必需的。调用send()方法之后，请求就会被分派到服务器。

服务器后台页面接收到请求后，会处理发送过去数据，然后再把处理结果发送回客户端。服务器端的过程不用XHR对象（或说Ajax技术）考虑，只是为了完善数据来回的过程，所以才在这里提到。

 

④ 判断readyState属性值与status属性值 、处理响应结果。

处理响应结果之前，我们先了解一下XHR对象的readyState属性，如下：

readyState属性：表示请求/响应过程的当前活动阶段。

0：未初始化。尚未调用open()方法。

1：启动。已经调用open()方法，但尚未调用send()方法。

2：发送。已经调用send()方法，但尚未接收到响应。

3：接收。已经接收到部分响应数据。

4：完成 。已经接收到全部响应数据，而且已经可以在客户端使用了。我们只关注这个阶段就够了。

只要readyState属性的值由一个值变成另一个值，就会触发一次readystatechange事件，可以利用这个事件来检测每次状态变化后readyState的值。通常，我们只对readtState的值为4的阶段感兴趣。需要注意的是，我们必须在调用open()方法之前制定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

 

在收到响应后，响应的数据会自动保存在XHR对象的属性中。相关属性如下：

responseText：响应主体，被返回的文本。

responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存包含着响应数据的XML DOM文档。

status：响应的HTTP状态。

statusText：HTTP状态说明。

 

思路：数据已经从接收到了 服务器发回的全部数据，并且接收到正常状态的数据的时候，我们处理服务器返回的数据，这个思路的代码如下：

xhr.onreadystatechange = function () {

            if(xhr.readyState == 4){     //  接收到服务器发回的全部数据

                if(xhr.status == 200 || xhr.status == 304){   //  返回数据正确 200代表成功，304代表页面没有改变，从缓存中读取数据，都表示数据正确

                    //  处理 xhr.responseText，在这里写代码就行了

                }

        }

  }

 

常用status(响应的HTTP状态)------说明：

1字头---信息报告码：服务器收到请求，需要请求者继续执行操作

2字头---成功：操作被成功接收并处理

200  OK    请求已成功，请求所希望的响应头或数据体将随此响应返回。

3字头---重定向：需要进一步的操作以完成请求

301  Moved Choices   永久移动。请求的资源已被永久的移动到新URI，返回信息会包括新的URI，浏览器会自动定向到新URI。今后任何新的请求都应使用新的URI代替

304   Not Modified   未修改。所请求的资源未修改，服务器返回此状态码时，不会返回任何资源。客户端通常会缓存访问过的资源，通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源

4字头---请求错误：请求包含语法错误或无法完成请求

400 Bad Request    客户端请求的语法错误，服务器无法理解。

403 Forbidden    资源不可用。服务器理解客户的请求，但拒绝处理它。通常由于服务器上文件或目录的权限设置导致。

404  Not Found    无法找到指定位置的资源。这也是一个常用的应答。

5字头---服务器错误：服务器在处理请求的过程中发生了错误

500   Internal Server Error   服务器内部错误，无法完成请求。

502  Bad Gateway     充当网关或代理的服务器，从远端服务器接收到了一个无效的请求

503 Service Unavailable   由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中