JavaScript的異步ajax詳解

更新時(shí)間：2022年03月04日 11:23:22 作者：抹淚的知更鳥(niǎo)

篇文章主要為大家詳細(xì)介紹了JavaScript?異步ajax，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下嗎，希望能夠給你帶來(lái)幫助

一級(jí)目錄

二級(jí)目錄

三級(jí)目錄

1.掌握HTTP協(xié)議和規(guī)則

2.掌握HTTP請(qǐng)求和響應(yīng)的規(guī)則 重點(diǎn)

3.了解HTTP響應(yīng)頭信息

4.了解HTTP狀態(tài)碼

5.掌握AJAX開(kāi)發(fā)中使用的全過(guò)程 重點(diǎn)

6.掌握J(rèn)avaScript JSON的數(shù)據(jù)結(jié)構(gòu)和使用方法 重點(diǎn)

7.掌握J(rèn)avaScript XML數(shù)據(jù)結(jié)構(gòu)和使用方法

8.掌握AJAX獲取JSON格式數(shù)據(jù)的方法

9.掌握J(rèn)SON格式轉(zhuǎn)換的方法

HTTP協(xié)議

HTTP協(xié)議是Hyper Text Transfer Protocol（超文本傳輸協(xié)議）的縮寫(xiě),是用于從萬(wàn)維網(wǎng)（WWW:World Wide Web ）服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議。。

HTTP是一個(gè)基于TCP/IP通信協(xié)議來(lái)傳遞數(shù)據(jù)（HTML 文件, 圖片文件, 查詢(xún)結(jié)果等）

請(qǐng)求消息結(jié)構(gòu)

HTTP是基于客戶(hù)端/服務(wù)端（C/S）的架構(gòu)模型，通過(guò)一個(gè)可靠的鏈接來(lái)交換信息，是一個(gè)無(wú)狀態(tài)的請(qǐng)求/響應(yīng)協(xié)議。

客戶(hù)端發(fā)送一個(gè)HTTP請(qǐng)求到服務(wù)器的請(qǐng)求消息包括以下格式：

請(qǐng)求行（request line）
請(qǐng)求頭部（header）
空行
請(qǐng)求數(shù)據(jù)

下面給出了請(qǐng)求報(bào)文的一般格式:

GET / HTTP/1.1 
Host: www.csdn.net 
Connection: keep-alive 
Cache-Control: max-age=0 
Upgrade-Insecure-Requests: 1 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8 
Referer: https://www.csdn.net/ 
Accept-Encoding: gzip, deflate, sdch, br 
Accept-Language: zh-CN,zh;q=0.8 
Cookie: uuid_tt_dd=-6852503192799459486_20161230; _ga=GA1.2.851452765.1483110024; UE="starzhangkiss@qq.com"; __guid=253029775.837108528115350700.1516453692677.6106

請(qǐng)求方法

方法	描述
GET	請(qǐng)求指定的頁(yè)面信息，并返回實(shí)體主體。數(shù)據(jù)被包含在URL參數(shù)中
POST	向指定資源提交數(shù)據(jù)進(jìn)行處理請(qǐng)求（例如提交表單或者上傳文件）。數(shù)據(jù)被包含在請(qǐng)求體中。
HEAD	類(lèi)似于get請(qǐng)求，只不過(guò)返回的響應(yīng)中沒(méi)有具體的內(nèi)容，用于獲取報(bào)頭
PUT	從客戶(hù)端向服務(wù)器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容。
DELETE	請(qǐng)求服務(wù)器刪除指定的頁(yè)面。
CONNECT	HTTP/1.1協(xié)議中預(yù)留給能夠?qū)⑦B接改為管道方式的代理服務(wù)器。
OPTIONS	允許客戶(hù)端查看服務(wù)器的性能。
TRACE	回顯服務(wù)器收到的請(qǐng)求，主要用于測(cè)試或診斷。

