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