未封装的Ajax
$.ajax({
type: "POST",
url: 'http://192.168.1.144:8089/hello/test',
dataType: "json",
data: {
name: 'hh'
},
success: function (data) {
$.hideLoading();
console.log(data);
}
});
一、MyAjax.js
/*
*封装一个自己的ajax函数
*有5个参数,最后一个参数可选
*
* @param method(必选) 请求类型 get 和 post
* @param url(必选) 请求的url地址 相同域名下的页面(此函数不支持跨域请求)
* @param data(必选) 请求协带的数据 以js对象的形式定义,如:{name:'张三'}
* @param callback(必选) 回调函数,可接收一个参数,这个参数就是服务器响应的数据
* @param type(可选) 指定服务器响应的数据类型(可选值:json,xml,text),如果是json模式,则使用json解析数据,默认为text普通字符串
*调用方法:MyAjax('post','../controller/send',{name:'张三',age:16},function(res){
* console.log(res);
*},'json');
*
*/
function MyAjax(method, url, data, callback, type) {
//创建兼容XMLHttpRequest 对象:用于在后台与服务器交换数据。
var xmlhttprequest;
if (window.XMLHttpRequest) {//IE7+, Firefox, Chrome, Opera, Safari
xmlhttprequest = new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttprequest = new ActiveXObject("Microsoft.XMLHTTP");
}
//给请求添加状态变化事件处理函数
xmlhttprequest.onreadystatechange = function () {
//判断状态码
//xmlhttprequest.status响应的 HTTP 状态,200表示响应成功
//xmlhttprequest.readyState该属性表示请求/响应过程的当前活动阶段
// 0 :未初始化。尚未调用 open() 方法。
// 1 :启动。已经调用 open() 方法,但尚未调用 send() 方法。
// 2 :发送。已经调用 send() 方法,但尚未接收到响应。
// 3 :接收。已经接收到部分响应数据。
// 4 :完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
if (xmlhttprequest.status == 200 && xmlhttprequest.readyState == 4) {
//根据type参数,判断返回的内容需要进行怎么样的处理
if (type == 'json') {
//获得json形式的响应数据,并使用parse方法解析
var res = JSON.parse(xmlhttprequest.responseText);
} else if (type == 'xml') {
//获得XML形式的响应数据
var res = responseXML;
} else {
//获得字符串形式的响应数据
var res = xmlhttprequest.responseText;
}
//调用回调函数,并将响应数据传入回调函数
callback(res);
}
};
//判断data是否有数据
var param = '';
//这里使用stringify方法将js对象格式化为json字符串
if (JSON.stringify(data) != '{}') {
url += '?';
for (var i in data) {
param += i + '=' + data[i] + '&'; //将js对象重组,拼接成URL参数存入param变量中
}
//使用slice函数提取一部分字符串,这里主要是为了去除拼接的最后一个&字符
//slice函数:返回一个新的字符串。包括字符串从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。
param = param.slice(0, param.length - 1);
}
//判断method是否为get
if (method == 'get') {
//是则将数据拼接到url后面
url = url + param;
}
//初始化请求 async=true为异步(默认),即Ajax与后面的函数可以同时进行,
//async=false为同步,当执行当前AJAX的时候会停止执行后面的JS代码,直到AJAX执行完毕后时,才能继续执行后面的JS代码。
xmlhttprequest.open(method, url, true);
//如果method为post
if (method == "post") {
xmlhttprequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//发送请求
xmlhttprequest.send(param);
} else {
//发送请求
xmlhttprequest.send(null);
}
}
二、调用方法:
<script>
/*所传参数固定位置,第一个传method,第二个传url,第三个传data,第四个为callback回调函数,第五个为dataType*/
MyAjax('post', 'http://192.168.1.144:8089/hello/test', { name: 'hh' }, function (res) {
$.hideLoading();
console.log(res);
}, 'json');
</script>