1、原生的ajax
/**
*
* @param callback 回调函数,处理响应结果
* @param method 请求方式
* @param url 请求地址
* @param async 同步/异步(true:异步,false:同步)
* @param params 参数(`txtUser=xxx&txtPwd=xxx`)
*/
function ajax(obj) {
obj.method = (obj.method || 'get').toLowerCase();//忽略请求方式的大小写
//设置同步异步值,如果没有,则为true
obj.async=obj.async||true;
// 1、创建一个XMLHttpRequest对象(考虑了兼容性)
let xhttp = new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
// 2、设置事件处理程序
xhttp.onreadystatechange = function () {
if (xhttp.readyState == 4 && xhttp.status == 200) {
obj.callback(xhttp.responseText);
}
};
if (obj.method == 'get' && obj.params) {
obj.url=obj.url+'?'+obj.params
}
//3、设置请求相关的数据
xhttp.open(obj.method, obj.url, obj.async);
if (obj.method == 'post') {
//设置请求头
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
//4、发送请求
xhttp.send(obj.params);//post请求
}else {
//4、发送请求
xhttp.send()
}
}
2、封装的ajax,挂载到window上
在原生的ajax基础上:
1、支持用户传输数据时可以传对象
2、响应回来的数据,转成json对象
(function () {
/**
* ajax请求封装
* @param url 请求地址
* @param method 请求方式
* @param data 传递的参数
* @param async 同步/异步,默认为true(异步)
* @param success 响应成功的处理函数
* @param dataType 参数类型
*/
function ajax({url, method, data, async, success, dataType}) {
// 参数处理
method = (method || 'get').toLocaleLowerCase();//请求方式默认值设置,并对对请求方式大小写进行处理
async = async || true;//同步or异步,默认为true(异步)
dataType = dataType || 'json';
success = success || function () {
}
//1、创建xhr对象(考虑IE的兼容性)
let xhrHttp = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
// 参数处理:如果是get请求,参数要加载url后面
data = _objectToString(data);
// 判断是否为get请求,如果是,将data和url进行拼接
if (method == 'get') {//toLocaleLowerCase()统一转为小写
url = url + '?' + data
}
//2、设置请求
xhrHttp.open(method, url, async)
//3、设置事件处理程序
xhrHttp.onreadystatechange = function () {
if (xhrHttp.readyState !== 4) return;
if (xhrHttp.status >= 200 && xhrHttp.status <= 300) {
//响应结果进行处理
success(_dataOperation(dataType, xhrHttp));
}
}
//4、发送请求
// 判断是否为post请求,如果是,则设置请求头
if (method == 'post') {
xhrHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhrHttp.send(data)
} else {
xhrHttp.send()
}
}
/**
* 将请求传递的参数进行处理
* @param data
* @returns {string}
* @private
*/
function _objectToString(data) {
if (typeof data == 'object') {//传递的参数是对象
let arr = [];
for (let key in data) {
arr.push(key + '=' + data[key])//通过'='链接对象中的键名和键值,并push进数组
}
data = arr.join('&');//通过'&'连接成字符串
}
return data;
}
/**
* 对响应结果的数据进行处理
* @param dataType 参数类型
* @param xhrHttp
* @returns {string|Document|any}
* @private
*/
function _dataOperation(dataType, xhrHttp) {
if (dataType == 'json') {//默认返回的是JSON格式
return JSON.parse(xhrHttp.responseText);
} else if (dataType == 'text') {
return xhrHttp.responseText
} else if (dataType == 'xml') {
return xhrHttp.responseXML
} else {
return xhrHttp.responseText
}
}
function getJSON(url, data, success) {
get(url, data, success, 'json')
}
function get(url, data, success, dataType) {
data = data || '';
let obj = {
method: 'get',
url: url,
data,
}
ajax(obj)
}
function post(url, data, success, dataType) {
data = data || '';
let obj = {
method: 'post',
url: url,
data,
}
ajax(obj)
}
window.juqery = $ = {ajax, getJSON, get, post}
})();
//使用封装的ajax请求
$.ajax({
url:"xxx",
method:"xxx",
...
success:(res)=>{
}
})