首頁 > 軟體

JavaScript的非同步ajax詳解

2022-03-04 13:00:30

一級目錄

二級目錄

三級目錄

1.掌握HTTP協定和規則

2.掌握HTTP請求和響應的規則 重點

3.瞭解HTTP響應頭資訊

4.瞭解HTTP狀態碼

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

6.掌握JavaScript JSON的資料結構和使用方法 重點

7.掌握JavaScript XML資料結構和使用方法

8.掌握AJAX獲取JSON格式資料的方法

9.掌握JSON格式轉換的方法

HTTP協定

HTTP協定是Hyper Text Transfer Protocol（超文字傳輸協定）的縮寫,是用於從全球資訊網（WWW:World Wide Web ）伺服器傳輸超文字到本地瀏覽器的傳送協定。。

HTTP是一個基於TCP/IP通訊協定來傳遞資料（HTML 檔案, 圖片檔案, 查詢結果等）

請求訊息結構

HTTP是基於使用者端/伺服器端（C/S）的架構模型，通過一個可靠的連結來交換資訊，是一個無狀態的請求/響應協定。

使用者端傳送一個HTTP請求到伺服器的請求訊息包括以下格式：

  • 請求行（request line）
  • 請求頭部（header）
  • 空行
  • 請求資料

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

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請求指定的頁面資訊，並返回實體主體。資料被包含在URL引數中
POST向指定資源提交資料進行處理請求（例如提交表單或者上傳檔案）。資料被包含在請求體中。
HEAD類似於get請求，只不過返回的響應中沒有具體的內容，用於獲取報頭
PUT從使用者端向伺服器傳送的資料取代指定的檔案的內容。
DELETE請求伺服器刪除指定的頁面。
CONNECTHTTP/1.1協定中預留給能夠將連線改為管道方式的代理伺服器。
OPTIONS允許使用者端檢視伺服器的效能。
TRACE回顯伺服器收到的請求，主要用於測試或診斷。

響應頭資訊

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

響應欄位型別

應答頭說明
Allow伺服器支援的請求方法（如GET、POST等）。
Content-Encoding檔案的編碼（Encode）方法。只有在解碼之後才可以得到Content-Type頭指定的內容型別。
Content-Length內容長度。只有當瀏覽器使用持久HTTP連線時才需要這個資料。
Content-Type檔案MIME型別
Date當前的GMT時間。你可以用setDateHeader來設定這個頭以避免轉換時間格式的麻煩。
Expires應該在什麼時候認為檔案已經過期，從而不再快取它？
Last-Modified檔案的最後改動時間。
Location表示客戶應當到哪裡去提取檔案。
Refresh表示瀏覽器應該在多少時間之後重新整理檔案，以秒計。
Server伺服器名字。由Web伺服器自己設定。
Set-Cookie設定和頁面關聯的Cookie。
WWW-Authenticate客戶應該在Authorization頭中提供什麼型別的授權資訊？

響應狀態碼

分類分類描述
1資訊，伺服器收到請求，需要請求者繼續執行操作（收到信件，還沒看）
2成功，操作被成功接收並處理（收到，並且看過了）
3重定向，需要進一步的操作以完成請求（轉達資訊給第三者）
4使用者端錯誤，請求包含語法錯誤或無法完成請求（發不出去）
5伺服器錯誤，伺服器在處理請求的過程中發生了錯誤（對方出錯【程式碼錯誤】）

詳細狀態碼列表

狀態碼中文描述
200請求成功。一般用於GET與POST請求
201已建立。成功請求並建立了新的資源
202已接受。已經接受請求，但未處理完成
204無內容。伺服器成功處理，但未返回內容。在未更新網頁的情況下，可確保瀏覽器繼續顯示當前檔案
301永久移動。請求的資源已被永久的移動到新URI，返回資訊會包括新的URI，瀏覽器會自動定向到新URI。今後任何新的請求都應使用新的URI代替
302臨時移動。與301類似。但資源只是臨時被移動。使用者端應繼續使用原有URI
400使用者端請求的語法錯誤，伺服器無法理解
401請求要求使用者的身份認證
403伺服器理解請求使用者端的請求，但是拒絕執行此請求
404無法找到資源（網頁）。通過此程式碼，網站設計人員可設定"您所請求的資源無法找到"的個性頁面
408伺服器等待使用者端傳送的請求時間過長，超時
411伺服器無法處理使用者端傳送的不帶Content-Length的請求資訊
415伺服器無法處理請求附帶的媒體格式
500伺服器內部錯誤，無法完成請求

