AJAX

1.什么是AJAX:
AJAX = Asynchronous JavaScript And XML异步 JavaScript 和 XML AJAX 是一种用于创建快速动态网页的技术 通过在后台与服务器进行数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
     
最大的特点：
     不用刷新整个页面，就可以使页面实现局部刷新，通过JavaScript来控制页面的元素。
     与服务器进行交互。
     
同步和异步：
     同步交互：当客户端向服务端发送请求之后，需要等待服务器响应结束之后，才可以发送第二
               个请求。
     异步交互：当客户端向服务器发送请求之后，不需要等待服务器响应结束之后，就可以发送第二
               个请求。
               
ajax优点和缺点
     优点：
      AJAX使用Javascript技术向服务器发送异步请求；
      AJAX无须刷新整个页面；
      因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；
     缺点：
      AJAX并不适合所有场景，很多时候还是要使用同步交互；
      AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
      因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

2.XMLHttpRequest     XMLHttpRequest 是 AJAX 的基础

创建 XMLHttpRequest 对象 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象 创建 XMLHttpRequest 对象的语法： var variablename=new XMLHttpRequest(); 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： var variablename =new ActiveXObject("Microsoft.XMLHTTP"); 为了应对所有的现代浏览器，包括 IE5 和 IE6，需要检查浏览器是否支持 XMLHttpRequest 对象 如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ，通过XMLHttpRequest 对象的 open() 和 send() 方法将请求发送到服务器：                                                      1.xmlhttp.open(method,url,async);

2.xmlhttp.send(); （两个方法需要连用）                

    描述 open(method,url,async)    规定请求的类型、URL 以及是否异步处理请求    

               1.method：请求的类型；GET 或 POST  （最好保证大写字母，否则有些浏览器会不支持。与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用，在以下情况中建议使用 POST 请求：     1.无法使用缓存文件（比如更新服务器上的文件或数据库）     2.向服务器发送大量数据（POST 没有数据量限制）     3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠）         

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

               3.async：true（异步）或 false（同步）

                send()   将请求发送到服务器          

 如下所示：

var xmlhttp;

if (window.XMLHttpRequest){    

xmlhttp=new XMLHttpRequest();// IE7+,Firefox,Chrome,Opera,Safari 浏览器执行代码

}else{  

  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码 }

   xmlhttp.open("post","1.txt",true);
   xmlhttp.send();

//这里是服务器的响应onreadystatechange 事件        描述 responseText    获得字符串形式的响应数据，如果来自服务器的响应并非         XML，使用 responseText 属性 responseXML    获得 XML 形式的响应数据,如果来自服务器的响应是XML,而        且需要作为 XML 对象进行解析,使用 responseXML 属性

   xmlhttp.onreadystatechange = function(){

//里面xmlhttp含有readyState和status属性

readyState        

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。                 

0: 请求未初始化                 

1: 服务器连接已建立                 

2: 请求已接收               

 3: 请求处理中                 

4: 请求已完成，且响应已就绪

status            

200: "OK"             

404: 未找到页面
   }

2.load事件

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。 语法：$(标签选择器).load(URL,data,callback); 参数说明：     URL：必需的，参数规定您希望加载的 URL。     data：可选的，参数规定与请求一同发送的查询字符串键/值对集合。     callback：可选的，参数是 load() 方法完成后所执行的回调函数。 回调函数参数说明（参数与参数位置相关，与参数名无关）：

$("#box").load("ajaxLoad.txt",function(responseTxt,statusTxt,xhr){    responseTxt:包含调用成功时的结果内容     statusTxt:包含调用的状态("success", "notmodified", "error", "timeout" 或"parsererror") xhr - 包含 XMLHttpRequest 对象 （包含前两个）  

if(statusTxt=="success"){ }    

if(statusTxt=="error"){  });

3.get事件

$.get(URL,data,function(data,status,xhr),dataType)

参数描述

URL     必需。规定您需要请求的 URL。

data     可选。规定连同请求发送到服务器的数据。

function(data,status,xhr)    可选。规定当请求成功时运行的函数。             

                 function的参数： data - 包含来自请求的结果数据                 

                 status - 包含请求的状态（"success"、 "notmodified"、"error"、"timeout"、"parsererror"）                 

                 xhr - 包含 XMLHttpRequest 对象

dataType  可选。规定预期的服务器响应的数据类型。 默认地，jQuery     会智能判断，可能的类型有：               

                                        "xml" - 一个 XML 文档                 

                                         "html" - HTML 作为纯文本               

                                          "text" - 纯文本字符串             

                                           "script" - 以 JavaScript 运行响应，并以纯文本返回                 

                                            "json" - 以 js object natation运行响应，并以 js对象返回             

                                           "jsonp" - 使用 JSONP 加载一个 JSON 块，将添加一个                   

                                           "?callback=?" 到 URL 来规定回调

load和get的区别

jquery的load把返回的数据放到指定的元素中，不是全局函数；
jquery的get把返回的数据交给用户处理，是全局函数
load和get同样是jquery的ajax函数，load的实现，几乎等于get之后再设置网页元素，在ajax获取机制上没有区别，但要注意的是，load方法另一个和get的重要区别，就是load允许指定要插入的远程文档的某个部分，比如：
$("#result").load("test.html #page2");
load是最简单的ajax加载局部网页的方法，但有局限性（只能替换元素内容）。

4.post事件

语法：$.post(url,data,success(data, statusTxt, xhr),dataType)

具体方法参数可参照get事件参数

5.ajax事件

$.ajax({type: 'POST',   url: url,   data: data,   success: success（data , statusTxt,xhr）,   dataType: dataType });

 type   规定请求的类型（GET 或 POST）。

url 规定发送请求的 URL。默认是当前页面。

async布尔值，表示请求是否异步处理。默认是 true。

contentType发送数据到服务器时所使用的内容类型默认是："application/x-www-form-urlencoded"。

dataType 预期的服务器响应的数据类型,即告诉浏览器按照什么数据类型进行解析。

data（key：value）格式     定要发送到服务器的数据。Servlet中使用getParameter（key）来获取

beforeSend(xhr)  发送请求前运行的函数。

error(xhr,status,error) 如果请求失败要运行的函数。

success(result,status,xhr)    当请求成功时运行的函数。

complete(xhr,status) 请求完成时(成功或失败之后均调用)运行的函数