Ajax

1.什么是Ajax？
        不用刷新整个页面就可以与服务器通讯的方法（异步）：
        XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词。

 

2.工作原理：
         
 

3.XMLHttpRequest:（了解）

        (1) 创建XMLHttpRequest对象：new XMLHttpRequest();

        （2) XMLHttpRequest的方法：

         

        （3) XMLHttpRequest的属性：

         

 

4.发送请求：（了解）

       （1）onreadystatechange时间处理函数

----该事件由服务器触发而不是用户；

----Ajax执行过程中服务器会通知客户端当前状态（依靠XMLHttpRequest对象的readystate属性实现）。改变readystate属性是服务器对客户端连接操作的一种方式，每次改变都会触发onreadystatechange事件。

       （2）open方法:open(method,url,asynch)

----method:请求类型，类似"GET"或"POST"的字符串。若只从服务器检索一个文件而不需要发送任何数据，使用GET。若需要向服务器发送数据，用POST。

ps：某些浏览器把多个XMLHttpRequest请求结果缓存在一个url，将时间戳追加到url的最后，就能确保url的唯一性，从而避免浏览器缓存结果。

----url：路径字符串，指向所请求的服务器上的那个文件。可以是相对或绝对路径。

----asynch：表示请求是否需要异步传输，默认true。false的话要等该操作完成再往下执行。一般不用写。

       （3）send方法:send(data)

----send方法为已待命的请求发送命令。

----data:将要传递给服务器的字符串。若用GET请求，则不发送任何数据，给send方法传递null即可：request.send(null)，当send方法有参数时，要确保open()中指定方法是post。

       （4）request.setRequestHeader(header,value)

----如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。

----该方法必须在open()之后才能调用

 

5.接收响应：（了解）

        （1）readystate:该属性表示Ajax请求的当前状态。每次readystate值改变都会触发readystatechange事件。

----0代表未初始化：还没有调用open方法；

----1代表正在加载：open方法已经被调用，但send方法还没有被调用；

----2代表已加载完毕：send已被调用，请求已经开始；

----3代表交互中：服务器正在发送响应；

----4代表完成：响应发送完毕

        （2）status：在XMLHttpRequest对象中，服务器发送的状态码都保存在state属性里，和200或304比较判断响应是否成功

----404没有找到页面；

----403禁止访问；

----500内部服务器出错；

----200一切正常；

----304没有被修改

        （3）responseText：包含了从服务器发送的数据，是什么类型取决于服务器发送的内容。当readystate属性值变成4时，responseText属性才可用，表面Ajax请求已经结束。

        （4）responseXML

 

6.传输数据三种格式

        （1）HTML  不需要解析可以直接放到文档中。若仅更新一部分区域。但传输的数据不是很方便，且html代码需要拼装。

        （2）XML  笨重，解析困难，但XML是通用的数据交换格式

        （3）JSON  小巧，有面向对象的特征，且有很多第三方的jar包可以把java对象或集合转为json字符
 

7.使用jQuery完成Ajax操作

         （1）load方法：可以用于HTML文档的元素节点，把结果直接加为节点的子元素。通常而言，load方法加载后的数据是一个HTML片段。

格式：

var $obj = ...

var url = ...

var args = {key:value,...}    ----json格式

$obj.load(url,args);

         （2）$.get,$.post,$.getJSON：更加灵活，除去使用load方法的情况，大部分时候都使用这3个方法