響應(yīng)頭信息

HTTP/1.1 200 OK

Server: Tengine

Content-Type: text/html

Content-Length: 15154

Connection: keep-alive

Date: Fri, 27 Apr 2018 02:49:12 GMT

X-Powered-By: HHVM/3.11.1

Content-Encoding: gzip

Vary: Accept-Encoding

Via: cache40.l2et2-2[0,200-0,H], cache3.l2et2-2[1,0], cache1.cn548[0,200-0,H], cache4.cn548[1,0] Age: 35292

X-Cache: HIT TCP_HIT dirn:7:245100152 mlen:-1

X-Swift-SaveTime: Fri, 27 Apr 2018 12:24:58 GMT

X-Swift-CacheTime: 86400 Timing-Allow-Origin: *

EagleId: dbee144415248326444025049e

響應(yīng)字段類(lèi)型

應(yīng)答頭	說(shuō)明
Allow	服務(wù)器支持的請(qǐng)求方法（如GET、POST等）。
Content-Encoding	文檔的編碼（Encode）方法。只有在解碼之后才可以得到Content-Type頭指定的內(nèi)容類(lèi)型。
Content-Length	內(nèi)容長(zhǎng)度。只有當(dāng)瀏覽器使用持久HTTP連接時(shí)才需要這個(gè)數(shù)據(jù)。
Content-Type	文檔MIME類(lèi)型
Date	當(dāng)前的GMT時(shí)間。你可以用setDateHeader來(lái)設(shè)置這個(gè)頭以避免轉(zhuǎn)換時(shí)間格式的麻煩。
Expires	應(yīng)該在什么時(shí)候認(rèn)為文檔已經(jīng)過(guò)期，從而不再緩存它？
Last-Modified	文檔的最后改動(dòng)時(shí)間。
Location	表示客戶(hù)應(yīng)當(dāng)?shù)侥睦锶ヌ崛∥臋n。
Refresh	表示瀏覽器應(yīng)該在多少時(shí)間之后刷新文檔，以秒計(jì)。
Server	服務(wù)器名字。由Web服務(wù)器自己設(shè)置。
Set-Cookie	設(shè)置和頁(yè)面關(guān)聯(lián)的Cookie。
WWW-Authenticate	客戶(hù)應(yīng)該在A(yíng)uthorization頭中提供什么類(lèi)型的授權(quán)信息？

響應(yīng)狀態(tài)碼

分類(lèi)	分類(lèi)描述
1	信息，服務(wù)器收到請(qǐng)求，需要請(qǐng)求者繼續(xù)執(zhí)行操作（收到信件，還沒(méi)看）
2	成功，操作被成功接收并處理（收到，并且看過(guò)了）
3	重定向，需要進(jìn)一步的操作以完成請(qǐng)求（轉(zhuǎn)達(dá)信息給第三者）
4	客戶(hù)端錯(cuò)誤，請(qǐng)求包含語(yǔ)法錯(cuò)誤或無(wú)法完成請(qǐng)求（發(fā)不出去）
5	服務(wù)器錯(cuò)誤，服務(wù)器在處理請(qǐng)求的過(guò)程中發(fā)生了錯(cuò)誤（對(duì)方出錯(cuò)【代碼錯(cuò)誤】）

詳細(xì)狀態(tài)碼列表

