Ajax



1.什么是Ajax
    现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

2.不用刷新整个页面便可与服务器通讯的办法：
    1)Flash
    2)Java applet
    3)框架：如果使用一组框架构造了一个网页，可以只更新其中一个框架，而不必惊动整个页面
    4)隐藏的iframe
    5)XMLHttpRequest：该对象是对 JavaScript 的一个扩展，可使网页与服务器进行通信。是创建 Ajax 应用的最佳选择。
      实际上通常把 Ajax 当成 XMLHttpRequest 对象的代名词

3.XMLHttpRequest的概述
    XMLHttpRequest 最早是在IE5中以ActiveX组件的形式实现的。非 W3C 标准.创建XMLHttpRequest对象（由于非标准所以实现方法不统一）
Internet Explorer把XMLHttpRequest实现为一个ActiveX对象其他浏览器（Firefox、Safari、Opera…）把它实现为一个本地的JavaScript对象。
XMLHttpRequest在不同浏览器上的实现是兼容的，所以可以用同样的方式访问XMLHttpRequest实例的属性和方法，而不论这个实例创建的方法是什么。

4.不同的浏览器使用不同的方法来创建 XMLHttpRequest 对象。
    Internet Explorer 使用 ActiveXObject。其他浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象。
    例：
    var XMLHttp=null;
    if (window.XMLHttpRequest){
        // code for IE7+, Firefox, Chrome, Opera, Safari
        XMLHttp=new XMLHttpRequest()
    }else if (window.ActiveXObject){
       // code for IE6, IE5
       XMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
    }
   
    代码解释：
    首先创建一个作为 XMLHttpRequest 对象使用的 XMLHttp 变量。把它的值设置为 null。
    然后测试 window.XMLHttpRequest 对象是否可用。在新版本的 Firefox, Mozilla, Opera 以及 Safari 浏览器中，该对象是可用的。
    如果可用，则用它创建一个新对象：XMLHttp=new XMLHttpRequest()
    如果不可用，则检测 window.ActiveXObject 是否可用。在 Internet Explorer version 5.5 及更高的版本中，该对象是可用的。
    如果可用，使用它来创建一个新对象：XMLHttp=new ActiveXObject()

5.属性
    1)readyState:HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。
        状态:名称:描述
        0:Uninitialized:初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。
        1:Open:open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。
        2:Send:Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。
        3:Receiving:所有响应头部都已经接收到。响应体开始接收但未完成。
        4:Loaded:HTTP 响应已经完全接收。

        readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。
 每次 readyState 值的改变，都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数，
 那么每次 readyState 值的改变都会引发该函数的执行。
        readyState 值的变化会因浏览器的不同而有所差异。但是，当请求结束的时候，每个浏览器都会把 readyState 的值统一设为 4

    2)responseText:目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。
        如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。
 如果 readyState 为 4，这个属性保存了完整的响应体。
        如果响应包含了为响应体指定字符编码的头部，就使用该编码。否则，假定使用 Unicode UTF-8。
    3)responseXML:对请求的响应，解析为 XML 并作为 Document 对象返回。如果响应体不是“text/xml”返回null。
    4)status:由服务器返回的 HTTP 状态代码，
        404 没找到页面(not found)
        403 禁止访问(forbidden)
        500 内部服务器出错(internal service error)
        200 一切正常(ok)
        304 没有被修改(not modified)

        在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较，
 可以确保服务器是否已发送了一个成功的响应
        如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。

    5)statusText:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。
        也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，
 当 readyState 小于 3 的时候读取这一属性会导致一个异常。

6.事件句柄
    1)onreadystatechange：每次 readyState 属性改变的时候调用的事件句柄函数。当 readyState 为 3 时，它也可能调用多次。
        该事件处理函数由服务器触发，而不是用户
        在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。
 改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange 事件