AJAX

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

  • AJAX 最大的優點是在不重新載入整個頁面的情況下，可以與伺服器交換資料並更新部分網頁內容。
  • AJAX 不需要任何瀏覽器外掛，但需要使用者允許JavaScript在瀏覽器上執行。

XMLHttpRequest物件

XMLHttpRequest 是AJAX 的基礎。XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新

XMLHttpRequest請求

如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：

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

方法說明

方法描述
open(method,url,async)method：請求的型別；GET 或 POSTurl：檔案在伺服器上的位置async：true（非同步）或 false（同步）
setRequestHeader(header,value)向請求新增 HTTP 頭。header: 規定頭的名稱value: 規定頭的值
send(string)將請求傳送到伺服器。string：僅用於 POST 請求

XMLHttpRequest響應

獲得來自伺服器的響應，使用 XMLHttpRequest 物件的responseText 或 responseXML 屬性。

屬性描述
responseText獲得字串形式的響應資料。
responseXML獲得 XML 形式的響應資料。

XMLHttpRequest響應狀態

readyState 屬性存有 XMLHttpRequest 的狀態資訊。

屬性描述
onreadystatechange儲存函數（或函數名），每當 readyState 屬性改變時，就會呼叫該函數。
readyState0: 請求（未初始化）還沒有呼叫send()方法 1: 請求連線已建立（載入）已呼叫send()方法，正在傳送請求 2: 請求已接收（載入完成）send()方法執行完成，剛剛接收到全部響應內容 3: 請求處理中（互動）正在解析響應內容 4: 請求已完成（完成）響應內容解析完成
status|statusText200: “OK” 400無法找到資源 404:未找到頁面 500：伺服器內部錯誤
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) {
                //規定請求的型別、URL 以及是否非同步處理請求
                request.open('GET', file, async);
                //將請求傳送到伺服器，引數僅僅用於POST
                request.send(null);
                //每當 readyState 屬性改變時，呼叫的函數
                request.onreadystatechange = function() {
                    /*
						 * readyState 可能的值
						 * 
						 * 0 － （未初始化）還沒有呼叫send()方法
						 * 1 － （載入）已呼叫send()方法，正在傳送請求
						 * 2 － （載入完成）send()方法執行完成，剛剛接收到全部響應內容
						 * 3 － （互動）正在解析響應內容
						 * 4 － （完成）響應內容解析完成
						 */
                    if(request.readyState == 4 && request.status == 200) {
                        /*
							 * 可能的響應型別
							 * responseText - 獲得字串形式的響應資料
							 * responseXML - 獲得 XML 形式的響應資料。
							 */
                        callback(JSON.parse(request.responseText));
                    }
                };
            }
        }
        load('weather.json', true, function(text) {
            document.body.innerText = '當前氣溫：' + text.data.wendu + '°';
        });
    </script>
</html>

weather.json

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

效果展示

XML

XML 指可延伸標示語言（eXtensible Markup Language）。XML 被設計用來傳輸和儲存資料。

XML 語法規則

  • XML 元素名和HTML不一樣，沒有固定的單詞，需要自定義。
  • XML 必須包含根元素，它是所有其他元素的父元素，根元素標籤名自定義。
  • XML 所有的元素都必須有一個關閉標籤
  • XML 標籤必須正確巢狀
  • XML 屬性值必須加引號
  • XML 標籤對大小寫敏感。標籤 <Letter> 與標籤 <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 語法規則

JSON 語法是 JavaScript 物件表示語法的子集。

  • 資料在名稱/值對中
  • 資料由逗號分隔
  • 大括號儲存物件
  • 中括號儲存陣列

JSON 值