狀態(tài)碼	中文描述
200	請(qǐng)求成功。一般用于GET與POST請(qǐng)求
201	已創(chuàng)建。成功請(qǐng)求并創(chuàng)建了新的資源
202	已接受。已經(jīng)接受請(qǐng)求，但未處理完成
204	無(wú)內(nèi)容。服務(wù)器成功處理，但未返回內(nèi)容。在未更新網(wǎng)頁(yè)的情況下，可確保瀏覽器繼續(xù)顯示當(dāng)前文檔
301	永久移動(dòng)。請(qǐng)求的資源已被永久的移動(dòng)到新URI，返回信息會(huì)包括新的URI，瀏覽器會(huì)自動(dòng)定向到新URI。今后任何新的請(qǐng)求都應(yīng)使用新的URI代替
302	臨時(shí)移動(dòng)。與301類(lèi)似。但資源只是臨時(shí)被移動(dòng)?？蛻?hù)端應(yīng)繼續(xù)使用原有URI
400	客戶(hù)端請(qǐng)求的語(yǔ)法錯(cuò)誤，服務(wù)器無(wú)法理解
401	請(qǐng)求要求用戶(hù)的身份認(rèn)證
403	服務(wù)器理解請(qǐng)求客戶(hù)端的請(qǐng)求，但是拒絕執(zhí)行此請(qǐng)求
404	無(wú)法找到資源（網(wǎng)頁(yè)）。通過(guò)此代碼，網(wǎng)站設(shè)計(jì)人員可設(shè)置"您所請(qǐng)求的資源無(wú)法找到"的個(gè)性頁(yè)面
408	服務(wù)器等待客戶(hù)端發(fā)送的請(qǐng)求時(shí)間過(guò)長(zhǎng)，超時(shí)
411	服務(wù)器無(wú)法處理客戶(hù)端發(fā)送的不帶Content-Length的請(qǐng)求信息
415	服務(wù)器無(wú)法處理請(qǐng)求附帶的媒體格式
500	服務(wù)器內(nèi)部錯(cuò)誤，無(wú)法完成請(qǐng)求

AJAX

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript【JSON】和 XML）。

AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下，可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。
AJAX 不需要任何瀏覽器插件，但需要用戶(hù)允許JavaScript在瀏覽器上執(zhí)行。

XMLHttpRequest對(duì)象

XMLHttpRequest 是AJAX 的基礎(chǔ)。XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。這意味著可以在不重新加載整個(gè)網(wǎng)頁(yè)的情況下，對(duì)網(wǎng)頁(yè)的某部分進(jìn)行更新

XMLHttpRequest請(qǐng)求

如需將請(qǐng)求發(fā)送到服務(wù)器，我們使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法：

xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

方法說(shuō)明

方法	描述
open(method,url,async)	method：請(qǐng)求的類(lèi)型；GET 或 POSTurl：文件在服務(wù)器上的位置async：true（異步）或 false（同步）
setRequestHeader(header,value)	向請(qǐng)求添加 HTTP 頭。header: 規(guī)定頭的名稱(chēng)value: 規(guī)定頭的值
send(string)	將請(qǐng)求發(fā)送到服務(wù)器。string：僅用于 POST 請(qǐng)求

XMLHttpRequest響應(yīng)

獲得來(lái)自服務(wù)器的響應(yīng)，使用 XMLHttpRequest 對(duì)象的responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML	獲得 XML 形式的響應(yīng)數(shù)據(jù)。

XMLHttpRequest響應(yīng)狀態(tài)

readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

屬性	描述
onreadystatechange	存儲(chǔ)函數(shù)（或函數(shù)名），每當(dāng) readyState 屬性改變時(shí)，就會(huì)調(diào)用該函數(shù)。
readyState	0: 請(qǐng)求（未初始化）還沒(méi)有調(diào)用send()方法 1: 請(qǐng)求連接已建立（載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求 2: 請(qǐng)求已接收（載入完成）send()方法執(zhí)行完成，剛剛接收到全部響應(yīng)內(nèi)容 3: 請(qǐng)求處理中（交互）正在解析響應(yīng)內(nèi)容 4: 請(qǐng)求已完成（完成）響應(yīng)內(nèi)容解析完成
status\|statusText	200: “OK” 400無(wú)法找到資源 404:未找到頁(yè)面 500：服務(wù)器內(nèi)部錯(cuò)誤

