原生JavaScript實(shí)現(xiàn)Ajax的方法
首先為大家分享了原生JavaScript實(shí)現(xiàn)Ajax代碼,供大家參考,具體內(nèi)容如下
var getXmlHttpRequest = function() { if (window.XMLHttpRequest) { //主流瀏覽器提供了XMLHttpRequest對象 return new XMLHttpRequest(); } else if (window.ActiveXObject) { //低版本的IE瀏覽器沒有提供XMLHttpRequest對象 //所以必須使用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之前必須要創(chuàng)建一個 XMLHttpRequest 對象。如果不支持創(chuà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)最簡單的ajax get請求:
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)最簡單的ajax post請求:
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'); } } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助。
- javascript實(shí)現(xiàn)原生ajax的幾種方法介紹
- 原生Javascript封裝的一個AJAX函數(shù)分享
- 原生 JS Ajax,GET和POST 請求實(shí)例代碼
- JavaScript原生xmlHttp與jquery的ajax方法json數(shù)據(jù)格式實(shí)例
- javascript原生ajax寫法分享
- 實(shí)例講解使用原生JavaScript處理AJAX請求的方法
- 詳解原生JavaScript實(shí)現(xiàn)jQuery中AJAX處理的方法
- 原生JS封裝ajax 傳json,str,excel文件上傳提交表單(推薦)
- 原生js仿jquery實(shí)現(xiàn)對Ajax的封裝
相關(guān)文章
網(wǎng)站發(fā)布后Bootstrap框架引用woff字體無法正常顯示的解決方法
這篇文章主要介紹了網(wǎng)站發(fā)布到IIS后Bootstrap框架引用的woff字體無法正常顯示的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果
這篇文章主要介紹了JS實(shí)現(xiàn)可展開折疊層的鼠標(biāo)拖曳效果,具有展開折疊層及實(shí)時(shí)顯示鼠標(biāo)坐標(biāo)位置的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解
這篇文章主要介紹了JS 實(shí)現(xiàn)Base64編碼與解碼實(shí)例詳解的相關(guān)資料,并附實(shí)例代碼,幫助大家學(xué)習(xí)理解此部分知識,需要的朋友可以參考下2016-11-11JavaScript中String.prototype用法實(shí)例
這篇文章主要介紹了JavaScript中String.prototype用法,實(shí)例分析了prototype的功能及使用技巧,需要的朋友可以參考下2015-05-05JS 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的“59秒后重新發(fā)送驗(yàn)證短信”功能
這篇文章主要介紹了JS 實(shí)現(xiàn)發(fā)送短信驗(yàn)證碼的“59秒后重新發(fā)送驗(yàn)證短信”功能,非常不錯,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-08-08JavaScript實(shí)現(xiàn)簡易tab欄切換內(nèi)容欄
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡易tab欄切換內(nèi)容欄,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-05-05clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析
clientX,pageX,offsetX,x,layerX,screenX,offsetLeft區(qū)別分析,需要的朋友可以參考下。2010-03-03js 獲取、清空input type="file"的值示例代碼
本篇文章主要是對js獲取、清空input type="file"的值的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對大家有所幫助2014-02-02