用JS写的一个Ajax库(实例代码)
更新时间：2016年08月06日 09:35:53 投稿：jingxian
下面小编就为大家带来一篇用JS写的一个Ajax库(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
myajax是一个用js编写的一个跨浏览器的ajax库，支持get, post, jsonp请求，精巧，简单。
一、发送GET请求：
myajax.get({
<span style="white-space:pre"> </span>data: {}, //参数
url: "", //请求地址
//发生错误是调用
error: function(data) {
},
//请求成功调用
success: function(data){
<span style="white-space:pre"> </span>//eval(data); 将字符串转换成json
}
});
二、发送POST请求：
myajax.post({
data: {}, //参数
url: "", //
//发生错误是调用
error: function(data) {
},
//请求成功调用
success: function(data){
//eval(data); 将字符串转换成json
}
});
三、发送JSONP请求：
myajax.getJSONP({
//参数
data: {
},
url: "", //请求地址
//请求成功调用
success: function(data) {
},
//发生错误时调用
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);
}
});
//根据url中是否出现过 "?" 来决定添加时间戳参数时使用 "?" 还是 "&"
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库(实例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
javascript parseInt() 函数的进制转换注意细节
parseInt(string, radix) 有2个参数，第一个string 是传入的数值，第二个radix是 传入数值的进制，参数radix 可以忽略，默认为 10，各种进制的数转换为 十进制整数,接下来详细介绍，感兴趣的朋友可以了解下哦2013-01-01
本文介绍了使用clip()方法实现一个探照灯效果的实例，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了Object.keys 诡异特性示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
单元测试框架Jest搭配TypeScript的安装与配置方式
这篇文章主要介绍了单元测试框架Jest搭配TypeScript的安装与配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要介绍了JS中常用的正则表达式，都是我日常收集整理的，包括电话验证，数字验证，车牌号码验证，身份证号验证包括15位18位身份证验证，非常不错，具有参考借鉴价值，感兴趣的朋友一起看看吧2016-09-09
这篇文章主要介绍了Javascript 两种刷新方法以及区别和适用范围的相关资料,需要的朋友可以参考下2017-01-01
这篇文章主要介绍了javascript动画算法,实例分析了javascript实现动画效果的实现及使用技巧,需要的朋友可以参考下2015-07-07
这篇文章主要介绍了Paypal支付不完全指北，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-06-06
这篇文章主要介绍了详解ES6之async+await 同步/异步方案，本文以最简明的方式来疏通 async + await，有兴趣的可以了解下2017-09-09
这篇文章主要介绍了JS+DIV+CSS实现的经典标签切换效果代码,涉及JavaScript基于鼠标事件针对页面元素动态变换的实现技巧,页面美观实用,需要的朋友可以参考下2015-09-09
最新评论