1. 程式人生 > >JavaScript進階——JSON、AJAX

JavaScript進階——JSON、AJAX

一、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);
}