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,具體方法如下:
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)求:
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)求:
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)文章
一次記住JavaScript的6個(gè)正則表達(dá)式方法
這篇文章主要介紹了一次記住JavaScript的6個(gè)正則表達(dá)式方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-02-02KnockoutJS 3.X API 第四章之事件event綁定
event綁定即為事件綁定,即當(dāng)觸發(fā)相關(guān)DOM事件的時(shí)候回調(diào)函數(shù),這篇文章主要介紹了KnockoutJS 3.X API 第四章之事件event綁定的相關(guān)知識(shí),感興趣的朋友一起看看吧2016-10-10json數(shù)據(jù)與字符串的相互轉(zhuǎn)化示例
json與字符串之間的轉(zhuǎn)換,在使用中經(jīng)常會(huì)遇到,本文有個(gè)不錯(cuò)的示例,大家可以參考下,或許會(huì)有所幫助2013-09-09微信小程序?qū)崿F(xiàn)評(píng)價(jià)功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)評(píng)價(jià)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08js刪除數(shù)組中的元素delete和splice的區(qū)別詳解
下面小編就為大家分享一篇js刪除數(shù)組中的元素delete和splice的區(qū)別詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02前端如何用post的方式進(jìn)行eventSource請(qǐng)求
這篇文章主要給大家介紹了關(guān)于前端如何用post的方式進(jìn)行eventSource請(qǐng)求的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2023-04-04ie瀏覽器使用js導(dǎo)出網(wǎng)頁(yè)到excel并打印
簡(jiǎn)單介紹一種可以使用簡(jiǎn)單的JS來(lái)實(shí)現(xiàn)把網(wǎng)頁(yè)中的信息原樣導(dǎo)出到Excel、還可以打印的方法,需要的朋友可以參考下2014-03-03JS實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的方法詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)將數(shù)據(jù)導(dǎo)出到Excel的兩種方法詳解,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以動(dòng)手嘗試一下2022-06-06動(dòng)態(tài)加載、移除js/css文件的示例代碼
本文簡(jiǎn)單介紹動(dòng)態(tài)加載、移除、替換js/css文件的示例代碼,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒加載,需要的朋友參考下吧2018-03-03EXT中單擊button按鈕grid添加一行(光標(biāo)位置可設(shè)置)的實(shí)例代碼
這篇文章主要介紹了EXT中單擊button按鈕grid添加一行(光標(biāo)位置可設(shè)置)的實(shí)例代碼 的相關(guān)資料,需要的朋友可以參考下2016-06-06