JSON 值可以是：

  • 數位（整數或浮點數）
  • 字串（在雙引號中）
  • 邏輯值（true 或 false）
  • 陣列（在中括號中）
  • 物件（在大括號中）
  • 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 關鍵字來刪除 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字串轉JavaScript 物件

JSON.parse(text[, function])

引數說明：

  • text:必需，一個有效的 JSON 字串。
  • function(key,value): 可選，一個轉換結果的函數，將為物件的每個成員呼叫此函數。

案例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的情況的其他資料
		});
		document.write(obj.number);
		document.write(obj['string']);
	</script>
</html>

效果展示

JSONP

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

伺服器端JSONP格式資料

如客戶想存取 : http://www.baidu.com/try/ajax/jsonp.php?jsonp=callbackFunction。假設客戶期望返回JSON資料：["customername1","customername2"]。真正返回到使用者端的資料顯示為: callbackFunction(["customername1","customername2"])。

伺服器端檔案jsonp.php程式碼為：

header('Content-type: application/json');
//獲取回撥函數名
$jsoncallback = htmlspecialchars($_REQUEST ['jsoncallback']);
//json資料
$json_data = '["customername1","customername2"]';
//輸出jsonp格式的資料
echo $jsoncallback . "(" . $json_data . ")";

使用者端實現 callbackFunction 函數

<!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>

總結

本篇文章就到這裡了，希望能夠給你帶來幫助，也希望您能夠多多關注it145.com的更多內容! 


相關文章

  • 德漢姆中學就讀條件 德漢姆中學就讀條件

    <em>Mac</em>Book项目 2009年学校开始实施<em>Mac</em>Book项目,所有师生配备一本<em>Mac</em>Book,并同步更新了校园无线网络。学校每周进行电脑技术更新,每月发送技术支持资料,极大改变了教学及学习方式。因此2011

    2021-06-01 09:32:01

  • 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列 黑科技的輕簡出行，告別「電量焦慮症」：Anker氮化鎵超能充系列

    综合看Anker超能充系列的性价比很高，并且与不仅和iPhone12/苹果<em>Mac</em>Book很配，而且适合多设备充电需求的日常使用或差旅场景，不管是安卓还是Switch同样也能用得上它，希望这次分享能给准备购入充电器的小伙伴们有所

    2021-06-01 09:31:42

  • 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！ 吳亦凡廠牌首秀，L4WUDU居然忘詞了，Rapper和明星比還是有差距！

    除了L4WUDU与吴亦凡已经多次共事，成为了明面上的厂牌成员，吴亦凡还曾带领20XXCLUB全队参加2020年的一场音乐节，这也是20XXCLUB首次全员合照，王嗣尧Turbo、陈彦希Regi、<em>Mac</em> Ova Seas、林渝植等人全部出场。然而让

    2021-06-01 09:31:34

  • IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？ IPFS、Chia、Bzz和ICP挖礦該怎麼選？哪一個更有優勢？

    目前应用IPFS的机构：1 谷歌<em>浏览器</em>支持IPFS分布式协议 2 万维网 (历史档案博物馆)数据库 3 火狐<em>浏览器</em>支持 IPFS分布式协议 4 EOS 等数字货币数据存储 5 美国国会图书馆，历史资料永久保存在 IPFS 6 加

    2021-06-01 09:31:24

  • 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊 有哪些事是買了雪佛蘭後才知道的？美事偷著樂，開拓者車主隨聊

    开拓者的车机是兼容苹果和<em>安卓</em>，虽然我不怎么用，但确实兼顾了我家人的很多需求：副驾的门板还配有解锁开关，有的时候老婆开车，下车的时候偶尔会忘记解锁，我在副驾驶可以自己开门：第二排设计很好，不仅配置了一个很大的

    2021-06-01 09:30:48

  • iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？ iPhone12在618最新定價，跌價幅度超過1400元，還等iPhone13嗎？

    不仅是<em>安卓</em>手机，苹果手机的降价力度也是前所未有了，iPhone12也“跳水价”了，发布价是6799元，如今已经跌至5308元，降价幅度超过1400元，最新定价确认了。iPhone12是苹果首款5G手机，同时也是全球首款5nm芯片的智能机，它

    2021-06-01 09:30:45

IT145.com E-mail:sddin#qq.com