xmlhttp.onreadystatechange=function() {
	if (xmlhttp.readyState==4 && xmlhttp.status==200){
		getResponseHeader("headerLabel");
		document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
	}
}

案例01

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
    <script type="text/javascript">
        function load(file, async, callback) {
            var request = null;
            if(window.XMLHttpRequest) {
                request = new XMLHttpRequest();
            } else if(window.ActiveXObject) {
                request = new window.ActiveXObject();
            } else {
                request("您的瀏覽器版本過(guò)低");
            }
            if(request != null) {
                //規(guī)定請(qǐng)求的類(lèi)型、URL 以及是否異步處理請(qǐng)求
                request.open('GET', file, async);
                //將請(qǐng)求發(fā)送到服務(wù)器，參數(shù)僅僅用于POST
                request.send(null);
                //每當(dāng) readyState 屬性改變時(shí)，調(diào)用的函數(shù)
                request.onreadystatechange = function() {
                    /*
						 * readyState 可能的值
						 * 
						 * 0 － （未初始化）還沒(méi)有調(diào)用send()方法
						 * 1 － （載入）已調(diào)用send()方法，正在發(fā)送請(qǐng)求
						 * 2 － （載入完成）send()方法執(zhí)行完成，剛剛接收到全部響應(yīng)內(nèi)容
						 * 3 － （交互）正在解析響應(yīng)內(nèi)容
						 * 4 － （完成）響應(yīng)內(nèi)容解析完成
						 */
                    if(request.readyState == 4 && request.status == 200) {
                        /*
							 * 可能的響應(yīng)類(lèi)型
							 * responseText - 獲得字符串形式的響應(yīng)數(shù)據(jù)
							 * responseXML - 獲得 XML 形式的響應(yīng)數(shù)據(jù)。
							 */
                        callback(JSON.parse(request.responseText));
                    }
                };
            }
        }
        load('weather.json', true, function(text) {
            document.body.innerText = '當(dāng)前氣溫：' + text.data.wendu + '°';
        });
    </script>
</html>

weather.json

{
    "status": 200,
    "data": {
        "wendu": "29",
        "ganmao": "各項(xiàng)氣象條件適宜，發(fā)生感冒機(jī)率較低。但請(qǐng)避免長(zhǎng)期處于空調(diào)房間中，以防感冒。",
        "forecast": [
            {
                "fengxiang": "南風(fēng)",
                "fengli": "3-4級(jí)",
                "high": "高溫 32℃",
                "type": "多云",
                "low": "低溫 17℃",
                "date": "16日星期二"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "微風(fēng)級(jí)",
                "high": "高溫 34℃",
                "type": "晴",
                "low": "低溫 19℃",
                "date": "17日星期三"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "微風(fēng)級(jí)",
                "high": "高溫 35℃",
                "type": "晴",
                "low": "低溫 22℃",
                "date": "18日星期四"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "微風(fēng)級(jí)",
                "high": "高溫 35℃",
                "type": "多云",
                "low": "低溫 22℃",
                "date": "19日星期五"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "3-4級(jí)",
                "high": "高溫 34℃",
                "type": "晴",
                "low": "低溫 21℃",
                "date": "20日星期六"
            }
        ],
        "yesterday": {
            "fl": "微風(fēng)",
            "fx": "南風(fēng)",
            "high": "高溫 28℃",
            "type": "晴",
            "low": "低溫 15℃",
            "date": "15日星期一"
        },
        "aqi": "72",
        "city": "北京"
    },
    "message": "OK"
}

效果展示

在這里插入圖片描述

XML

XML 指可擴(kuò)展標(biāo)記語(yǔ)言（eXtensible Markup Language）。XML 被設(shè)計(jì)用來(lái)傳輸和存儲(chǔ)數(shù)據(jù)。

XML 語(yǔ)法規(guī)則

