Ajax是浏览器提供的一套方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验。
//Ajax 的实现步骤
// 1.创建ajax对象
var xhr = new XMLHttpRequest();
// 2.告诉Ajax对象要向哪发送请求,以什么方式发送请求
// 1)请求方式 2)请求地址
xhr.open('get', 'http://localhost:3000/first');
// 3.发送请求
xhr.send();
// 4.获取服务器端响应到客户端的数据
xhr.onload = function (){
console.log(xhr.responseText)
}
function ajax(options) {
//存储默认值
var defaults = {
type:'get',
url:'',
data:{},
header:{
'Content-Type': 'application/json'
},
success:function(){},
error:function(){},
}
//使用options对象中的属性覆盖default对象中的属性
Object.assign(defaults,options);
//1、创建ajax对象
var xhr = new XMLHttpRequest();
//请求参数位置的问题
//get 放在请求地址的后面 ;post 放在send方法中
//请求方式为get,请求参数位置 放在请求地址的后面 地址?参数=参数值&参数=参数值
// 拼接请求参数的变量
var params = '';
//循环用户传递进来的对象格式参数
for (var attr in defaults.data) {
// 将参数转换为字符串格式
params += attr + '=' + defaults.data[attr] + '&';
}
// 将参数最后面的&截取掉
// 当xhr对象接收完响应数据后触发
params = params.substr(0, params.length - 1);
// console.log(params);
//判断请求方式
if (defaults.type == 'get') {
defaults.url = defaults.url + '?' + params;
}
//配置ajax对象
xhr.open(defaults.type, defaults.url);
//如果请求方式是post
if (defaults.type == 'post') {
var contentType = defaults.header['Content-Type'];
console.log(contentType);
xhr.setRequestHeader('Content-Type', contentType);
// 判断用户希望的请求参数格式的类型
// 如果类型为json
if (contentType == 'application/json') {
// 向服务器端传递json数据格式的参数
//在函数内部对象数据类型转换为字符串数据类型更加方便
xhr.send(JSON.stringify(defaults.data));
} else {
//发送请求
xhr.send(params);
}
} else {
//发送请求
xhr.send();
}
//监听xhr对象下面的onload事件
//当xhr对象接收完响应数据后触发
//4、获取服务器端响应到客户端的数据
xhr.onload = function () {
//获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
// 服务器端返回的数据
var responseText = xhr.responseText;
// 如果响应类型中包含applicaition/json
if( contentType.includes('application/json')){
//json字符串转为json对象
responseText = JSON.parse(responseText);
}
//当http状态码 == 200的时候
if(xhr.status==200){
//请求成功
defaults.success(responseText,xhr);
}else{
//请求失败
defaults.error(responseText,xhr);
}
}
}
ajax({
url: 'http://localhost:3000/responseData',
success: function (data) {
console.log("success:");
console.log(data);
},
})