原生JavaScript實(shí)現(xiàn)Ajax的方法
首先為大家分享了原生JavaScript實(shí)現(xiàn)Ajax代碼,供大家參考,具體內(nèi)容如下
var getXmlHttpRequest = function() {
if (window.XMLHttpRequest) {
//主流瀏覽器提供了XMLHttpRequest對(duì)象
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
//低版本的IE瀏覽器沒(méi)有提供XMLHttpRequest對(duì)象
//所以必須使用IE瀏覽器的特定實(shí)現(xiàn)ActiveXObject
return new ActiveXObject("Microsoft.XMLHttpRequest");
}
};
var xhr = getXmlHttpRequest();
xhr.onreadystatechange = function() {
console.log(xhr.readyState);
if (xhr.readyState === 3 && xhr.status === 200) {
//獲取成功后執(zhí)行操作
//數(shù)據(jù)在xhr.responseText
console.log(xhr.responseText);
}
};
xhr.open("get", "data.php", true);
xhr.send("");
下面和大家分享幾種利用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');
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
- 原生Javascript封裝的一個(gè)AJAX函數(shù)分享
- 原生 JS Ajax,GET和POST 請(qǐng)求實(shí)例代碼
- JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實(shí)例
- javascript原生ajax寫(xiě)法分享
- 實(shí)例講解使用原生JavaScript處理AJAX請(qǐng)求的方法
- 詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
- 原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)
- 原生js仿jquery實(shí)現(xiàn)對(duì)Ajax的封裝
相關(guān)文章
JavaScript 實(shí)現(xiàn)下雪特效的示例代碼
這篇文章主要介紹了JavaScript 實(shí)現(xiàn)下雪特效的示例代碼,幫助大家利用JavaScript制作特效,感興趣的朋友可以了解下2020-09-09
微信小程序之onLaunch與onload異步問(wèn)題詳解
這篇文章主要介紹了微信小程序之onLaunch與onload異步問(wèn)題詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
淺談javascript語(yǔ)法和定時(shí)函數(shù)
初學(xué)者可能對(duì)Javascript的定時(shí)器有誤解,認(rèn)為它們是線(xiàn)程,其實(shí)Javascript是運(yùn)行于單線(xiàn)程中的,而定時(shí)器僅僅是計(jì)劃在未來(lái)的某個(gè)時(shí)間執(zhí)行,而具體的執(zhí)行時(shí)間是不能保證的,因?yàn)樵陧?yè)面的生命周期中,不同的時(shí)間可能有其它代碼在控制Javascript的里進(jìn)程。2015-05-05
分離式j(luò)avascript取當(dāng)前element值的代碼
比較不錯(cuò)的分離式j(luò)s代碼,獲取element的值,大家注意下,運(yùn)行后的效果是32之類(lèi)的值,其實(shí)主要是沒(méi)有強(qiáng)制轉(zhuǎn)換成數(shù)字,所以大家可以加上2008-05-05
JS URL傳中文參數(shù)引發(fā)的亂碼問(wèn)題
今天的項(xiàng)目中碰到了一個(gè)亂碼問(wèn)題,從JS里傳URL到服務(wù)器,URL中有中文參數(shù),服務(wù)器里讀出的中文參數(shù)來(lái)的全是“?”,查了網(wǎng)上JS編碼相關(guān)資料得以解決。2009-09-09
js方法數(shù)據(jù)驗(yàn)證的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇js方法數(shù)據(jù)驗(yàn)證的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
純JavaScript實(shí)現(xiàn)的分頁(yè)插件實(shí)例
這篇文章主要介紹了純JavaScript實(shí)現(xiàn)的分頁(yè)插件,涉及javascript結(jié)合php動(dòng)態(tài)實(shí)現(xiàn)分頁(yè)效果的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
javascript 一個(gè)自定義長(zhǎng)度的文本自動(dòng)換行的函數(shù)
javascript 一個(gè)自定義長(zhǎng)度的文本自動(dòng)換行的函數(shù)...2007-08-08
BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹
響應(yīng)式導(dǎo)航條就是可以在不同的設(shè)備下查看不同的效果。這篇文章主要介紹了BootStrap響應(yīng)式導(dǎo)航條實(shí)例介紹的相關(guān)資料,小編認(rèn)為本文介紹的非常的不錯(cuò),特此分享給大家,供大家參考2016-05-05
JS獲取下拉列表所選中的TEXT和Value的實(shí)現(xiàn)代碼
本篇文章主要是對(duì)JS獲取下拉列表所選中的TEXT和Value的實(shí)現(xiàn)代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01

