JavaScript的異步ajax詳解

更新時間：2022年03月04日 11:23:22 作者：抹淚的知更鳥

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

一級目錄

二級目錄

三級目錄

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

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

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

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

5.掌握AJAX開發(fā)中使用的全過程 重點

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

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é)議）的縮寫,是用于從萬維網(wǎng)（WWW:World Wide Web ）服務(wù)器傳輸超文本到本地瀏覽器的傳送協(xié)議。。

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

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

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

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

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

下面給出了請求報文的一般格式:

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

請求方法

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

響應(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)字段類型

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

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

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

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

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

AJAX

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

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

XMLHttpRequest對象

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

XMLHttpRequest請求

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

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

方法說明

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

XMLHttpRequest響應(yīng)

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

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

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

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

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

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("您的瀏覽器版本過低");
            }
            if(request != null) {
                //規(guī)定請求的類型、URL 以及是否異步處理請求
                request.open('GET', file, async);
                //將請求發(fā)送到服務(wù)器，參數(shù)僅僅用于POST
                request.send(null);
                //每當(dāng) readyState 屬性改變時，調(diào)用的函數(shù)
                request.onreadystatechange = function() {
                    /*
						 * readyState 可能的值
						 * 
						 * 0 － （未初始化）還沒有調(diào)用send()方法
						 * 1 － （載入）已調(diào)用send()方法，正在發(fā)送請求
						 * 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)類型
							 * 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": "各項氣象條件適宜，發(fā)生感冒機率較低。但請避免長期處于空調(diào)房間中，以防感冒。",
        "forecast": [
            {
                "fengxiang": "南風(fēng)",
                "fengli": "3-4級",
                "high": "高溫 32℃",
                "type": "多云",
                "low": "低溫 17℃",
                "date": "16日星期二"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "微風(fēng)級",
                "high": "高溫 34℃",
                "type": "晴",
                "low": "低溫 19℃",
                "date": "17日星期三"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "微風(fēng)級",
                "high": "高溫 35℃",
                "type": "晴",
                "low": "低溫 22℃",
                "date": "18日星期四"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "微風(fēng)級",
                "high": "高溫 35℃",
                "type": "多云",
                "low": "低溫 22℃",
                "date": "19日星期五"
            },
            {
                "fengxiang": "南風(fēng)",
                "fengli": "3-4級",
                "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 指可擴展標(biāo)記語言（eXtensible Markup Language）。XML 被設(shè)計用來傳輸和存儲數(shù)據(jù)。

XML 語法規(guī)則

XML 元素名和HTML不一樣，沒有固定的單詞，需要自定義。
XML 必須包含根元素，它是所有其他元素的父元素，根元素標(biāo)簽名自定義。
XML 所有的元素都必須有一個關(guān)閉標(biāo)簽
XML 標(biāo)簽必須正確嵌套
XML 屬性值必須加引號
XML 標(biāo)簽對大小寫敏感。標(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 對象中

案例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 等價于 document
		xmlDoc.querySelectorAll('book').forEach(function(e,i){
			document.write(e.innerHTML);
			console.log(e.children)
		})
	</script>
</html>

效果展示

在這里插入圖片描述

JSON

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

JSON 語法規(guī)則

JSON 語法是 JavaScript 對象表示語法的子集。

數(shù)據(jù)在名稱/值對中
數(shù)據(jù)由逗號分隔
大括號保存對象
中括號保存數(shù)組

JSON 值

JSON 值可以是：

數(shù)字（整數(shù)或浮點數(shù)）
字符串（在雙引號中）
邏輯值（true 或 false）
數(shù)組（在中括號中）
對象（在大括號中）
Null

如：

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

JSON 文件

JSON 文件的文件類型是 “.json”
JSON 文本的 MIME 類型是 “application/json”

JSON 對象

可以使用點號（.）來訪問對象的值，也可以使用中括號（[]）來訪問對象的值

案例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：刪除對象屬性

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

<!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("您的瀏覽器版本過低");
}
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 對象

JSON.parse(text[, function])

參數(shù)說明：

text:必需，一個有效的 JSON 字符串。
function(key,value): 可選，一個轉(zhuǎn)換結(jié)果的函數(shù)，將為對象的每個成員調(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;//這句不能少，處理不滿足if的情況的其他數(shù)據(jù)
		});
		document.write(obj.number);
		document.write(obj['string']);
	</script>
</html>

效果展示

在這里插入圖片描述

JSONP

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

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

如客戶想訪問 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。假設(shè)客戶期望返回JSON數(shù)據(jù)：["customername1","customername2"]。真正返回到客戶端的數(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 . ")";

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JSONP 實例</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 代碼實例：

<html>
	<head>
		<meta charset="utf-8">
		<title>JSONP 實例</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>