javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
更新時(shí)間：2013年09月21日 12:20:39 作者：
項(xiàng)目中不需要加載jquery這種龐大的js插件要使用到ajax這種功能該如何辦呢？下面和大家分享幾種利用javascript實(shí)現(xiàn)原生ajax的方法
自從javascript有了各種框架之后，比如jquery，使用ajax已經(jīng)變的相當(dāng)簡(jiǎn)單了。但有時(shí)候?yàn)榱俗非蠛?jiǎn)潔，可能項(xiàng)目中不需要加載jquery這種龐大的js插件。但又要使用到ajax這種功能該如何辦呢？下面和大家分享幾種利用javascript實(shí)現(xiàn)原生ajax的方法。
實(shí)現(xiàn)ajax之前必須要?jiǎng)?chuàng)建一個(gè) XMLHttpRequest 對(duì)象。如果不支持創(chuàng)建該對(duì)象的瀏覽器，則需要?jiǎng)?chuàng)建 ActiveXObject，具體方法如下：
復(fù)制代碼 代碼如下:
var xmlHttp;
function createxmlHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();
}
（1）下面使用上面創(chuàng)建的xmlHttp實(shí)現(xiàn)最簡(jiǎn)單的ajax get請(qǐng)求：
復(fù)制代碼 代碼如下:
function doGet(url){
// 注意在傳參數(shù)值的時(shí)候最好使用encodeURI處理一下，以防出現(xiàn)亂碼
createxmlHttpRequest();
xmlHttp.open("GET",url);
xmlHttp.send(null);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
} else {
alert('fail');
}
}
}
（2）使用上面創(chuàng)建的xmlHttp實(shí)現(xiàn)最簡(jiǎn)單的ajax post請(qǐng)求：
復(fù)制代碼 代碼如下:
function doPost(url,data){
// 注意在傳參數(shù)值的時(shí)候最好使用encodeURI處理一下，以防出現(xiàn)亂碼
createxmlHttpRequest();
xmlHttp.open("POST",url);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(data);
xmlHttp.onreadystatechange = function() {
if ((xmlHttp.readyState == 4) && (xmlHttp.status == 200)) {
alert('success');
} else {
alert('fail');
}
}
}
相關(guān)文章
詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用
這篇文章主要介紹了詳解使用Next.js構(gòu)建服務(wù)端渲染應(yīng)用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
elementUI?Table?自定義表頭動(dòng)態(tài)數(shù)據(jù)及插槽的操作
本文介紹了如何實(shí)現(xiàn)一個(gè)高度自定義的列表界面,其中表格的表頭由后端返回,并且允許用戶根據(jù)需求自定義表頭和數(shù)據(jù)展示樣式,本文給大家介紹elementUI?Table?自定義表頭動(dòng)態(tài)數(shù)據(jù)及插槽的操作,感興趣的朋友跟隨小編一起看看吧2024-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義聯(lián)系人彈窗，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
本文詳細(xì)介紹了JavaScript數(shù)組方法的分類和具體用法,涵蓋了數(shù)組的添加/刪除、查找/訪問(wèn)、遍歷、排序/反轉(zhuǎn)、轉(zhuǎn)換以及一些其他實(shí)用方法,每種方法都提供了簡(jiǎn)要的解釋和示例代碼,幫助讀者更好地理解和應(yīng)用這些方法,感興趣的朋友一起看看吧2025-03-03
詳談ES6中的迭代器(Iterator)和生成器(Generator)
下面小編就為大家?guī)?lái)一篇詳談ES6中的迭代器(Iterator)和生成器(Generator)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
Axios設(shè)置token請(qǐng)求頭的三種方式
用戶登錄時(shí),后端會(huì)返回一個(gè)token,并且保存到瀏覽器的localstorage中,可以根據(jù)localstorage中的token判斷用戶是否登錄,所以當(dāng)發(fā)送請(qǐng)求時(shí),都要攜帶token給后端進(jìn)行判斷,本文給大家介紹了Axios設(shè)置token請(qǐng)求頭的三種方式,需要的朋友可以參考下2024-02-02
JS?new操作原理及手寫(xiě)函數(shù)模擬實(shí)現(xiàn)示例
這篇文章主要為大家介紹了JS?new操作原理及手寫(xiě)函數(shù)模擬實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Javascript中，相信大家都試過(guò)用getElementsByTagName和childNodes來(lái)實(shí)現(xiàn)對(duì)節(jié)點(diǎn)的遍歷2011-10-10
這篇文章介紹了JS異步的執(zhí)行順序，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
javaScript實(shí)現(xiàn)支付10秒倒計(jì)時(shí)
這篇文章主要為大家詳細(xì)介紹了javaScript實(shí)現(xiàn)支付10秒倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10