Ajax使用異步對象發(fā)送請求方案詳解
一、什么是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對象來向服務(wù)器發(fā)異步請求，從服務(wù)器獲得數(shù)據(jù)，然后用JavaScript來操作DOM而更新頁面。
使用Ajax技術(shù)的網(wǎng)頁應(yīng)用能夠快速地將增量更新呈現(xiàn)在用戶界面上，而不需要重載（刷新）整個頁面，從而節(jié)省網(wǎng)絡(luò)帶寬，提高網(wǎng)頁加載速度，縮短用戶等待時(shí)間，改善用戶體驗(yàn)。
Ajax通過異步通信的方式，實(shí)現(xiàn)了在不刷新整個頁面的情況下，對頁面的局部進(jìn)行更新，極大地提升了Web應(yīng)用的交互性和性能。
二、全局刷新和局部刷新
- 全局刷新：整個瀏覽器被新的數(shù)據(jù)覆蓋。在網(wǎng)絡(luò)中傳輸大量的數(shù)據(jù)，瀏覽器需要加載，渲染頁面。
- 局部刷新：在瀏覽器器的內(nèi)部，發(fā)起請求，獲取數(shù)據(jù)，改變頁面中的部分內(nèi)容，其余的頁面無需加載和渲染。
網(wǎng)絡(luò)中數(shù)據(jù)傳輸量越少，給用戶的感受越好。
Ajax是用來做局部刷新的：局部刷新使用的核心對象：異步對象（XMLHttpRequest）。這個異步對象是存在瀏覽器內(nèi)存中的，使用JavaScript語法創(chuàng)建和使用XMLHttpRequest對象。
- Ajax包含的技術(shù)主要有：JavaScript、dom、css、xml等。
- 核心是：JavaScript 和 xml【被json代替】。
- JavaScript：負(fù)責(zé)創(chuàng)建異步對象，發(fā)送請求，更新頁面的dom對象。
- 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對象（Ajax核心步驟）
1、創(chuàng)建異步對象
var xmlHttp = new XMLHttpRequest();
2、給異步對象綁定事件
onreadystatechange ：當(dāng)異步對象發(fā)起請求，獲取了數(shù)據(jù)都會觸發(fā)這個事件。這個事件需要指定一個函數(shù)， 在函數(shù)中處理狀態(tài)的變化。
btn.onclick = fun1()
function fun1(){
alert("按鈕單擊")；
}例如：
xmlHttp.onreadystatechange= function(){
處理請求的狀態(tài)變化。
if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){
// 可以處理服務(wù)器端的數(shù)據(jù)，更新當(dāng)前頁面
var data = xmlHttp.responseText;
document.getElementById("name").value = data;
}
}3、異步對象的屬性 readyState 表示異步對象請求的狀態(tài)變化
- 0：創(chuàng)建異步對象時(shí)， new XMLHttpRequest();
- 1：初始異步請求對象，xmlHttp.open(請求方式，請求地址，true);
- 2：發(fā)送請求，xmlHttp.send();
- 3：從服務(wù)器端獲取了數(shù)據(jù)，此時(shí)3是異步對象內(nèi)部使用，獲取了原始的數(shù)據(jù)。
- 4：異步對象把接收的數(shù)據(jù)處理完成后。 此時(shí)開發(fā)人員在4的時(shí)候處理數(shù)據(jù)。
4：異步對象把接收的數(shù)據(jù)處理完成后。
此時(shí)開發(fā)人員在4的時(shí)候處理數(shù)據(jù)。
在4的時(shí)候，開發(fā)人員做什么？更新當(dāng)前頁面！
異步對象的status屬性：表示網(wǎng)絡(luò)請求的狀況的：200，404，500，需要是當(dāng)status==200時(shí)，表示網(wǎng)絡(luò)請求是成功的。
4、初始異步請求對象
異步的方法open()
xmlHttp.open(請求方式get|post, "服務(wù)器端的訪問地址", 同步|異步請求(默認(rèn)是true，異步請求));
// 例如
xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);5、使用異步對象發(fā)送請求
xmlHttp.send();
獲取服務(wù)器端返回的數(shù)據(jù)，使用異步對象的屬性responseText
使用例子：xmlHttp.responseText
回調(diào)：當(dāng)請求的狀態(tài)變化時(shí)，異步對象會自動調(diào)用onreadystatechange 事件對應(yīng)的函數(shù)。
訪問地址：使用get方式傳遞參數(shù)
http://localhost:8080/course_myajax/bmiPrint?name=李四&w=82&h=1.8
6、json使用
1、Ajax發(fā)起請求后會返回的一個json格式的字符串
{ name: "河北", jiancheng: "冀", "shenghui": "石家莊"}2、json分類：
- json對象格式：JSONObject，這種對象的格式
名稱: 值，也可以看做是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對象， json中的key，就是json對象的屬性名。
當(dāng)然，下面是一個簡單的Ajax示例，演示了如何使用JavaScript和XMLHttpRequest對象來執(zhí)行異步HTTP請求，并更新網(wǎng)頁內(nèi)容。請注意，為了簡化示例，我們假設(shè)服務(wù)器上存在一個名為example.txt的文件，它包含一些簡單的文本內(nèi)容。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax 示例</title>
<script>
function loadContent() {
// 創(chuàng)建一個新的XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// 定義請求完成時(shí)的回調(diào)函數(shù)
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 請求成功完成，服務(wù)器返回狀態(tài)碼200
// 更新頁面內(nèi)容
document.getElementById('content').innerHTML = xhr.responseText;
}
};
// 設(shè)置請求方法和URL
xhr.open('GET', 'example.txt', true);
// 發(fā)送請求
xhr.send();
}
</script>
</head>
<body>
<h1>Ajax 示例</h1>
<button onclick="loadContent()">加載內(nèi)容</button>
<div id="content"></div>
</body>
</html>在這個示例中，定義了一個名為loadContent的JavaScript函數(shù)。當(dāng)點(diǎn)擊按鈕時(shí)，這個函數(shù)會被調(diào)用。
- 首先，我們創(chuàng)建一個新的XMLHttpRequest對象。
- 然后，我們定義了一個回調(diào)函數(shù)onreadystatechange，這個函數(shù)會在請求的狀態(tài)改變時(shí)被調(diào)用。當(dāng)請求完成（readyState === 4）并且服務(wù)器返回狀態(tài)碼為200（成功）時(shí)，我們更新頁面上id為content的<div>元素的內(nèi)容。
- 接著，我們使用open方法設(shè)置請求的方法和URL。在這個例子中，我們使用GET方法請求example.txt文件。
- 最后，我們使用send方法發(fā)送請求。
- 請注意，這個例子假設(shè)服務(wù)器上的example.txt文件是可訪問的，并且與你的HTML文件在同一個域名下。如果文件位于其他位置，你需要修改xhr.open方法中的URL來指向正確的位置。
此外，現(xiàn)代Web開發(fā)中，可能會更傾向于使用更高級的庫（如jQuery的$.ajax方法）或現(xiàn)代的Fetch API來執(zhí)行Ajax請求，因?yàn)樗鼈兲峁┝烁啙?、更?qiáng)大的功能，并且能更好地處理錯誤和跨域請求。
到此這篇關(guān)于Ajax使用異步對象發(fā)送請求簡介的文章就介紹到這了,更多相關(guān)Ajax異步對象發(fā)送請求內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了AJAX使用get與post模式的區(qū)別,實(shí)例分析了Ajax中g(shù)et與post的具體用法與使用區(qū)別,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了$.ajax()方法參數(shù)詳解的相關(guān)資料,需要的朋友可以參考下2015-10-10
AJAX技術(shù)經(jīng)過這么多年的發(fā)展，出現(xiàn)了一些框架或類庫用于簡化開發(fā)工作，不同的框架類庫的使用方法也各不相同。 現(xiàn)在，再回頭看看這些技術(shù)，看看這些框架類庫，我們能感受到技術(shù)在不斷地發(fā)展，AJAX開發(fā)越來越容易了。2015-09-09
Ajax實(shí)現(xiàn)城市二級聯(lián)動（一）
這篇文章主要為大家詳細(xì)介紹了Ajax實(shí)現(xiàn)城市二級聯(lián)動的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
做一個表單驗(yàn)證里面最簡單的例子，檢查用戶名是否存在，使用Ajax完成表單驗(yàn)證的正常步驟應(yīng)該是2008-12-12
給Ajax返回的HTML標(biāo)簽動態(tài)添加樣式的方法
這篇文章主要介紹了給Ajax返回的HTML標(biāo)簽動態(tài)添加樣式的方法,需要的朋友可以參考下2017-04-04
這篇文章主要介紹了如何利用Ajax實(shí)現(xiàn)上傳圖像,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-04-04
這篇文章主要為大家詳細(xì)介紹了ajax跨頁面提交表單的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
Ajax 框架之SSM整合框架實(shí)現(xiàn)ajax校驗(yàn)
這篇文章主要介紹了Ajax 框架之SSM整合框架實(shí)現(xiàn)ajax校驗(yàn),需要的朋友可以參考下2017-04-04
使用ajax和history.pushState無刷新改變頁面URL示例
這篇文章主要介紹了使用ajax和history.pushState無刷新改變頁面URL示例,需要的朋友可以參考下2014-10-10