2015.3.17Ajax小练习

      网页被浏览器处理时，动态供给网页动态数据。以动态数据建造的网页成为数据驱动网页，数据负责网页的内容。

  JavaScript内置了动态数据的支持，这种支持就是ajax。一直以来都对ajax非常的感兴趣，今天做了一个小实验。先来描述一下ajax，ajax能让客户端的浏览器能与网络服务器产生一些“对话”，动态数据也因此而成真，脚本可向服务器请求部分数据，服务器利用ajax传递数据，脚本收下数据并动态的将数据整合到网页里。而网页并不需要全部刷新和重新加载，这样就能大大提高用户的体验和提升速度。ajax是Asynchronous Javascript And XML的缩写，这里也提到了一个xml的概念，xml是种为任何类型的数据设计格式的标记语言。xml可以用自己的标签标示数据，xml与html相似，都是文本。还有xhtml，XHTML是遵守xml的较严格语法规则的新版html。

   整个ajax的交互模型是这样的，在实行客户端浏览器与服务端的数据通信时，ajax以请求（request）与响应（response）为中心概念。浏览器送出请求到服务器，并等待响应，服务器收到响应，开始工作，创建响应，服务器脚本就不是JavaScript了，但JavaScript很厉害啊，现在node.js可以担负部分简单的服务器职责并且功能还在不断的扩展。接下来就是服务器创建给浏览器的响应，把客户端请求的数据打包由ajax响应返回，浏览器解开响应中打包的数据，并小心的将数据整合至网页中。

   javascript内置一个XMLHttpRequest的对象，用于发起ajax请求并处理ajax响应。包含了很多支持ajax的方法与特性。

   readyState请求的状态代码：0（未初始）1（开启）2（已传送）3（接受中）4（已载入）

   status（HTTP的请求状态代码，例如404（NOT FOUND）或200（ok））。

   上述两个特性，可判断ajax请求是否以合法的响应结束。

   onreadystatechange请求状态改变时会被调用的函数引用。（这个特性的独特之处，在于它存储一个引用，引用于ajax请求的状态改变时被调用的自定义事件处理器，这个事件处理器就是处理响应的地方）

  responseText（由服务器返回的响应数据，格式为纯文本字符串）和responseXML（由服务器返回的响应数据，格式为XML节点树构成的对象。）这个两个特性存储服务器返回的Ajax响应数据。

send（）传送请求，交给服务器处理。

open（）准备请求，指定请求的类型（get，post），URL及其他细节。

send（）和open（）这两个方法合作准备Ajax骑牛，而后返回给服务器。

abort（）这个方法只用在需要取消ajax请求的时候。

由于XMLHttpRequest相当复杂，即使最基础的请求，也需要很多的代码，于是这里把这个基本请求语句封装成一个js模块。方便调用实验，源码如下：

接下来是原生js写的异步加载，这里服务端是用的C#，

原生js的ajax方法：

执行结果：点击前：

执行后：

 第一次原生异步成功之后，现在试一试jquery的ajax方法

一个是jquery的load加载文档，一个是post和get联接一起使用的方法。

body部分：

js部分

：

服务端部分：

运行结果：