更新時(shí)間:2020-08-20 12:16:04 來源:動(dòng)力節(jié)點(diǎn) 瀏覽1383次
AJAX是有很多用處的,在AJAX菜鳥教程中,會(huì)給大家介紹AJAX需要掌握的幾個(gè)功能點(diǎn):
1. 創(chuàng)建原生Ajax對(duì)象
XMLHttpRequest 是 AJAX 的基礎(chǔ),所有現(xiàn)代瀏覽器(IE7+、Firefox、Chrome、Safari 以及 Opera)均內(nèi)建 XMLHttpRequest 對(duì)象。那么我們下面來創(chuàng)建一個(gè)ajax對(duì)象
const instance = new XMLHttpRequest();
這樣我們就創(chuàng)建了一個(gè)用于進(jìn)行ajax交互的對(duì)象。
當(dāng)然我們這兒提及一下老版本的ie5、ie6的javascript對(duì)象都是使用ActiveX來實(shí)現(xiàn)的標(biāo)準(zhǔn),所以沒有XMLHttpRequest對(duì)象。他們創(chuàng)建一個(gè)對(duì)象使用這種方式
const instance = new ActiveXObject("Microsoft.XMLHTTP");
其實(shí)我們了解一下就行了,這塊在你的代碼也不用加上了,現(xiàn)在所有的網(wǎng)站應(yīng)該都放棄了對(duì)低版本ie的支持,這個(gè)已經(jīng)退出了歷史舞臺(tái),了解一下情況即可。
2. Ajax發(fā)送請(qǐng)求
首先來看一下XMLHttpRequest如何發(fā)送一個(gè)請(qǐng)求到服務(wù)器
const instance = new XMLHttpRequest();
instance.open(method,url,async);
instance.send();
這里用到了兩個(gè)方法,第一個(gè)open方法其實(shí)是配置ajax必要的信息,第二個(gè)send才是真正的發(fā)起請(qǐng)求到服務(wù)器。
3. Ajax通過readyState狀態(tài)的變化接收服務(wù)器響應(yīng)
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí),我們需要執(zhí)行一些基于響應(yīng)的任務(wù),每當(dāng) readyState 改變時(shí),就會(huì)觸發(fā) onreadystatechange 事件,readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。
4. 進(jìn)級(jí)苦惱之跨域請(qǐng)求
跨域是所有前端都必須去面對(duì)的一個(gè)棘手的問題,當(dāng)你去請(qǐng)求其他服務(wù)器的資源時(shí),瀏覽器安全限制會(huì)阻止該請(qǐng)求。你的請(qǐng)求不會(huì)到底服務(wù)器,被瀏覽器阻止了,這也是遵循了同源策略。
那么如何去解決這個(gè)跨域呢,通用的有幾種方法,但是核心都是需要服務(wù)器去配合處理跨域,前端自己無法處理跨域。
第一個(gè)采用JsonP方法,這個(gè)方法其實(shí)也是需要后臺(tái)去配合處理,由后臺(tái)來進(jìn)行請(qǐng)求,然后將數(shù)據(jù)拼裝在一個(gè)json對(duì)象返回到前臺(tái),然后前臺(tái)通過callback函數(shù)來進(jìn)行操作。這個(gè)也比較繁瑣。
第二種就是服務(wù)端去放一個(gè)跨域文件crossdomain.xml放置到服務(wù)器端,然后寫上可以跨域的ip地址。
第三種配置反向代理服務(wù)器,通過代理服務(wù)器我們也其實(shí)是代理服務(wù)器去請(qǐng)求外圍,然后轉(zhuǎn)發(fā)到我們的服務(wù)器上。這樣也可以防止跨域。
以上就是AJAX菜鳥教程中AJAX需要掌握的幾個(gè)功能點(diǎn),希望對(duì)大家能夠有所幫助。
0基礎(chǔ) 0學(xué)費(fèi) 15天面授
有基礎(chǔ) 直達(dá)就業(yè)
業(yè)余時(shí)間 高薪轉(zhuǎn)行
工作1~3年,加薪神器
工作3~5年,晉升架構(gòu)
提交申請(qǐng)后,顧問老師會(huì)電話與您溝通安排學(xué)習(xí)