用JS寫(xiě)的一個(gè)Ajax庫(kù)(實(shí)例代碼)
myajax是一個(gè)用js編寫(xiě)的一個(gè)跨瀏覽器的ajax庫(kù),支持get, post, jsonp請(qǐng)求,精巧,簡(jiǎn)單。
一、發(fā)送GET請(qǐng)求:
myajax.get({ <span style="white-space:pre"> </span>data: {}, //參數(shù) url: "", //請(qǐng)求地址 //發(fā)生錯(cuò)誤是調(diào)用 error: function(data) { }, //請(qǐng)求成功調(diào)用 success: function(data){ <span style="white-space:pre"> </span>//eval(data); 將字符串轉(zhuǎn)換成json } });
二、發(fā)送POST請(qǐng)求:
myajax.post({ data: {}, //參數(shù) url: "", // //發(fā)生錯(cuò)誤是調(diào)用 error: function(data) { }, //請(qǐng)求成功調(diào)用 success: function(data){ //eval(data); 將字符串轉(zhuǎn)換成json } });
三、發(fā)送JSONP請(qǐng)求:
myajax.getJSONP({ //參數(shù) data: { }, url: "", //請(qǐng)求地址 //請(qǐng)求成功調(diào)用 success: function(data) { }, //發(fā)生錯(cuò)誤時(shí)調(diào)用 error: function() { } });
源碼:
var myajax = { post: function(params){ var xmlhttp = this.createXMLHttpRequest(); if (xmlhttp != null) { var async = true; if (typeof params.async != "undefined") async = params.async; var data = null; if (typeof params.data != "undefined") data = params.data; var url = ""; if (typeof params.url != "undefined") url = params.url; if (url == null || url.length == 0) return; xmlhttp.open("POST", url, async); if (async){ xmlhttp.onreadystatechange = function(){ if (this.readyState==4){ if (this.status==200){ if (typeof params.success != "undefined") { params.success(xmlhttp.responseText); } } else { if (typeof params.error != "undefined") { params.error(xmlhttp.status + xmlhttp.statusText); } console.error(url + ": " + xmlhttp.status); } } }; } xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); var param = ""; for (var prop in data) { param += prop + "=" + data[prop] + "&"; } param = param.substring(0, param.length - 1); xmlhttp.send(param); if (!async) { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) if (typeof params.success != "undefined") { params.success(xmlhttp.responseText); } else { if (typeof params.error != "undefined") { params.error(xmlhttp.status + xmlhttp.statusText); } console.error(url + ": " + xmlhttp.status); } } } }, get: function(params){ var xmlhttp = this.createXMLHttpRequest(); if (xmlhttp != null) { var async = true; if (params.async != undefined) async = params.async; var url = ""; if (params.url != undefined) url = params.url; if (url == null || url.length == 0) return; if (params.data != null) { var data = params.data; var paramPrefix = url.indexOf("?") == -1 ? "?" : "&"; url = url + paramPrefix; for (var prop in data) { url += prop + "=" + data[prop] + "&"; } url = url.substring(0, url.length - 1); } xmlhttp.open("GET", url, async); if (async){ xmlhttp.onreadystatechange = function(){ if (this.readyState==4){ if (this.status==200){ if (typeof params.success != "undefined") { params.success(xmlhttp.responseText); } } else { if (typeof params.error != "undefined") { params.error(xmlhttp.status + xmlhttp.statusText); } console.error(url + ": " + xmlhttp.status); } } }; } xmlhttp.send(null); if (!async) { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) if (typeof params.success != "undefined") { params.success(xmlhttp.responseText); } else { if (typeof params.error != "undefined") { params.error(xmlhttp.status + xmlhttp.statusText); } console.error(url + ": " + xmlhttp.status); } } } }, createXMLHttpRequest: function(){ if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else if (window.ActiveXObject) { //code for IE5 and IE6 return new ActiveXObject("Microsoft.XMLHTTP"); } return null; }, getJSONP: function(params) { var url = null; if (typeof params.url != "undefined") { url = params.url; } if (url == null) { return; } var ff = "" + new Date().getTime() + (parseInt(Math.random() * 10000000000)); eval("jsonpCallback_" + ff + "=" + function(data){ if (typeof params.success != "undefined") { params.success(data); } }); //根據(jù)url中是否出現(xiàn)過(guò) "?" 來(lái)決定添加時(shí)間戳參數(shù)時(shí)使用 "?" 還是 "&" var paramPrefix = url.indexOf("?") == -1 ? "?" : "&"; url = url + paramPrefix + "jsonpCallback=" + "jsonpCallback_" + ff; var param = ""; if (typeof params.data != "undefined" && params.data != null) { var data = params.data; for (var prop in data) { param += prop + "=" + data[prop] + "&"; } param = param.substring(0, param.length - 1); } if (param.length > 0) url = url + "&" + param; var script = document.createElement("script"); document.body.appendChild(script); script.src = url; script.charset ="UTF-8"; // for firefox, google etc. script.onerror = function() { if (typeof params.error != "undefined") { params.error(); } } script.onload = function() { document.body.removeChild(script); } // for ie script.onreadystatechange = function() { if (this.readyState == "loaded" || this.readyState == "complete") { document.body.removeChild(script); } } } };
以上這篇用JS寫(xiě)的一個(gè)Ajax庫(kù)(實(shí)例代碼)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
JSON基本語(yǔ)法及與JavaScript的異同實(shí)例分析
這篇文章主要介紹了JSON基本語(yǔ)法及與JavaScript的異同,結(jié)合實(shí)例形式分析了json簡(jiǎn)單值、對(duì)象、數(shù)組三種類型值使用技巧,需要的朋友可以參考下2019-01-01理解JavaScript設(shè)計(jì)模式中的建造者模式
這篇文章主要介紹了理解JavaScript設(shè)計(jì)模式中的建造者模式,文章基于JavaScript的相關(guān)資料展開(kāi)箱子內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-04-04Javascript/Jquery——簡(jiǎn)單定時(shí)器的多種實(shí)現(xiàn)方法
本文為大家詳細(xì)介紹下使用Javascript/Jquery實(shí)現(xiàn)簡(jiǎn)單的定時(shí)器,方法有多種,大家可以根據(jù)自己的喜好自由選擇,希望對(duì)大家有所幫助2013-07-07javascript中一些數(shù)組常用的API總結(jié)
Js中數(shù)組是一個(gè)重要的數(shù)據(jù)結(jié)構(gòu),它相比于字符串有更多的方法,本篇文章總結(jié)了一些數(shù)組中常用的API,我們把它們分成兩類,一類是會(huì)改變?cè)紨?shù)組,一類是不會(huì)改變?cè)紨?shù)組,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09使用svg實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果
這篇文章主要為大家詳細(xì)介紹了如何使用svg實(shí)現(xiàn)動(dòng)態(tài)時(shí)鐘效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫(huà)效果封裝示例
這篇文章主要介紹了JS實(shí)現(xiàn)勻速與減速緩慢運(yùn)動(dòng)的動(dòng)畫(huà)效果,結(jié)合實(shí)例形式分析了JavaScript封裝結(jié)合定時(shí)器的頁(yè)面元素動(dòng)態(tài)變換效果動(dòng)畫(huà)相關(guān)操作技巧,需要的朋友可以參考下2018-08-08關(guān)于Error:Unknown?option?'--inline'報(bào)錯(cuò)的解決辦法
這篇文章主要給大家介紹了關(guān)于Error:Unknown?option?'--inline'報(bào)錯(cuò)的解決辦法,文中將解決的辦法介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09原生js實(shí)現(xiàn)購(gòu)物車邏輯和功能
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)購(gòu)物車邏輯和功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-09-09