摘要：中間部分由或多個以，分隔的關鍵字值對構成，關鍵字字符串和值之間以分隔數組結構以開始，結束。

Q:AJAX以何種格式來交換數據？跨域的需求如何解決？
A:用JSON來傳數據，靠JSONP來跨域（具體參見下文）

AJAX 創建對象

AJAX = Asynchronous(英[e??s??kr?n?s]) JavaScript and XML（異步的 JavaScript 和 XML）。

XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

創建兼容對象

所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。

// 創建 XMLHttpRequest 對象
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
// 向服務器發送請求
// 當使用 async=true 時，請規定在響應處于 onreadystatechange 事件中的就緒狀態時執行的函數
// async=false 時，請不要編寫 onreadystatechange 函數 - 把代碼放到 send() 語句后面即可
xmlhttp.onreadystatechange=function(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200){
    // 來自服務器的響應 responseText:字符串形式 responseXML:XML形式
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

發送請求 XMLHttpRequest 方法

open(method,url,async)

method：請求的類型；GET 或 POST
url：文件在服務器上的地址(該文件可以是任何類型的文件或服務器腳本文件)
async：true（異步）或 false（同步）

send(string)

string：僅用于 POST 請求

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，并且在大部分情況下都能用。
然而，在以下情況中，請使用 POST 請求：
無法使用緩存文件（更新服務器上的文件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸入時，POST 比 GET 更穩定也更可靠

避免得到的是緩存的結果，向URL添加一個唯一的 ID

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);

希望通過 GET 方法發送信息，請向 URL 添加信息

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);

需要像 HTML 表單那樣 POST 數據，請使用 setRequestHeader() 來添加 HTTP 頭。然后在 send() 方法中規定您希望發送的數據

// 向請求添加 HTTP 頭。
// setRequestHeader(header,value)
// header: 規定頭的名稱 value: 規定頭的值
xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

服務器響應

XMLHttpRequest 對象的 responseText 或 responseXML 屬性

responseText:字符串形式

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML:XML形式

// 請求 books.xml 文件，并解析響應   
xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i";
  }
document.getElementById("myDiv").innerHTML=txt;    

readyState

當請求被發送到服務器時，我們需要執行一些基于響應的任務。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。

XMLHttpRequest 對象的三個重要的屬性

onreadystatechange

存儲函數（或函數名），每當 readyState 屬性改變時，就會調用該函數。

readyState

存有 XMLHttpRequest 的狀態。從0到4發生變化。(一共被觸發 5 次)
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status

200: "OK"
404: 未找到頁面

使用 Callback 函數

callback 函數是一種以參數形式傳遞給另一個函數的函數

JSON

JavaScript 對象表示法（JavaScript Object Notation）
是存儲和交換文本信息的語法。類似 XML，比XML更小、更快，更易解析。
JSON有六種類型的值：對象，數組，字符串，數字，布爾值和特殊值null。

JSON 語法規則

數據在名稱/值對中
數據由逗號分隔
花括號保存對象
方括號保存數組

JSON具有兩種結構：對象，數組

對象結構以”{”大括號開始，以”}”大括號結束。中間部分由0或多個以”，”分隔的”key(關鍵字)/value(值)”對構成，關鍵字字符串和值之間以”：”分隔

{
    key1:value1,
    key2:value2,
    ...
}

數組結構以”[”開始，”]”結束。中間由0或多個以”，”分隔的值列表組成

[
   {
       key1:value1,
       key2:value2,
      ...
   },
   {
       key1:value1,
       key2:value2,
      ...
   },
]

JSON的解析與序列化

JSON對象（ECMAScript 5中添加的， 早期JSON解析基本都使用javascript的eval()函數。但是eval有一些性能和安全上的缺點，ECMAScript對解析JSON對象進 行了規范，定義了全局對象JSON，支持的瀏覽器有標準瀏覽器和IE8+。對于不支持的瀏覽器可以引入json2.js文件。）有stringify與parse這兩個方法。

JSON.stringify

將javascript對象序列化為JSON格式的字符串

JSON.stringify(ob,filter,indent)包含三個參數，通常我們在使用的時候只帶第一個參數，來返回字符串。

ob:要轉化成JSON字符串的對象，數組，原始值。

filter：是一個可選的參數，通常是一個函數，用來在字符串化前對值做一些替換。也可以是一個數組，包含哪些需要字符串化的屬性名。就是用來過濾的。

// 第二個參數是數組過濾器
var oJson = { name: "hum", age: 20, sex: 1};
console.log(JSON.stringify(oJson, ["age", "sex"])); 
// {"age":20,"sex":1}

// 第二個參數是函數過濾器
// 如果該參數是函數，則它是一個替換函數，該函數會在每一個需要字符串化的對象上調用。
// 這個函數的第一個參數是該對象中的屬性名或數組的序號，第二個則是值本身。
// 函數的返回值會替換掉需要字符串化的值，如果函數返回undefined或沒有任何的返回值，則會在字符串化的時候忽略這個值。
var oJson = { name: "hum", age: 26, sex: 1, love: ["swing", "jump"]};
console.log(JSON.stringify(oJson, function(k, v){
    switch (k){
        case "age":
            return v > 20 ? "成年": "未成年";
        case "love":
            return v.join(",");
        case "sex":
            return undefined;
        default :
            return v;
    }
})); 
// {"name":"hum","age":"成年","love":"swing,jump"}

indent：也是一個可選參數，在需要輸出格式化的可閱讀的代碼時，使用indent參數來指定用來縮進的字符串或空格。如果省略該參數，返回的字符串將不帶任何的額外的空格，這樣輸出的值很難閱讀。就是用來格式化的。

JSON.parse

JSON.parse用來解析json格式的字符串（返回一個對象，數組或原始值）
JSON.parse(s,reviver)包含兩個參數

s：要解析的字符串

reviver：用來轉換解析值得可選函數

通常使用只使用第一個參數，可選參數reviver,主要是在返回解析值之前，對其進行過濾或后期處理。
reviver函數會在從s中解析的每個原始值調用一次。
調用reviver函數是帶有兩個參數，第一個屬性名（對象的屬性名或是轉換成字符串的數組序號），第二個參數是對象的屬性或是數組的元素值。
reviver函數會作為包含原始值的對象/數組的方法來調用。
reviver函數的返回值會成為屬性的新值，如果reviver返回第二個參數，則屬性不變。
如果reviver返回undefined或不凡會任何值，則會從對象或是數組中刪除屬性。

var oJson = { name: "hum", age: 26, sex: 1, love: ["swing", "jump"], birthday: "1988-01-12"};
var sJson = JSON.stringify(oJson);
console.log(sJson);
//{"name":"hum","age":26,"sex":1,"love":["swing","jump"],"birthday":"1988-01-12"}
console.log(JSON.parse(sJson));
console.log(JSON.parse(sJson, function (k, v) {
    if(k == "birthday"){ // 返回日期對象
        return new Date(v);
    }else if(k == "sex"){ // sex不在了
        return undefined;
    }else{
        return v;
    }
}));

JSON格式化工具

http://www.runoob.com/jsontool

JSONP

Jsonp(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

JSONP是怎么產生的？

1、眾所周知，Ajax直接請求普通文件存在跨域無權限訪問的問題（原因參見 同源策略-web腳本安全）

2、但是，HTML的