ajax代码实例 js,用JS写的一个Ajax库(实例代码)

用JS写的一个Ajax库(实例代码)

发布于 2017-03-08 11:05:41 | 89 次阅读 | 评论: 0 | 来源: 网友投递

JavaScript客户端脚本语言Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。

下面小编就为大家带来一篇用JS写的一个Ajax库(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

myajax是一个用js编写的一个跨浏览器的ajax库，支持get, post, jsonp请求，精巧，简单。

一、发送GET请求：

myajax.get({

data: {}, //参数

url: "", //请求地址

//发生错误是调用

error: function(data) {

},

//请求成功调用

success: function(data){

//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库(实例代码)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持phperz。

相关阅读:

用JS写的一个Ajax库(实例代码)

用js写的一个路由(简单实例)

用JS写的一个TableView控件代码

发一个自己用JS写的实用看图工具实现代码

使用原生js写的一个简单slider

纯css+js写的一个简单的tab标签页带样式

使用js写的一个简易的投票

用JS写的简单的计算器实现代码

兼容FireFox 用javascript写的一个画图函数

用js实现的一个根据内容自动生成表格的函数

用JS实现的一个include函数

用js实现的一个Flash滚动轮换显示图片代码生成器