欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript的異步ajax詳解

 更新時間：2022年03月04日 11:23:22   作者：抹淚的知更鳥  
篇文章主要為大家詳細介紹了JavaScript?異步ajax，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下嗎，希望能夠給你帶來幫助

一級目錄

二級目錄

三級目錄

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

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

3.了解HTTP響應頭信息

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

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

6.掌握JavaScript JSON的數(shù)據(jù)結構和使用方法 重點

7.掌握JavaScript XML數(shù)據(jù)結構和使用方法

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

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

HTTP協(xié)議

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

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

請求消息結構

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

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

  • 請求行（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請求，只不過返回的響應中沒有具體的內(nèi)容，用于獲取報頭
PUT從客戶端向服務器傳送的數(shù)據(jù)取代指定的文檔的內(nèi)容。
DELETE請求服務器刪除指定的頁面。
CONNECTHTTP/1.1協(xié)議中預留給能夠將連接改為管道方式的代理服務器。
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頭指定的內(nèi)容類型。
Content-Length內(nèi)容長度。只有當瀏覽器使用持久HTTP連接時才需要這個數(shù)據(jù)。
Content-Type文檔MIME類型
Date當前的GMT時間。你可以用setDateHeader來設置這個頭以避免轉換時間格式的麻煩。
Expires應該在什么時候認為文檔已經(jīng)過期，從而不再緩存它？
Last-Modified文檔的最后改動時間。
Location表示客戶應當?shù)侥睦锶ヌ崛∥臋n。
Refresh表示瀏覽器應該在多少時間之后刷新文檔，以秒計。
Server服務器名字。由Web服務器自己設置。
Set-Cookie設置和頁面關聯(lián)的Cookie。
WWW-Authenticate客戶應該在Authorization頭中提供什么類型的授權信息？

響應狀態(tài)碼

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

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

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

AJAX

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

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

XMLHttpRequest對象

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

XMLHttpRequest請求

如需將請求發(fā)送到服務器，我們使用 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: 規(guī)定頭的名稱value: 規(guī)定頭的值
send(string)將請求發(fā)送到服務器。string：僅用于 POST 請求

XMLHttpRequest響應

獲得來自服務器的響應，使用 XMLHttpRequest 對象的responseText 或 responseXML 屬性。

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

XMLHttpRequest響應狀態(tài)

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

屬性描述
onreadystatechange存儲函數(shù)（或函數(shù)名），每當 readyState 屬性改變時，就會調(diào)用該函數(shù)。
readyState0: 請求（未初始化）還沒有調(diào)用send()方法 1: 請求連接已建立（載入）已調(diào)用send()方法，正在發(fā)送請求 2: 請求已接收（載入完成）send()方法執(zhí)行完成，剛剛接收到全部響應內(nèi)容 3: 請求處理中（交互）正在解析響應內(nèi)容 4: 請求已完成（完成）響應內(nèi)容解析完成
status|statusText200: “OK” 400無法找到資源 404:未找到頁面 500：服務器內(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ā)送到服務器，參數(shù)僅僅用于POST
                request.send(null);
                //每當 readyState 屬性改變時，調(diào)用的函數(shù)
                request.onreadystatechange = function() {
                    /*
						 * readyState 可能的值
						 * 
						 * 0 － （未初始化）還沒有調(diào)用send()方法
						 * 1 － （載入）已調(diào)用send()方法，正在發(fā)送請求
						 * 2 － （載入完成）send()方法執(zhí)行完成，剛剛接收到全部響應內(nèi)容
						 * 3 － （交互）正在解析響應內(nèi)容
						 * 4 － （完成）響應內(nèi)容解析完成
						 */
                    if(request.readyState == 4 && request.status == 200) {
                        /*
							 * 可能的響應類型
							 * responseText - 獲得字符串形式的響應數(shù)據(jù)
							 * responseXML - 獲得 XML 形式的響應數(shù)據(jù)。
							 */
                        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": "各項氣象條件適宜，發(fā)生感冒機率較低。但請避免長期處于空調(diào)房間中，以防感冒。",
        "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 被設計用來傳輸和存儲數(shù)據(jù)。

XML 語法規(guī)則

  • 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 語法規(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 關鍵字來刪除 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])

參數(shù)說明：

  • text:必需，一個有效的 JSON 字符串。
  • function(key,value): 可選，一個轉換結果的函數(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ù)。

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

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

服務端文件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>

總結

本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內(nèi)容! 

相關文章

  • JavaScript 仿關機效果的圖片層

    JavaScript 仿關機效果的圖片層

    最近發(fā)現(xiàn)了一用 YUI 做的 Lightbox, 只需少量的設置就能類Window關機的效果來顯示圖片。
    2008-12-12
  • 網(wǎng)頁加載速度優(yōu)化技巧的方案詳解

    網(wǎng)頁加載速度優(yōu)化技巧的方案詳解

    這篇文章主要為大家介紹了網(wǎng)頁加載速度優(yōu)化技巧的方案詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪<BR>
    2023-05-05
  • js 表格排序(編輯+拖拽+縮放)

    js 表格排序(編輯+拖拽+縮放)

    js 表格排序(編輯+拖拽+縮放)實現(xiàn)代碼，需要的朋友可以參考下。
    2010-05-05
  • Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap

    Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap

    Bootstrap開發(fā)實戰(zhàn)之第一次接觸Bootstrap,想要學好一門語言，首先應該進行深入了解，感興趣的小伙伴們可以參考一下
    2016-06-06
  • js實現(xiàn)宇宙星空背景效果的方法

    js實現(xiàn)宇宙星空背景效果的方法

    這篇文章主要介紹了js實現(xiàn)宇宙星空背景效果的方法,實例分析了javascript中動畫效果的實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-03-03
  • javaScript實現(xiàn)復選框全選反選事件詳解

    javaScript實現(xiàn)復選框全選反選事件詳解

    這篇文章主要為大家詳細介紹了javaScript實現(xiàn)復選框全選反選事件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-09-09
  • 基于javascript實現(xiàn)放大鏡特效

    基于javascript實現(xiàn)放大鏡特效

    這篇文章主要為大家詳細介紹了基于javascript實現(xiàn)放大鏡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-12-12
  • js字符串倒序的實例代碼

    js字符串倒序的實例代碼

    這篇文章主要介紹了js字符串倒序的實例代碼,代碼分為3部分，給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
    2018-11-11
  • Bootstrap被封裝的彈層

    Bootstrap被封裝的彈層

    這篇文章主要介紹了Bootstrap被封裝的彈層 的相關資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下
    2016-07-07
  • JS回調(diào)函數(shù)簡單易懂的入門實例分析

    JS回調(diào)函數(shù)簡單易懂的入門實例分析

    這篇文章主要介紹了JS回調(diào)函數(shù),結合簡單實例形式分析了javascript回調(diào)函數(shù)的概念、原理、相關操作技巧與使用注意事項,需要的朋友可以參考下
    2019-09-09

最新評論