7.方法
    1)abort():取消当前响应，关闭连接并且结束任何未决的网络活动。
        这个方法把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。
 例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
    2)getAllResponseHeaders():把 HTTP 响应头部作为未解析的字符串返回。
        如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。
 头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。
    3)getResponseHeader():返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。
        可以使用任何大小写来制定这个头部名字，和响应头部的比较是不区分大小写的。
        该方法的返回值是指定的 HTTP 响应头部的值，如果没有接收到这个头部或者 readyState 小于 3 则为空字符串。
 如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
    4)open():初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。
    5)send():发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
    6)setRequestHeader():向一个打开但未发送的请求设置或添加一个 HTTP 请求。

8.各项介绍
     1)XMLHttpRequest.open():初始化 HTTP 请求参数
         语法:open(method, url, async)
             XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。
             method：请求类型，类似 “GET”或”POST”的字符串。
          若只想从服务器检索一个文件，而不需要发送任何数据，使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据，
   不过数据大小限制为2000个字符)。若需要向服务器发送数据，用POST。
                 在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。
   如果对每个请求的响应不同，就会带来不好的结果。在此将时间戳追加到URL的最后，就能确保URL的唯一性，从而避免浏览器缓存结果。
             url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。
             asynch：表示请求是否要异步传输，默认值为true。
          指定true，在读取后面的脚本之前，不需要等待服务器的相应。
   指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

     2)XMLHttpRequest.send():发送一个 HTTP 请求
         语法:send(data)：
             open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令
             data：将要传递给服务器的字符串。
             若选用的是 GET 请求，则不会发送任何数据， 给 send 方法传递 null 即可：request.send(null);
             当向send()方法提供参数时，要确保open()中指定的方法是POST，如果没有数据作为请求体的一部分发送，则使用null.

     3)XMLHttpRequest.setRequestHeader()
         语法:setRequestHeader(header,value)
             当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。
      首部信息用来声明一个请求是 GET 还是 POST。
             Ajax 请求中，发送首部信息的工作可以由 setRequestHeader该完成
             参数header： 首部的名字;  参数value：首部的值。
             如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.
      它会告知服务器正在发送数据，并且数据已经符合URL编码了。
             该方法必须在open()之后才能调用
9.局限性
    XmlHttpRequest不支持跨域访问，这是由网景公司(netscape)在开发浏览器时定义的同源策略导致的。

10.数据格式提要
    在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。
    从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：
         XML
         JSON
         HTML

    1)XML
         ①优点：
             XML 是一种通用的数据格式。
             不必把数据强加到已定义好的格式中，而是要为数据自定义合适的标记。
             利用 DOM 可以完全掌控文档。
         ②缺点：
             如果文档来自于服务器，就必须得保证文档含有正确的首部信息。若文档类型不正确，那么 responseXML 的值将是空的。
             当浏览器接收到长的 XML 文件后， DOM 解析可能会很复杂
    2)JSON
        ①JSON（JavaScript Object  Notation）一种简单的数据格式，比xml更轻巧。
 JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。
        JSON的规则很简单：对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。
                   每个“名称”后跟一个“:”（冒号）；“‘名称/值’对”之间使用“,”（逗号）分隔。
        ②解析 JSON
     JSON 只是一种文本字符串。它被存储在 responseText 属性中
            为了读取存储在 responseText 属性中的 JSON 数据，需要根据 JavaScript 的 eval 语句。
     函数 eval 会把一个字符串当作它的参数。然后这个字符串会被当作 JavaScript 代码来执行。
     因为 JSON 的字符串就是由 JavaScript 代码构成的，所以它本身是可执行的
        var jsonstr = request.reponseText;
        var json = eval("("+jsonstr+")");
           JSON提供了json.js包，下载http://www.json.org/json.js后，使用parseJSON()方法将字符串解析成 JS 对象
        var jsonstr = request.reponseText;
        var json = jsonstr.parseJSON();
 ③优点：
              作为一种数据传输格式，JSON 与 XML 很相似，但是它更加灵巧。
              JSON 不需要从服务器端发送含有特定内容类型的首部信息。
        ④缺点：
              语法过于严谨
              代码不易读
              eval 函数存在风险
    3)HTML
        ①解析 HTML
            HTML 由一些普通文本组成。如果服务器通过 XMLHttpRequest 发送 HTML， 文本将存储在 responseText 属性中。
            不必从 responseText 属性中读取数据。它已经是希望的格式，可以直接将它插入到页面中。
            插入 HTML 代码最简单的方法是更新这个元素的 innerHTML 属性。
        ②优点：
            从服务器端发送的 HTML 代码在浏览器端不需要用 JavaScript 进行解析。
            HTML 的可读性好。
            HTML 代码块与 innerHTML 属性搭配，效率高。
        ③缺点：
            若需要通过 AJAX 更新一篇文档的多个部分，HTML 不合适
            innerHTML 并非 DOM 标准。
    4)对比
        若应用程序不需要与其他应用程序共享数据的时候, 使用 HTML 片段来返回数据时最简单的
        如果数据需要重用, JSON 文件是个不错的选择, 其在性能和文件大小方面有优势
        当远程应用程序未知时, XML 文档是首选, 因为 XML 是 web 服务领域的 “世界语”
