用JS寫的一個Ajax庫(實例代碼)
更新時間:2016年08月06日 09:35:53 投稿:jingxian
下面小編就為大家?guī)硪黄肑S寫的一個Ajax庫(實例代碼)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
myajax是一個用js編寫的一個跨瀏覽器的ajax庫,支持get, post, jsonp請求,精巧,簡單。
一、發(fā)送GET請求:
myajax.get({
<span style="white-space:pre"> </span>data: {}, //參數(shù)
url: "", //請求地址
//發(fā)生錯誤是調(diào)用
error: function(data) {
},
//請求成功調(diào)用
success: function(data){
<span style="white-space:pre"> </span>//eval(data); 將字符串轉(zhuǎn)換成json
}
});
二、發(fā)送POST請求:
myajax.post({
data: {}, //參數(shù)
url: "", //
//發(fā)生錯誤是調(diào)用
error: function(data) {
},
//請求成功調(diào)用
success: function(data){
//eval(data); 將字符串轉(zhuǎn)換成json
}
});
三、發(fā)送JSONP請求:
myajax.getJSONP({
//參數(shù)
data: {
},
url: "", //請求地址
//請求成功調(diào)用
success: function(data) {
},
//發(fā)生錯誤時調(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)過 "?" 來決定添加時間戳參數(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寫的一個Ajax庫(實例代碼)就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
Javascript/Jquery——簡單定時器的多種實現(xiàn)方法
本文為大家詳細(xì)介紹下使用Javascript/Jquery實現(xiàn)簡單的定時器,方法有多種,大家可以根據(jù)自己的喜好自由選擇,希望對大家有所幫助2013-07-07
javascript中一些數(shù)組常用的API總結(jié)
Js中數(shù)組是一個重要的數(shù)據(jù)結(jié)構(gòu),它相比于字符串有更多的方法,本篇文章總結(jié)了一些數(shù)組中常用的API,我們把它們分成兩類,一類是會改變原始數(shù)組,一類是不會改變原始數(shù)組,感興趣的小伙伴可以學(xué)習(xí)一下2023-09-09
關(guān)于Error:Unknown?option?'--inline'報錯的解決辦法
這篇文章主要給大家介紹了關(guān)于Error:Unknown?option?'--inline'報錯的解決辦法,文中將解決的辦法介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09

