Ajax（一）

一、概述

   是一种无需再浏览器中刷新整个页面就能从服务器端获取并显示数据的技术。
本来代表的是异步JavaScript和XML，Ajax允许我们向服务器发起异步请求，
意味着请求发生在幕后，不会阻塞用户与页面内容之间的交互。
    jQuery定义了一整套Ajax快捷方法，本质上都是核心Ajax函数的
某种封装，用于方便快捷地执行常见的Ajax任务。

二、异步请求的优缺点

①、优点：
   使我们得以创建更友好的html页面，根据来自服务器的数据平滑的更新页
面，即无需打断用户的交互。
②、缺点：
   无法预知请求在什么时候完成，也无法对请求结果做任何假定。其次，回调函
数的广泛使用通常会导致更加复杂的代码。

三、JSON(JavaScript Object Notation)数据

   较于XML来说，是一种更简单的数据格式，且容易被JavaScript处理（与使
用JavaScript代码表示数据的方式一样）。    
请求方式简介：
    get请求发送表单数据可能会有风险。一般来说：
    get：
        仅用于获取只读的信息。
    post：
        用于任何会导致应用程序状态发生变化的操作。
    web标准术语来讲，GET请求用于安全的交互（除了获取数据没有副作用），
而post请求用于非安全的交互（做一个什么决定或者改变什么东西）。

四、跨源Ajax请求

   Access-Control-Allow-Origin:http://www.flowershop.com
   默认情况下，浏览器只允许脚本对于页面同源的服务器发起请求。
   一个源就是由协议、主机名和端口组成的URL.如果两个URL有着同样的协议、
主机名和端口，那么它们就是同源的，如果三者之一有所不同，那么它们就是不同
源的。（http://en.wikipedia.org/wiki/Cross-site_scripting）；
   当我们从一个来源向另一个来源发起请求时，这就是跨源请求。同时，跨源请
求是不被允许的。开发者不得不想尽办法欺骗浏览器，以设法绕过这条规则发出跨
源请求。幸运的是，如今已有一条支持跨源的合法通道，即CORS(
Cross-Origin Resource Sharing，跨源资源共享规范)。完整规范可参见
http://www.w3.org/TR/cors/

五、JSONP

   JSONP是CORS的替代方案，不同之处在于它支持那些仅允许同源Ajax请求的
环境。依赖于这样一个事实：浏览器允许我们从任意服务器上载入JavaScript代
码，这也正是script元素src属性的工作方式。要使用JSONP：
①、首先要在页面中定义一个处理数据的函数。
    ...
    function processJSONP(data){
        //处理数据
    }
    ...

②、向服务器发起请求，并在查询字符串中加上表单数据及callback属性，把
callback的值设为刚才定义的函数名。

③、服务器像往常一样生成json数据，然后创建一条JavaScript语句，调用刚
才定义的函数，并把数据作为这个函数的参数，同时将响应内容的content-
type设置为text/javascript，这样浏览器就知道收到是JavaScript代码，
应该执行它们。这样实际上调用了我们之前定义的函数，而且以服务器返回的数据
作为参数。如此，无需跨源，一样完美绕过了同源的问题。

六、常见问题

1、如何发起一个异步的HTTP GET请求？
    使用get方法。
    $(document).ready(function(){
        $.get("flowers.html",function (data){
            getAfterHandler(data);
        });
    });
    或者：
    $(document).ready(function(){
        $.get("flowers.html",getAfterHandler);
    });

    /*get之后回调函数*/
    function getAfterHandler(data){
        var elems = $(data).filter("div").addClass("dcell");
        elems.slice(0,3).appendTo("#row1");
        elems.slice(3).appendTo("#row2");
    }



2、如何处理来自Ajax GET请求的数据？
    传递一个回调函数给get方法。

3、如何为响应用户行为而发起Ajax请求？
    在事件处理函数中调用get方法。
    $(document).ready(function (){
        $("<button>Ajax toggle</button>").appendTo("#buttonDiv").click(function (e){
                $.get("flowers.html",function(data){
                    getAfterHandler(data);
                });
            e.preventDefault();
        })
    });

4、如何向服务器端请求JSON数据？
    使用get方法，并在回调函数中接收数据。
    $.get("myjson.json",function(data){
        handlerData(data);
    });

5、如何在发起get请求的同时发送数据给服务器？
    作为参数传递一个javaScript对象给get方法。
    var requestData = {
        country:"US",
        state:"New York"
    };
    $.get("myjson.json",requestData,function(data){
        handlerData(data);
    });
    提供的数据会被作为请求字符串追加到目标URL中，因此，意味着组装
的数据会成为如下的样子发送：
    http://.../..html?country=US&state=New+York


6、如何发起一个HTTP异步POST请求？
    使用post方法。
    $(document).ready(init);
    function init(){
        var btn = $("button");
        btn.on("click",btnClickCallBack);
    }
    function btnClickCallBack(e){
        var formData = $("form").serialize();
        $.post("url",formData,processServerResponse);
        e.preventDefault();
    }
    function processServerResponse(data){
        ...
    }


7、如何在post请求中发送非表单数据？
    作为参数传递一个javaScript对象给post方法。
    $(document).ready(init);
    function init(){
        var btn = $("button");
        btn.on("click",btnCallback);
    }
    function btnCallback(e){
        var requestData= {
            apples:2,
            oranges:10
        };
        $.post("url",requestData,processServerResponse);
        e.preventDefault();
    }
    function processServerResponse(data){
        JSON.stringify(data);
    }
    JSON.stringify:把JSON对象重新转换为JSON字符串。


8、如何在Ajax请求中忽略服务器指定的数据类型？
    在发起Ajax请求时（给get和post方法）指定期望的数据类型。

    在使用get和post方法时，jQuery必须设法搞清服务器端响应数据的
类型；可能是HTML、JavaScript代码，或者其他类型。jQuery根据服务器响应
的信息，
特别是Content-type抱头来判断响应数据的类型。但当web服务器为响应的数据
使用了错误的MIME类型,jQuery需要一些提示。
    基于上述原因，可以为get或post方法多提供一个参数，直接告诉
jQuery我们需要的数据类型。如下为可提供的参数：
        xml
        json
        jsonp
        script
        html
        text

    代码样例：
        $(document).ready(init);
        function init(){
            $.get("url",processFunction,"json");
        }
        function processFunction(data){
            console.log(JSON.stringify(data));
        }

9、如何避免最常见的Ajax陷阱？
    不要错把Ajax异步请求当成同步请求。
    var elems;
    $.get("url",function(data){
        elems = $(data).filter("div").addClass("cell");
    });
    elems.slice()...;


10、如何使用特定数据类型的GET快捷方法？
    使用load、getScript或getJSON方法。

11、如何为表单元素轻松弃用Ajax？
    使用Ajax Forms插件。

12、jquery对JSONP的支持？
    使用getJSON方法时在URL的查询字符串中增加callback=？。
jQuery会自动生成一个随机名字的回调函数，并使用它和服务器进行通信，例子如下：
    var url = "http://.../order?callback=?";
    $.getJSON(url,formData,processServerResponse);