XML 元素名和HTML不一樣，沒(méi)有固定的單詞，需要自定義。
XML 必須包含根元素，它是所有其他元素的父元素，根元素標(biāo)簽名自定義。
XML 所有的元素都必須有一個(gè)關(guān)閉標(biāo)簽
XML 標(biāo)簽必須正確嵌套
XML 屬性值必須加引號(hào)
XML 標(biāo)簽對(duì)大小寫(xiě)敏感。標(biāo)簽 <Letter> 與標(biāo)簽 <letter> 是不同的

XML 聲明文件的可選部分，如果存在需要放在文檔的第一行，如下所示：

<?xml version="1.0" encoding="utf-8"?>

如：

<?xml version="1.0" encoding="utf-8"?>
<bookstore>
    <book category="CHILDREN">
        <title>Harry Potter</title>
        <author>J K. Rowling</author>
        <year>2005</year>
        <price>29.99</price>
    </book>
    <book category="WEB">
        <title>Learning XML</title>
        <author>Erik T. Ray</author>
        <year>2003</year>
        <price>39.95</price>
    </book>
</bookstore>

XML 解析

下面的代碼片段把 XML 字符串解析到 XML DOM 對(duì)象中

案例02

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		txt = '<bookstore>'+
				    '<book category="CHILDREN">'+
				        '<title>Harry Potter</title>'+
				        '<author>J K. Rowling</author>'+
				        '<year>2005</year>'+
				        '<price>29.99</price>'+
				    '</book>'+
				    '<book category="WEB">'+
				        '<title>Learning XML</title>'+
				        '<author>Erik T. Ray</author>'+
				        '<year>2003</year>'+
				        '<price>39.95</price>'+
				    '</book>'+
				'</bookstore>';
				
		if(window.DOMParser) {
			parser = new DOMParser();
			xmlDoc = parser.parseFromString(txt, "text/xml");
		} else {// Internet Explorer
			xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
			xmlDoc.async = false;
			xmlDoc.loadXML(txt);
		}
		// xmlDoc 等價(jià)于 document
		xmlDoc.querySelectorAll('book').forEach(function(e,i){
			document.write(e.innerHTML);
			console.log(e.children)
		})
	</script>
</html>

效果展示

在這里插入圖片描述

JSON

JSON: JavaScript Object Notation(JavaScript 對(duì)象表示法)。JSON 是存儲(chǔ)和交換文本信息(傳輸)的語(yǔ)法。類(lèi)似 XML。JSON 比 XML 更小、更快，更易解析。

JSON 語(yǔ)法規(guī)則

JSON 語(yǔ)法是 JavaScript 對(duì)象表示語(yǔ)法的子集。

數(shù)據(jù)在名稱(chēng)/值對(duì)中
數(shù)據(jù)由逗號(hào)分隔
大括號(hào)保存對(duì)象
中括號(hào)保存數(shù)組

JSON 值

JSON 值可以是：

數(shù)字（整數(shù)或浮點(diǎn)數(shù)）
字符串（在雙引號(hào)中）
邏輯值（true 或 false）
數(shù)組（在中括號(hào)中）
對(duì)象（在大括號(hào)中）
Null

如：

var json = {
    'array':[1,'你好',true],
    'number':123,
    'string':'hello',
    'boolean':true,
    'object':{
        'name':'張三',
        'pswd':123456
    }
}

JSON 文件

JSON 文件的文件類(lèi)型是 “.json”
JSON 文本的 MIME 類(lèi)型是 “application/json”

JSON 對(duì)象

可以使用點(diǎn)號(hào)（.）來(lái)訪(fǎng)問(wèn)對(duì)象的值，也可以使用中括號(hào)（[]）來(lái)訪(fǎng)問(wèn)對(duì)象的值

案例03：獲取

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json = {
			'array':[1,'你好',true],
			'number':123,
			'string':'hello',
			'boolean':true,
			'object':{
				'name':'張三',
				'pswd':123456
			}
		}
		document.write(json.string);
		document.write(json['number']);
	</script>
</html>

效果展示

在這里插入圖片描述

案例04：刪除對(duì)象屬性

可以使用 delete 關(guān)鍵字來(lái)刪除 JSON 對(duì)象的屬性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json = {
			'array': [1, '你好', true],
			'number': 123,
			'string': 'hello',
			'boolean': true,
			'object': {
				'name': '張三',
				'pswd': 123456
			}
		}
		delete json.array;
		delete json['object'];
		for(i in json) {
			document.write(json[i]);
		}
	</script>
</html>

效果展示

在這里插入圖片描述

JSON文件讀取

var request = null;
if(window.XMLHttpRequest) {
	request = new XMLHttpRequest();
} else if(window.ActiveXObject) {
	request = new window.ActiveXObject();
} else {
	request("您的瀏覽器版本過(guò)低");
}
if(request != null) {
	request.open(method, file, true);
	request.send(null);
	request.onreadystatechange = function() {
		if(request.readyState == 4 && request.status == 200) {
			//console.log(request.responseText)
			callback(JSON.parse(request.responseText));
		}
	};
}

JSON解析

JSON.parse()：JSON字符串轉(zhuǎn)JavaScript 對(duì)象

JSON.parse(text[, function])

參數(shù)說(shuō)明：

text:必需，一個(gè)有效的 JSON 字符串。
function(key,value): 可選，一個(gè)轉(zhuǎn)換結(jié)果的函數(shù)，將為對(duì)象的每個(gè)成員調(diào)用此函數(shù)。

案例05

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var json = '{"number":123,"string":"hello","boolean":true}';
		var obj = JSON.parse(json,function(key,value){
			if (key == "number") {
				return 789;
			}
			return value;//這句不能少，處理不滿(mǎn)足if的情況的其他數(shù)據(jù)
		});
		document.write(obj.number);
		document.write(obj['string']);
	</script>
</html>

效果展示

在這里插入圖片描述

JSONP

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

服務(wù)端JSONP格式數(shù)據(jù)

如客戶(hù)想訪(fǎng)問(wèn) : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。假設(shè)客戶(hù)期望返回JSON數(shù)據(jù)：["customername1","customername2"]。真正返回到客戶(hù)端的數(shù)據(jù)顯示為: callbackFunction(["customername1","customername2"])。

服務(wù)端文件jsonp.php代碼為：

header('Content-type: application/json');
//獲取回調(diào)函數(shù)名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json數(shù)據(jù)
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的數(shù)據(jù)
echo $jsoncallback . "(" . $json_data . ")";

客戶(hù)端實(shí)現(xiàn) callbackFunction 函數(shù)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSONP 實(shí)例</title>
	</head>
	<body>
		<div id="divCustomers"></div>
		<script type="text/javascript">
			function callbackFunction(result, methodName) {
				var html = '<ul>';
				for(var i = 0; i < result.length; i++) {
					html += '<li>' + result[i] + '</li>';
				}
				html += '</ul>';
				document.getElementById('divCustomers').innerHTML = html;
			}
		</script>
		<script type="text/javascript" src="http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction"></script>
	</body>
</html>

jQuery 使用 JSONP

以上代碼可以使用 jQuery 代碼實(shí)例：

<html>
	<head>
		<meta charset="utf-8">
		<title>JSONP 實(shí)例</title>
		<script src="http://cdn.static.runoob.com/libs/jquery/1.8.3/jquery.js"></script>
	</head>
	<body>
		<div id="divCustomers"></div>
	</body>
    <script>
        $.getJSON("http://www.runoob.com/try/ajax/jsonp.php?jsoncallback=?", function(data) {
            var html = '<ul>';
            for(var i = 0; i < data.length; i++) {
                html += '<li>' + data[i] + '</li>';
            }
            html += '</ul>';
            $('#divCustomers').html(html);
        });
    </script>
</html>