Ajax

                                                                     Ajax

1.Ajax:Asynchronous JavaScript and XML

    允许浏览器与服务器通信而无须刷新当前页面的技术都叫Ajax.

2. Ajax模型与Web传统模型的区别：
    Web的传统模型，客户端想服务器发送一个请求，服务器返回整个页面，如此反复。
    Ajax模型，数据在客户端与服务器之间独立传输，服务器不再返回整个页面。

3. Ajax不用刷新整个页面就可以与服务器通讯的方法：
        3.1 Flash
        3.2 Java applet
        3.3 框架
        3.4 隐藏的iframe
        3.5XMLHttpRequest:js的扩展，可以使网页与服务器进行通信，是创建Ajax应用的最佳选择。

4. Ajax由集中技术聚合而来：
    4.1 服务器语言
    4.2 XML
    4.3 XHTML

    4.4 DOM

5. 使用XMLHTTP组件XMLHttpRequest对象进行异步数据读取。
6. 使用JavaScript绑定和处理所有数据

7. Ajax的缺陷：由JavaScript和Ajax引擎导致的浏览器的兼容；后退等功能失效；对流媒体的支持没有flash,java applet好；一些手持设备支持性差。

8. 创建XMLHttpRequest对象：
    function getHTTPObject(){
        var xhr=false;
        if(window.XMLHttpRequest){
            xhr=new XMLHttpRequest();
        }else if(window.ActiveXObject){
            xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhr;
    }
ps:对window.XMLHttpRequest的调用会返回一个对象或null,if语句会把调用返回的结果看成true或false。如果XMLHttpRequest对象存在，则把xhr的值设为该对象的新实例。如果不存在，就去检测ActiveObject的实例是否存在，如果存在，则把微软XMLHTTP的新实例赋给xhr。

9. XMLHttpRequest的方法：
    abort()                    停止当前请求
    getAllRequestHeaders()     吧HTTP请求的所有相应收不作为键/值对返回
    getResponseHeader("header")返回指定首部的串值
    open("method","url")       建立对服务器的调用，method参数可以是GET，POST，PUT。url参数可以是相对URL或绝对URL.
    send(content)              向服务器发送请求
    setRequestHeader("header","value")   把指定首部设置为所提供的值。在设置任何首部之前必须先调用open().
 
10. XMLHttpRequest的属性：
     onreadystatechange:每个状态改变时都会触发这个事件处理器，通常会调用一个ja函数
     readyState:请求的状态，0=未初始化，1=正在加载，2=已经加载，3=交互中，4=完成。
     responseText:服务器的响应，表示为一个串。
     responseXML:服务器的响应，表示为XML.这个对象可以解析为DOM对象。
     status:服务器的HTTP状态码。
     statusText:HTTP状态码的相应文本。

                                                                         -----发送请求-----

1. 利用XMLHttpRequest实例与服务器进行通信包含3个关键部分：

    onreadystatechange事件处理函数   open方法   send方法

2.  send(data)：send方法可为已经待命的请求发送指令。若选用的是GET请求，则不会发送任何数据，给send方法传递null即可。
 GET请求示例：
 var request=getHTTPObject();
 if(request){
    request.onreadystatechange=doSomeThing;
    request.open("GET","file.txt",true);  //true:异步传输，读取后面的脚本之前，不需要等待服务器的响应。
    request.send(null);
    }
    
                                                                         ----接收相应----

1. XMLHttpRequest的以下属性可被服务器更改：

     readyState   status  responseText  responseXML

2. readyState表示Ajax请求的当前状态(上面提过)
    每次readyState的改变都会触发readystatechange事件
 
3. 常见状态码及其含义：
    404 没找到页面(not found)
    403 禁止访问(forbidden)
    500 内部服务器出错(internal service error)
    200 一切正常(ok)
    304 没有被修改(not modified)

4. responseText包含了从服务器发送的数据，当readyState=4时，responseText才可用，表明Ajax请求已经结束。
    function foSomeThing(){
       if(request.readyState==4){
           if(request.status==200 || request.status==304){
               alert(request.responseText);
           }
       }
    }
 
5. 使用Ajax只能以3种格式返回数据:XML  JSON  HTML
     JSON实例：
     var user
     {
        "username":"lili",
        "age":20,
        "info":{"tel":"12323","class":"12"},
        "address":
            [
                {"city":"beijing","postcode":"2233"},
                {"city":"shanghai","postcode":"12323"}
            ]
     }
     alert(user.username);
     alert(user.age);
     alert(user.info.tel);
     alert(user.address[0].city);

     alert(user.address[0].postcode);

     ps: JSON优点：比XML更加灵巧，不需要从服务器端发送含有特定内容类型的首部信息。
     缺点：语法过于严谨，代码不容易读，eval函数存在风险。
 
6.  jQuery中的Ajax
     jQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON()
    6.1 load()方法能载入远程的HTML代码并插入到DOM中，他的结构为load(url,[data],[回调函数])。
   在load()方法中，如果没有参数传递，采用GET方式传递，否则采用POST方式。
    6.2 $.get() 方法使用 GET 方式来进行异步请求. 它的结构是: $.get(url,[data],[回调函数],[服务器返回内容的格式]);