快捷導(dǎo)航

Ajax使用異步對(duì)象發(fā)送請(qǐng)求方案詳解

更新時(shí)間：2024年04月22日 10:59:20 作者：青燈文案1

Ajax的原理是通過XmlHttpRequest對(duì)象來向服務(wù)器發(fā)異步請(qǐng)求,從服務(wù)器獲得數(shù)據(jù),然后用JavaScript來操作DOM而更新頁面,這篇文章主要介紹了Ajax使用異步對(duì)象發(fā)送請(qǐng)求簡介,需要的朋友可以參考下

一、什么是Ajax

Ajax，全稱Asynchronous JavaScript and XML（異步JavaScript和XML），是一種用于創(chuàng)建更好、更快以及交互性更強(qiáng)的Web應(yīng)用程序的技術(shù)。它不是一種新的編程語言，而是由多種技術(shù)組合而成的，包括HTML或XHTML、CSS、JavaScript、DOM、XML、XSLT，以及最重要的XMLHttpRequest。

Ajax的原理是通過XmlHttpRequest對(duì)象來向服務(wù)器發(fā)異步請(qǐng)求，從服務(wù)器獲得數(shù)據(jù)，然后用JavaScript來操作DOM而更新頁面。

使用Ajax技術(shù)的網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個(gè)頁面，從而節(jié)省網(wǎng)絡(luò)帶寬，提高網(wǎng)頁加載速度，縮短用戶等待時(shí)間，改善用戶體驗(yàn)。

Ajax通過異步通信的方式，實(shí)現(xiàn)了在不刷新整個(gè)頁面的情況下，對(duì)頁面的局部進(jìn)行更新，極大地提升了Web應(yīng)用的交互性和性能。

二、全局刷新和局部刷新

全局刷新：整個(gè)瀏覽器被新的數(shù)據(jù)覆蓋。在網(wǎng)絡(luò)中傳輸大量的數(shù)據(jù)，瀏覽器需要加載，渲染頁面。
局部刷新：在瀏覽器器的內(nèi)部，發(fā)起請(qǐng)求，獲取數(shù)據(jù)，改變頁面中的部分內(nèi)容，其余的頁面無需加載和渲染。

網(wǎng)絡(luò)中數(shù)據(jù)傳輸量越少，給用戶的感受越好。

Ajax是用來做局部刷新的：局部刷新使用的核心對(duì)象：異步對(duì)象（XMLHttpRequest）。這個(gè)異步對(duì)象是存在瀏覽器內(nèi)存中的，使用JavaScript語法創(chuàng)建和使用XMLHttpRequest對(duì)象。

Ajax包含的技術(shù)主要有：JavaScript、dom、css、xml等。
核心是：JavaScript 和 xml【被json代替】。
JavaScript：負(fù)責(zé)創(chuàng)建異步對(duì)象，發(fā)送請(qǐng)求，更新頁面的dom對(duì)象。
Ajax是一種做局部刷新的新方法（2003），不是一種語言；

XML：網(wǎng)絡(luò)中的傳輸?shù)臄?shù)據(jù)格式，使用json替換了XML。

<數(shù)據(jù)>
	<數(shù)據(jù)1>寶馬1</數(shù)據(jù)1>
	<數(shù)據(jù)2>寶馬2</數(shù)據(jù)2>
	<數(shù)據(jù)3>寶馬3</數(shù)據(jù)3>
	<數(shù)據(jù)4>寶馬4</數(shù)據(jù)4>
</數(shù)據(jù)>

三、Ajax中使用XMLHttpRequest對(duì)象（Ajax核心步驟）

1、創(chuàng)建異步對(duì)象

var xmlHttp = new XMLHttpRequest();

2、給異步對(duì)象綁定事件

onreadystatechange ：當(dāng)異步對(duì)象發(fā)起請(qǐng)求，獲取了數(shù)據(jù)都會(huì)觸發(fā)這個(gè)事件。這個(gè)事件需要指定一個(gè)函數(shù)，在函數(shù)中處理狀態(tài)的變化。

btn.onclick = fun1()
function fun1(){
    alert("按鈕單擊")；
}

例如：

xmlHttp.onreadystatechange= function(){
    處理請(qǐng)求的狀態(tài)變化。
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
        // 可以處理服務(wù)器端的數(shù)據(jù)，更新當(dāng)前頁面
        var data = xmlHttp.responseText;
        document.getElementById("name").value = data;
    }
}

3、異步對(duì)象的屬性 readyState 表示異步對(duì)象請(qǐng)求的狀態(tài)變化

0：創(chuàng)建異步對(duì)象時(shí)， new XMLHttpRequest();
1：初始異步請(qǐng)求對(duì)象，xmlHttp.open(請(qǐng)求方式，請(qǐng)求地址，true);
2：發(fā)送請(qǐng)求，xmlHttp.send();
3：從服務(wù)器端獲取了數(shù)據(jù)，此時(shí)3是異步對(duì)象內(nèi)部使用，獲取了原始的數(shù)據(jù)。
4：異步對(duì)象把接收的數(shù)據(jù)處理完成后。此時(shí)開發(fā)人員在4的時(shí)候處理數(shù)據(jù)。

4：異步對(duì)象把接收的數(shù)據(jù)處理完成后。

此時(shí)開發(fā)人員在4的時(shí)候處理數(shù)據(jù)。

在4的時(shí)候，開發(fā)人員做什么？更新當(dāng)前頁面！

