用原生js封装ajax,用原生js封装ajax

// ajax操作

/*options = {

type : "get|post", // 请求方式，默认 "get"

url : "xxx.php", // 请求资源的URL

async : true, // 是否异步请求，默认为 true

data : {}, // 向服务器传递的数据{username:"xiaoming", password:"abc", phone:"123"}

dataType : "text|json", // 预期从服务器返回的数据格式

success : function(data){},  // 请求成功执行的函数

error : function(errMsg){} // 请求失败执行的函数

}*/

function ajax(options) {

if (!options) // 未传递参数，结束函数执行

return;

// 获取请求的URL

var url = options.url;

if (!url) // 没有请求的服务器资源，结束函数执行

return;

// 获取请求方式

var method = options.type || "get";

// 是否异步

var async = options.async;

if (async === undefined)

async = true;

// 处理查询字符串

var queryString = null;

if (options.data) { // 有向服务器传递的数据，则连接查询字符串

queryString = [];

for (var attr in options.data) {

queryString.push(attr + "=" + options.data[attr]);

}

queryString = queryString.join("&");

}

// 如果是 get 提交数据，将数据用 ? 号串联在 url 中

if (method === "get" && queryString) {

url += "?" + queryString;

queryString = null;

}

// 创建核心对象

var xhr;

if (window.XMLHttpRequest)

xhr = new XMLHttpRequest();

else

xhr = new ActiveXObject("Microsoft.XMLHTTP");

// 建立连接

xhr.open(method, url, async);

// 如果要像表单一样POST提交数据，则设置请求头

if (method === "post")

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

// 发送请求

xhr.send(queryString);

if (async) { // 异步

// 处理响应

xhr.onreadystatechange = function(){

if (xhr.readyState === 4) {

if (xhr.status === 200) {

// 获取响应文本

var data = xhr.responseText;

// 判断预期返回的数据格式

if (options.dataType === "json")

data = JSON.parse(data);

// 请求成功时数据处理业务

options.success && options.success(data);

} else {

// 请求失败处理情况

options.error && options.error(xhr.statusText);

}

}

}

} else { // 同步

if (xhr.status === 200) {

// 获取响应文本

var data = xhr.responseText;

// 判断预期返回的数据格式

if (options.dataType === "json")

data = JSON.parse(data);

// 请求成功时数据处理业务

options.success && options.success(data);

} else {

// 请求失败处理情况

options.error && options.error(xhr.statusText);

}

}

}

//封装完成后，根据自身情况选择

// 用于处理get请求

function get(url, data, success, dataType) {

ajax({

type : "get",

url : url,

data : data,

dataType : dataType,

success : success

});

}

// 用于处理post请求

function post(url, data, success, dataType) {

ajax({

type : "post",

url : url,

data : data,

dataType : dataType,

success : success

});

}

// 用于处理get请求，响应数据的格式为json格式

function getJSON(url, data, success) {

ajax({

type : "get",

url : url,

data : data,

dataType : "json",

success : success

});

}