示例代码：
 var url = this.href+"?time="+new Date();
 var xmlHttpRequest = new XMLHttpRequest();
 xmlHttpRequest.open("GET",url);
 xmlHttpRequest.send(null);
 xmlHttpRequest.onreadystatechange = function(){
   if(xmlHttpRequest.readyState == 4){
    if(xmlHttpRequest.status == 200){
    //var jsonStr = eval("("+xmlHttpRequest.responseText+")");
    alert(xmlHttpRequest.responseText);
    }
   }
 };

Jquery 异步参考：
ajax 请求
    $.ajax(url,[settings])
    load(url,[data],[callback])
    $.get(url,[data],[fn],[type])
    $.getJSON(url,[data],[fn])
    $.getScript(url,[callback])
    $.post(url,[data],[fn],[type])
ajax 事件
    ajaxComplete(callback)
    ajaxError(callback)
    ajaxSend(callback)
    ajaxStart(callback)
    ajaxStop(callback)
    ajaxSuccess(callback)
其它
    $.ajaxPrefilter([type],fn)
    $.ajaxSetup([options])
    serialize()
    serializearray()

1.jQuery 中的 Ajax
    jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(),
    第二层是 load(), $.get() 和 $.post(),
    第三层是 $.getScript() 和 $.getJSON()
2.load() 方法
    load() 方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入远程的 HTML 代码并插入到 DOM 中.
    它的结构是:   load(url[, data][,callback])
   
    如果只需要加载目标 HTML 页面内的某些元素, 则可以通过 load() 方法的 URL 参数来达到目的. 通过 URL 参数指定选择符,
    就可以方便的从加载过来的 HTML 文档中选出所需要的内容. load() 方法的 URL 参数的语法结构为 “url selector”
    (注意: url 和 选择器之间有一个空格)
    传递方式: load() 方法的传递参数根据参数 data 来自动自定. 如果没有参数传递, 采用 GET 方式传递, 否则采用 POST 方式
    对于必须在加载完才能继续的操作, load() 方法提供了回调函数,
    该函数有三个参数: 代表请求返回内容的 data; 代表请求状态的 textStatus 对象和 XMLHttpRequest 对象
3.$.get() 方法使用 GET 方式来进行异步请求.
    它的结构是: $.get(url[, data][, callback][, type]);
    $.get() 方法的回调函数只有两个参数:
        data 代表返回的内容, 可以是 XML 文档, JSON 文件, HTML 片段等;
 textstatus 代表请求状态, 其值可能为: succuss, error, notmodify, timeout 4 种.
    $.get()  和 $.post() 方法时 jQuery 中的全局函数, 而 find() 等方法都是对 jQuery 对象进行操作的方法
4.序列化元素
    jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize().
    该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.
    使用 serialize() 方法可以自动完成对参数的 url 编码
    因为该方法作用于 jQuery 对象, 所以不光只对表单能使用, 其它选择器选取的元素也能使用它.

    $("#form").serialize();