Ajax指的是什么

發(fā)布時(shí)間：2020-08-05 14:18:52

來源：億速云

閱讀：103

作者：小新

這篇文章將為大家詳細(xì)講解有關(guān)Ajax指的是什么，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

Ajax，全稱為Asynchronous JavaScript and XML，即異步的JavaScript和XML。它不是一門編程語言，而是利用JavaScript在保證頁面不被刷新、頁面鏈接不改變的情況下與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的技術(shù)。

對于傳統(tǒng)的網(wǎng)頁，如果想更新其內(nèi)容，那么必須要刷新整個(gè)頁面，但有了Ajax，便可以在頁面不被全部刷新的情況下更新其內(nèi)容。在這個(gè)過程中，頁面實(shí)際上是在后臺與服務(wù)器進(jìn)行了數(shù)據(jù)交互，獲取到數(shù)據(jù)之后，再利用JavaScript改變網(wǎng)頁，這樣網(wǎng)頁內(nèi)容就會更新了。

1. 實(shí)例引入

瀏覽網(wǎng)頁的時(shí)候，我們會發(fā)現(xiàn)很多網(wǎng)頁都有下滑查看更多的選項(xiàng)。比如，拿微博來說，我們以我的個(gè)人的主頁為例：https://m.weibo.cn/u/2830678474，切換到微博頁面，一直下滑，可以發(fā)現(xiàn)下滑幾個(gè)微博之后，再向下就沒有了，轉(zhuǎn)而會出現(xiàn)一個(gè)加載的動畫，不一會兒下方就繼續(xù)出現(xiàn)了新的微博內(nèi)容，這個(gè)過程其實(shí)就是Ajax加載的過程，如圖6-1所示。

圖6-1 頁面加載過程

我們注意到頁面其實(shí)并沒有整個(gè)刷新，也就意味著頁面的鏈接沒有變化，但是網(wǎng)頁中卻多了新內(nèi)容，也就是后面刷出來的新微博。這就是通過Ajax獲取新數(shù)據(jù)并呈現(xiàn)的過程。

2. 基本原理

初步了解了Ajax之后，我們再來詳細(xì)了解它的基本原理。發(fā)送Ajax請求到網(wǎng)頁更新的這個(gè)過程可以簡單分為以下3步：

(1) 發(fā)送請求； (2) 解析內(nèi)容； (3) 渲染網(wǎng)頁。

下面我們分別來詳細(xì)介紹這幾個(gè)過程。

發(fā)送請求

我們知道JavaScript可以實(shí)現(xiàn)頁面的各種交互功能，Ajax也不例外，它也是由JavaScript實(shí)現(xiàn)的，實(shí)際上執(zhí)行了如下代碼：var?xmlhttp;

if?(window.XMLHttpRequest)?{

//?code?for?IE7+,?Firefox,?Chrome,?Opera,?Safari

xmlhttp=new?XMLHttpRequest();

}?else?{//?code?for?IE6,?IE5

xmlhttp=new?ActiveXObject("Microsoft.XMLHTTP");

}

xmlhttp.onreadystatechange=function()?{

if?(xmlhttp.readyState==4?&&?xmlhttp.status==200)?{

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}

}

xmlhttp.open("POST","/ajax/",true);

xmlhttp.send();

這是JavaScript對Ajax最底層的實(shí)現(xiàn)，實(shí)際上就是新建了XMLHttpRequest對象，然后調(diào)用onreadystatechange屬性設(shè)置了監(jiān)聽，然后調(diào)用open()和send()方法向某個(gè)鏈接(也就是服務(wù)器)發(fā)送了請求。前面用Python實(shí)現(xiàn)請求發(fā)送之后，可以得到響應(yīng)結(jié)果，但這里請求的發(fā)送變成JavaScript來完成.由于設(shè)置了監(jiān)聽，所以當(dāng)服務(wù)器返回響應(yīng)時(shí)，onreadystatechange對應(yīng)的方法便會被觸發(fā)，然后在這個(gè)方法里面解析響應(yīng)內(nèi)容即可。

解析內(nèi)容

得到響應(yīng)之后，onreadystatechange屬性對應(yīng)的方法便會被觸發(fā)，此時(shí)利用xmlhttp的responseText屬性便可取到響應(yīng)內(nèi)容。這類似于Python中利用requests向服務(wù)器發(fā)起請求，然后得到響應(yīng)的過程。那么返回內(nèi)容可能是HTML，可能是JSON，接下來只需要在方法中用JavaScript進(jìn)一步處理即可。比如，如果是JSON的話，可以進(jìn)行解析和轉(zhuǎn)化。

渲染網(wǎng)頁

JavaScript有改變網(wǎng)頁內(nèi)容的能力，解析完響應(yīng)內(nèi)容之后，就可以調(diào)用JavaScript來針對解析完的內(nèi)容對網(wǎng)頁進(jìn)行下一步處理了。比如，通過document.getElementById().innerHTML這樣的操作，便可以對某個(gè)元素內(nèi)的源代碼進(jìn)行更改，這樣網(wǎng)頁顯示的內(nèi)容就改變了，這樣的操作也被稱作DOM操作，即對Document網(wǎng)頁文檔進(jìn)行操作，如更改、刪除等。

上例中，document.getElementById("myDiv").innerHTML=xmlhttp.responseText便將ID為myDiv的節(jié)點(diǎn)內(nèi)部的HTML代碼更改為服務(wù)器返回的內(nèi)容，這樣myDiv元素內(nèi)部便會呈現(xiàn)出服務(wù)器返回的新數(shù)據(jù)，網(wǎng)頁的部分內(nèi)容看上去就更新了。

我們觀察到，這3個(gè)步驟其實(shí)都是由JavaScript完成的，它完成了整個(gè)請求、解析和渲染的過程。

再回想微博的下拉刷新，這其實(shí)就是JavaScript向服務(wù)器發(fā)送了一個(gè)Ajax請求，然后獲取新的微博數(shù)據(jù)，將其解析，并將其渲染在網(wǎng)頁中。

因此，我們知道，真實(shí)的數(shù)據(jù)其實(shí)都是一次次Ajax請求得到的，如果想要抓取這些數(shù)據(jù)，需要知道這些請求到底是怎么發(fā)送的，發(fā)往哪里，發(fā)了哪些參數(shù)。如果我們知道了這些，不就可以用Python模擬這個(gè)發(fā)送操作，獲取到其中的結(jié)果了嗎？

關(guān)于Ajax指的是什么就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

總結(jié)

以上是生活随笔為你收集整理的应运ajax的几种语言,Ajax指的是什么的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。