Ajax和JSON

Ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
不过要了解使用Ajax，必须要从HTTP请求说起。

HTTP请求

一个完整HTTP请求的七个步骤

1、 建立TCP连接
在HTTP工作开始之前，Web浏览器首先要通过网络与Web服务器建立连接，该连接是通过TCP来完成的，该协议与IP协议共同构建Internet，即著名的TCP/IP协议族，因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议，根据规则，只有低层协议建立之后才能，才能进行更层协议的连接，因此，首先要建立TCP连接，一般TCP连接的端口号是80。

2、 Web浏览器向Web服务器发送请求命令

一旦建立了TCP连接，Web浏览器就会向Web服务器发送请求命令。例如：GET/sample/hello.jsp HTTP/1.1。

3、 Web浏览器发送请求头信息

浏览器发送其请求命令之后，还要以头信息的形式向Web服务器发送一些别的信息，之后浏览器发送了一空白行来通知服务器，它已经结束了该头信息的发送。

4、 Web服务器应答

客户机向服务器发出请求后，服务器会客户机回送应答， HTTP/1.1 200 OK ，应答的第一部分是协议的版本号和应答状态码。

5、 Web服务器发送应答头信息

正如客户端会随同请求发送关于自身的信息一样，服务器也会随同应答向用户发送关于它自己的数据及被请求的文档。

6、 Web服务器向浏览器发送数据

Web服务器向浏览器发送头信息后，它会发送一个空白行来表示头信息的发送到此为结束，接着，它就以Content-Type应答头信息所描述的格式发送用户所请求的实际数据。

7、 Web服务器关闭TCP连接

一般情况下，一旦Web服务器向浏览器发送了请求数据，它就要关闭TCP连接，然后如果浏览器或者服务器在其头信息加入了这行代码：

Connection:keep-alive

TCP连接在发送后将仍然保持打开状态，于是，浏览器可以继续通过相同的连接发送请求。保持连接节省了为每个请求建立新连接所需的时间，还节约了网络带宽。

HTTP请求

HTTP请求一般由一下四部分组成：
1、HTTP请求的方法或者动作，比如是GET还是POST
2、正在请求的URL
3、请求头，包含一些客户端环境信息，身份验证信息等
4、请求体，也就是请求的正文，其中可以包含客户提交的查询字符串信息，表单信息等

GET和POST请求

GET请求
* 一般用于信息获取
* 使用URL传递参数
* 对发送的信息数量有限制，一般在2000字符

POST请求
* 一般用于修改服务器上的资源
* 对发送的信息数量无限制

HTTP响应

有请求就应该要有响应，服务器返回的响应和客户端发送的请求比较类似。

HTTP响应的构成

一般由一下三部分构成：
1、一个由数字和文字组成的状态码，用来显示是请求成功还是失败。
2、响应头，类似请求头 包含许多有用的信息，例如服务器类型、日期时间、内容类型和长度等。
3、响应体，即响应的正文。

HTTP状态码

• 1xx：信息类，表示收到web浏览器的请求，正在进一步处理
• 2xx: 成功，表示用户请求被正确接收，例如 200 OK
• 3xx：重定向，表示请求没有成功，客户必须采取进一步的动作
• 4xx：客户端错误，表示客户提交的请求有误，例如 404 NOT Found 表示所请求的文件不存在
• 5xx：服务器错误，表示服务器不能完成对请求的处理，例 500

更多关于状态码的资料：http://baike.baidu.com/view/1790469.htm

XMLHttpRequest 发送请求

发送

方法：
* open(method,url,async)
method:请求的方法，GET还是POST 不区分大小写，通常大写
url:请求的地址
async: 请求时同步还是异步，默认为true，可省略，表示异步。需要同步则设置为false即可。
* send(string)
对于GET请求，参数string可以为空，但对于POST方法，string一般不为空（为空无意义）。

中间一句用于指定类型，必须写在open和send之间

取得响应

• responseText：获取字符串形式的响应数据
• responseXML：获得XML形式的响应数据
• status和statusText：一数字和文本形式返回HTTP状态码
• getAllResponseHeader()：获取所有的响应报头
• getResponseHeader()：查询响应中某个字段的值
• readyState ：属性
  0:请求为初始化，open为调用
  1：服务器连接已经建立，open已经调用
  2：请求已经接受，即收到头信息
  3：请求处理中，即受到响应主题
  4：请求已经完成，且响应就绪，即响应完成

通过监听request.onreadystatechange事件，判断readyState的值，从而获取请求的执行情况，并做出一定的操作

    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }

客户端示例：

<h1>员工查询</h1>
<label>请输入员工编号：</label>
<input type="text" id="keyword" />
<button id="search">查询</button>
<p id="searchResult"></p>
<h1>员工新建</h1>
<label>请输入员工姓名：</label>
<input type="text" id="staffName" /><br>
<label>请输入员工编号：</label>
<input type="text" id="staffNumber" /><br>
<label>请选择员工性别：</label>
<select id="staffSex">
<option>女</option>
<option>男</option>
</select><br>
<label>请输入员工职位：</label>
<input type="text" id="staffJob" /><br>
<button id="save">保存</button>
<p id="createResult"></p>
<script>
document.getElementById("search").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
    request.send();
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("searchResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}
document.getElementById("save").onclick = function() { 
    var request = new XMLHttpRequest();
    request.open("POST", "server.php");
    var data = "name=" + document.getElementById("staffName").value 
                      + "&number=" + document.getElementById("staffNumber").value 
                      + "&sex=" + document.getElementById("staffSex").value 
                      + "&job=" + document.getElementById("staffJob").value;
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send(data);
    request.onreadystatechange = function() {
        if (request.readyState===4) {
            if (request.status===200) { 
                document.getElementById("createResult").innerHTML = request.responseText;
            } else {
                alert("发生错误：" + request.status);
            }
        } 
    }
}
</script> 

JSON

JSON(JavaScript Object Notation) 即JavaScript对象表示法，是一种轻量级的数据交换格式，类似于XML。

JSON 语法规则

JSON 语法是 JavaScript 对象表示语法的子集。
* 数据在键值对中
* 数据由逗号分隔
* 花括号保存对象
* 方括号保存数组

JSON 名称/值对

JSON 数据的书写格式是：名称/值对。
名称/值对组合中的名称写在前面（在双引号中），值对写在后面(同样在双引号中)，中间用冒号隔开：
“firstName”:”John”
这很容易理解，等价于这条 JavaScript 语句：
firstName=”John”

JSON 值

JSON 值可以是：
* 数字（整数或浮点数）
* 字符串（在双引号中）
* 逻辑值（true 或 false）
* 数组（在方括号中）
* 对象（在花括号中）
* null

基础结构

JSON 结构有两种结构
json简单说就是javascript中的对象和数组，所以这两种结构就是对象和数组两种结构，通过这两种结构可以表示各种复杂的结构。
1、对象：对象在js中表示为“{}”括起来的内容，数据结构为 {key：value,key：value,…}的键值对的结构，在面向对象的语言中，key为对象的属性，value为对应的属性值，所以很容易理解，取值方法为 对象.key 获取属性值，这个属性值的类型可以是 数字、字符串、数组、对象几种。
2、数组：数组在js中是中括号“[]”括起来的内容，数据结构为 [“java”,”javascript”,”vb”,…]，取值方式和所有语言中一样，使用索引获取，字段值的类型可以是 数字、字符串、数组、对象几种。
经过对象、数组2种结构就可以组合成复杂的数据结构了。

基础示例

1、名称/值对

    {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"}

2、数组

    {
    "people":[
        {"firstName":"Brett","lastName":"McLaughlin","email":"aaaa"},
        {"firstName":"Jason","lastName":"Hunter","email":"bbbb"},
        {"firstName":"Elliotte","lastName":"Harold","email":"cccc"}
    ]
}

格式应用

• 赋值给变量

例如，可以创建一个新的 JavaScript 变量，然后将 JSON 格式的数据字符串直接赋值给它：

        var people = {
            "programmers": [
            { "firstName": "Brett","lastName": "McLaughlin","email": "aaaa"}, 
            { "firstName": "Jason","lastName": "Hunter","email": "bbbb"},
            { "firstName": "Elliotte","lastName": "Harold","email": "cccc"}],
            "authors": [
            {"firstName": "Isaac", "lastName": "Asimov","genre": "sciencefiction"}, 
            { "firstName": "Tad","lastName": "Williams","genre": "fantasy"}, 
            {"firstName": "Frank","lastName": "Peretti","genre": "christianfiction"}],
            "musicians": [
            {"firstName": "Eric","lastName": "Clapton","instrument": "guitar" }, 
            {"firstName": "Sergei","lastName": "Rachmaninoff","instrument": "piano"}]
        };

这非常简单；people包含前面看到的 JSON 格式的数据。但是，这还不够，因为访问数据的方式似乎还不明显。
* 访问数据

尽管看起来不明显，但是上面的长字符串实际上只是一个数组；将这个数组放进 JavaScript变量之后，就可以很轻松地访问它。实际上，只需用点号表示法来表示数组元素。所以，要想访问 programmers 列表的第一个条目的姓氏，只需在 JavaScript 中使用下面这样的代码：

        people.programmers[0].lastName;

注意，数组索引是从零开始的。所以，这行代码首先访问 people变量中的数据；然后移动到称为 programmers的条目，再移动到第一个记录（[0]）；最后，访问 lastName键的值。结果是字符串值 “McLaughlin”。
下面是使用同一变量的几个示例。

        people.authors[1].genre  // Value is "fantasy"
        people.musicians[3].lastName // Undefined. This refers to the fourth entry, and there isn‘t one
        people.programmers[2].firstName // Value is "Elliotte"

利用这样的语法，可以处理任何 JSON 格式的数据，而不需要使用任何额外的 JavaScript 工具包或 API。

• 修改数据

正如可以用点号和方括号访问数据，也可以按照同样的方式轻松地修改数据：

    people.musicians[1].lastName="Rachmaninov";

在将字符串转换为 JavaScript 对象之后，就可以像这样修改变量中的数据。
* 换回字符串

最终结论是，如果要处理大量 JavaScript 对象，那么 JSON 是一个好选择，这样就可以轻松地将数据转换为可以在请求中发送给服务器端程序的格式。

用jQuery实现Ajax

格式

jQuery.ajax([settings])
* type: 类型，”POST”、 “GET” 默认为GET
* url: 发送请求的地址
* data: 一个对象，连同请求发送到服务器的数据
* dataType: 预期服务器返回的类型，不指定 则会根据HTTP包的MIME信息智能判断 通常采用json
* success: 一个方法，成功请求后的回调函数
* error:一个方法，请求失败时调用此函数 传入XMLHttpRequest对象

对于上例，用jQuery的方式，写法如下：

$(document).ready(function(){ 
    $("#search").click(function(){ 
        $.ajax({ 
            type: "GET",    
            url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php?number=" + $("#keyword").val(),
            dataType: "json",
            jsonp: "callback",
            success: function(data) {
                if (data.success) {
                    $("#searchResult").html(data.msg);
                } else {
                    $("#searchResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });

    $("#save").click(function(){ 
        $.ajax({ 
            type: "POST",   
            url: "http://127.0.0.1:8000/ajaxdemo/serverjsonp.php",
            data: {
                name: $("#staffName").val(), 
                number: $("#staffNumber").val(), 
                sex: $("#staffSex").val(), 
                job: $("#staffJob").val()
            },
            dataType: "json",
            success: function(data){
                if (data.success) { 
                    $("#createResult").html(data.msg);
                } else {
                    $("#createResult").html("出现错误：" + data.msg);
                }  
            },
            error: function(jqXHR){     
               alert("发生错误：" + jqXHR.status);  
            },     
        });
    });
});

ajax属性async，同步和异步

async默认的设置值为true，这种情况为异步方式，就是说当ajax发送请求后，在等待server端返回的这个过程中，前台会继续 执行ajax块后面的脚本，直到server端返回正确的结果才会去执行success，也就是说这时候执行的是两个线程，ajax块发出请求后一个线程 和ajax块后面的脚本（另一个线程）例：

$.ajax({  
          type:"POST", 
         url:"Venue.aspx?act=init", 
           dataType:"html", 
          success:function(result){   //function1()
             f1(); 
             f2(); 
        } 
         failure:function (result) {  
            alert(‘Failed‘);  
         }, 
  } 
  function2(); 

在上例中，当ajax块发出请求后，他将停留function1()，等待server端的返回，但同时（在这个等待过程中），前台会去执行function2(),也就是说，在这个时候出现两个线程，我们这里暂且说为function1() 和function2()。
当把async设为false时，这时ajax的请求时同步的，也就是说，这个时候ajax块发出请求后，他会等待在function1（）这个地方，不会去执行function2()，知道function1()部分执行完毕。
注意
同步的意思是当JS代码加载到当前AJAX的时候会把页面里所有的代码停止加载，页面出去假死状态，当这个AJAX执行完毕后才会继续运行其他代码页面假死状态解除。
而异步则这个AJAX代码运行中的时候其他代码一样可以运行。

软件 fiddler