使用原生js寫ajax實(shí)例(推薦)
更新時(shí)間:2017年05月31日 07:46:50 投稿:jingxian
下面小編就為大家?guī)?lái)一篇使用原生js寫ajax實(shí)例(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
實(shí)例如下:
// 使用原生js 封裝ajax // 兼容xhr對(duì)象 function createXHR(){ if(typeof XMLHttpRequest != "undefined"){ // 非IE6瀏覽器 return new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ // IE6瀏覽器 var version = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp", ]; for(var i = 0; i < version.length; i++){ try{ return new ActiveXObject(version[i]); }catch(e){ //跳過 } } }else{ throw new Error("您的系統(tǒng)或?yàn)g覽器不支持XHR對(duì)象!"); } } // 轉(zhuǎn)義字符 function params(data){ var arr = []; for(var i in data){ arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i])); } return arr.join("&"); } // 封裝ajax function ga_ajax(obj){ var xhr = createXHR(); obj.url = obj.url + "?rand=" + Math.random(); // 清除緩存 obj.data = params(obj.data); // 轉(zhuǎn)義字符串 if(obj.method === "get"){ // 判斷使用的是否是get方式發(fā)送 obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data; } // 異步 if(obj.async === true){ // 異步的時(shí)候需要觸發(fā)onreadystatechange事件 xhr.onreadystatechange = function(){ // 執(zhí)行完成 if(xhr.readyState == 4){ callBack(); } } } xhr.open(obj.method,obj.url,obj.async); // false是同步 true是異步 // "demo.php?rand="+Math.random()+"&name=ga&ga", if(obj.method === "post"){ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(obj.data); }else{ xhr.send(null); } // xhr.abort(); // 取消異步請(qǐng)求 // 同步 if(obj.async === false){ callBack(); } // 返回?cái)?shù)據(jù) function callBack(){ // 判斷是否返回正確 if(xhr.status == 200){ obj.success(xhr.responseText); }else{ obj.Error("獲取數(shù)據(jù)失敗,錯(cuò)誤代號(hào)為:"+xhr.status+"錯(cuò)誤信息為:"+xhr.statusText); } } } var html = document.getElementsByTagName("html")[0]; html.onclick = function(){ ga_ajax({ "method" : "post", "url" : "demo.php", "data" : { "name" : "gao", "age" : 100, "num" : "12346&598" }, "success" : function(data){ alert(data); }, "Error" : function(text){ alert(text); }, "async" : false }); }
以上這篇使用原生js寫ajax實(shí)例(推薦)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
ztree獲取當(dāng)前選中節(jié)點(diǎn)子節(jié)點(diǎn)id集合的方法
這篇文章主要介紹了ztree獲取當(dāng)前選中節(jié)點(diǎn)子節(jié)點(diǎn)id集合的方法,實(shí)例分析了ztree的方法transformToArray使用技巧,需要的朋友可以參考下2015-02-02JavaScript中關(guān)于e.keycode的使用
這篇文章主要介紹了JavaScript中關(guān)于e.keycode的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12JS實(shí)現(xiàn)很實(shí)用的對(duì)聯(lián)廣告代碼(可自適應(yīng)高度)
這篇文章主要介紹了JS實(shí)現(xiàn)很實(shí)用的對(duì)聯(lián)廣告代碼,可實(shí)現(xiàn)固定相對(duì)位置懸浮展示及跟隨屏幕上下滑動(dòng)等功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JS 實(shí)現(xiàn) ajax 異步瀏覽器兼容問題
本文通過實(shí)例代碼給大家講解了js實(shí)現(xiàn)ajax異步瀏覽器兼容問題,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友參考下吧2017-01-01值得分享和收藏的Bootstrap學(xué)習(xí)教程
這絕對(duì)是一套值得分享和大家收藏的Bootstrap學(xué)習(xí)教程,完整的知識(shí)體系,系統(tǒng)的學(xué)習(xí)資料,幫助大家開啟Bootstrap學(xué)習(xí)之旅,享受Bootstrap帶給大家的奇妙樂趣2016-05-05