異步對(duì)象的status屬性：表示網(wǎng)絡(luò)請(qǐng)求的狀況的：200，404，500，需要是當(dāng)status==200時(shí)，表示網(wǎng)絡(luò)請(qǐng)求是成功的。

4、初始異步請(qǐng)求對(duì)象

異步的方法open()

xmlHttp.open(請(qǐng)求方式get|post, "服務(wù)器端的訪問地址", 同步|異步請(qǐng)求(默認(rèn)是true，異步請(qǐng)求));
// 例如
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

5、使用異步對(duì)象發(fā)送請(qǐng)求

xmlHttp.send();

獲取服務(wù)器端返回的數(shù)據(jù)，使用異步對(duì)象的屬性responseText

使用例子：xmlHttp.responseText

回調(diào)：當(dāng)請(qǐng)求的狀態(tài)變化時(shí)，異步對(duì)象會(huì)自動(dòng)調(diào)用onreadystatechange 事件對(duì)應(yīng)的函數(shù)。

訪問地址：使用get方式傳遞參數(shù)

http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8

6、json使用

1、Ajax發(fā)起請(qǐng)求后會(huì)返回的一個(gè)json格式的字符串

{ name: "河北", jiancheng: "冀", "shenghui": "石家莊"}

2、json分類：

json對(duì)象格式：JSONObject，這種對(duì)象的格式名稱: 值，也可以看做是key: value格式。
json數(shù)組格式：JSONArray，

// 基本格式：  
[
	{ name: "河北", jiancheng: "冀", "shenghui": "石家莊"},
	{ name: "山西", jiancheng: "晉", "shenghui": "太原"} 
]

3、為什么要使用json

json格式好理解
json格式數(shù)據(jù)在多種語言中，比較容易處理。使用java， javascript讀寫json格式的數(shù)據(jù)比較容易。
json格式數(shù)據(jù)他占用的空間下，在網(wǎng)絡(luò)中傳輸快，用戶的體驗(yàn)好。
處理json的工具庫：Gson（google）、Fastjson（阿里）、jackson、 json-lib。
在js中的，可以把json格式的字符串，轉(zhuǎn)為json對(duì)象， json中的key，就是json對(duì)象的屬性名。

當(dāng)然，下面是一個(gè)簡單的Ajax示例，演示了如何使用JavaScript和XMLHttpRequest對(duì)象來執(zhí)行異步HTTP請(qǐng)求，并更新網(wǎng)頁內(nèi)容。請(qǐng)注意，為了簡化示例，我們假設(shè)服務(wù)器上存在一個(gè)名為example.txt的文件，它包含一些簡單的文本內(nèi)容。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Ajax 示例</title>  
    <script>  
    function loadContent() {  
        // 創(chuàng)建一個(gè)新的XMLHttpRequest對(duì)象  
        var xhr = new XMLHttpRequest();  
        // 定義請(qǐng)求完成時(shí)的回調(diào)函數(shù)  
        xhr.onreadystatechange = function() {  
            if (xhr.readyState === 4 && xhr.status === 200) {  
                // 請(qǐng)求成功完成，服務(wù)器返回狀態(tài)碼200  
                // 更新頁面內(nèi)容  
                document.getElementById('content').innerHTML = xhr.responseText;  
            }  
        };  
        // 設(shè)置請(qǐng)求方法和URL  
        xhr.open('GET', 'example.txt', true);  
        // 發(fā)送請(qǐng)求  
        xhr.send();  
    }  
    </script>  
</head>  
<body>  
    <h1>Ajax 示例</h1>  
    <button onclick="loadContent()">加載內(nèi)容</button>  
    <div id="content"></div>  
</body>  
</html>

在這個(gè)示例中，定義了一個(gè)名為loadContent的JavaScript函數(shù)。當(dāng)點(diǎn)擊按鈕時(shí)，這個(gè)函數(shù)會(huì)被調(diào)用。

首先，我們創(chuàng)建一個(gè)新的XMLHttpRequest對(duì)象。
然后，我們定義了一個(gè)回調(diào)函數(shù)onreadystatechange，這個(gè)函數(shù)會(huì)在請(qǐng)求的狀態(tài)改變時(shí)被調(diào)用。當(dāng)請(qǐng)求完成（readyState === 4）并且服務(wù)器返回狀態(tài)碼為200（成功）時(shí)，我們更新頁面上id為content的<div>元素的內(nèi)容。
接著，我們使用open方法設(shè)置請(qǐng)求的方法和URL。在這個(gè)例子中，我們使用GET方法請(qǐng)求example.txt文件。
最后，我們使用send方法發(fā)送請(qǐng)求。
請(qǐng)注意，這個(gè)例子假設(shè)服務(wù)器上的example.txt文件是可訪問的，并且與你的HTML文件在同一個(gè)域名下。如果文件位于其他位置，你需要修改xhr.open方法中的URL來指向正確的位置。

此外，現(xiàn)代Web開發(fā)中，可能會(huì)更傾向于使用更高級(jí)的庫（如jQuery的$.ajax方法）或現(xiàn)代的Fetch API來執(zhí)行Ajax請(qǐng)求，因?yàn)樗鼈兲峁┝烁啙?、更?qiáng)大的功能，并且能更好地處理錯(cuò)誤和跨域請(qǐng)求。

到此這篇關(guān)于Ajax使用異步對(duì)象發(fā)送請(qǐng)求簡介的文章就介紹到這了,更多相關(guān)Ajax異步對(duì)象發(fā)送請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: