一、JSON

1. json字串必須使用雙引號

2. json物件要求給key值加雙引號，而JavaScript物件字面量不需要

3. 解析：json物件轉換為JavaScript物件

    序列化：JavaScript物件轉換為json物件

二、AJAX

1. 什麼是ajax

 Ajax是Asynchronous  JavaScript Xml的簡稱，通過Ajax可以請求額外的資料而無需重新整理頁面，給使用者帶來更好的體驗。

2. XMLHttpRequest（XHR）

（1）Ajax技術的核心是XMLHttpRequest物件（簡稱XHR），使用如下方式建立XMLHttpRequest物件

// 不考慮IE6及以下版本的瀏覽器
var xhr = new XMLHTTPRequest();

（2）XHR的用法：在使用XHR物件時，要呼叫的第一個方法是open()，它接受三個引數：

①要傳送的請求型別：GET/POST

②要請求的URL

③是否非同步傳送請求，true為非同步，false為同步(如果請求是同步的，在伺服器返回資料之前，網頁無法響應使用者的操作)

xhr.open("get", "http://www.xxx.com/xxx", false);

注意：open()方法不會發送請求，只是準備請求，send()方法會真正的傳送請求

（3）XHR有兩個非常重要的屬性

①responseText：從伺服器返回的文字

②status：從伺服器返回的狀態碼

注意：狀態碼為304說明請求的資料沒有被修改，此時直接使用了快取的版本，也視為成功

// 不考慮IE6及以下版本的瀏覽器
var xhr = new XMLHTTPRequest();

xhr.open("get", "http://www.xxx.com/xxx", false);
xhr.send(null);

if(xhr.status == 200 || xhr.status == 304) {
    alert(xhr.responseText);
} else {
    alert(xhr.status);
}

 （4）大多數情況下，使用非同步請求。非同步使用需要檢測XHR物件的readyState屬性，readyState屬性有0、1、2、3、4五個值。4表示已經從伺服器接收到所有資料了。

每次readyState改變，都會觸發一次readyStateChange事件，所以可以在readyStateChange事件中檢測readyState的值。

// 由於某些瀏覽器相容問題，需要在呼叫open方法之前定義xhr.onreadystatechange事件

var xhr = new XMLHTTPRequest();

xhr.onreadystatechange = function() {
    if(xhr.readyState == 4) {
        if(xhr.status == 200 || xhr.status == 304) {
            alert(xhr.responseText);
        } else {
            alert(xhr.status);
        }
    }
}

xhr.open("get", "http://www.xxx.com/xxx", true);
xhr.send(null);

3. GET和POST

（1） get方法

在定義xhr.open時將引數及值拼接在url尾部

（2）post方法

在定義xhr.send時將引數及值傳遞給服務端，但是對post請求需要做一些特殊的處理，伺服器才能正確的接受請求。如：

xhr.open(...);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("key=value");

4. 跨域——JSONP

（1）關於跨域

XHR實現Ajax有一個限制→跨域安全。預設情況下，XHR物件只能訪問與包含它的頁面在同一個域中的資源。

（2）什麼是jsonp

jsonp，即json with padding，是一種解決跨域問題的方法。

（3）jsonp是通過動態新增script標籤來實現的，<script>標籤可以不受任何限制，從其他域載入資源。

因為jsonp是有效的JavaScript程式碼，所以在請求完後，就會立即執行。

function renderResult(args) {
    if (typeof args == "object") {
        alert(args);
    }
}

function addScript() {
    var script = document.createElement("script");
    script.src = "http://www.xxx.com?key1=value1&key2=value2&callback=renderResult";
    document.body.insertBefore(script, document.body.firstChild);
}