1.Ajax的实现步骤
1.1 创建Ajax对象
var xhr = new XMLHttpRequest();
1.2 告诉Ajax请求地址以及请求方式
xhr.open('get','http://www.example.com')
1.3 发送请求
xhr.send()
1.4 获取服务器端给客户端的响应数据
xhr.onload = function() {
console.log(xhr.responseText);
}
2.服务器端响应的数据格式
- 在真实的项目中,服务器端大多数情况下会以JSON对象作为响应数据的格式。当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中。
- 在http请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为字符串进行传输
JSON.parse()//将json字符串转换为json对象
3.请求参数传递
3.1 传统网站表单提交
<form method="get" action="http://www.example.com">
<input type = "text" name="username">
<input type = "password" name="password">
</form>
<!--http://www.example.com?name=zhangsan&password=12345-->
3.2 Get请求方式
xhr.open('get','http://www.example.com?name=zhangsan&password=12345');
<form action="">
<input type="text" name="username" id="username">
<input type="password" name="pssword" id="password">
<input type="button" id="button" value="提交">
</form>
<script>
var btn = document.getElementById('button'),
user = document.getElementById('username'),
psd = document.getElementById('password');
btn.onclick = function() {
var xhr = new XMLHttpRequest(),
userN = user.value,
psD = psd.value,
params = 'username' + userN + '&password' + psD;
xhr.open('get','http://localhost:3000/get?' + params);
xhr.send();
xhr.onload =function() {
console.log(xhr.responseText);
}
}
</script>
3.3 POST请求方式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('name=zhangsan&password=12345')
<form action="">
<input type="text" name="username" id="username">
<input type="password" name="pssword" id="password">
<input type="button" id="button" value="提交">
</form>
<script>
var btn = document.getElementById('button'),
user = document.getElementById('username'),
psd = document.getElementById('password');
btn.onclick = function() {
var xhr = new XMLHttpRequest(),
userN = user.value,
psD = psd.value,
params = 'username=' + userN + '&password=' + psD;
xhr.open('post','http://localhost:3000/post');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(params);
xhr.onload =function() {
console.log(xhr.responseText);
}
}
</script>
3.4 请求参数的格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
1.application/x-www-form-urlencoded
name=zhangsan&age=20&sex=male
2.application/json
xhr.setRequestHeader('Content-Type','application/json')
{name:'zhangsan',age:20,sex:'male'}
在请求头中指定Content-Type属性的值是application/json,告诉服务器当前的请求格式是json
JSON.stringify();//将json字符串转换为json对象
4.AJAX错误处理
网络畅通,服务器端能够接收到请求,服务器端返回的结果不是预期结果
-可以判断服务器端返回的状态码,分别进行处理。xhr.status获取http状态码if(xhr.status == 400) { alert('error') }
- 网络畅通,服务器端没有接收到请求,返回404状态码
-检查请求地址是否错误 - 网络畅通,服务器端能够接收到请求,服务器返回500状态码
-服务器端错误 - 网络中断、请求无法发送到服务器端
-会触发xhr对象下面的onerror事件,在onerror事件处理函数中对错误进行处理
5.低版本IE浏览器的缓存问题
问题:在低版本IE浏览器中,Ajax请求有严重的缓存问题,即在请求地址不发生变化的情况下,只有第一次请求会真正发送到服务器端,后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了,客户端依然拿到的是缓存中的旧数据
解决方案:在请求地址后面加请求参数,保证每一次请求中的请求参数的值不相同
xhr.open('get','http://www.exmaple.com?t=' + Math.random());
6.Ajax封装
问题:发送一次请求代码过多,发送多次请求代码冗余且重复
解决方案:将请求代码封装到函数中,发送请求时调用函数即可
const ajax = options => {
//存储的默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Type': 'application/json'
},
success: function() {},
error: function() {}
}
//对象覆盖
Object.assign(defaults,options);
//创建ajax对象
var xhr = new XMLHttpRequest();
//拼接传递参数
var params = '';
for(var attr in defaults.data) {
params += attr + '=' + defaults.data[attr] + '&';
}
//将&截取掉
params = params.substr(0,params.length - 1);
//判断请求方式
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'];
//设置参数格式类型
xhr.setRequestHeader('Content-Type', contentType);
if(contentType == 'application/json') {
xhr.send(JSON.stringify(defaults.data));
} else {
xhr.send(params);
}
} else {
xhr.send();
}
//监听xhr对象下面的onload事件
xhr.onload = function() {
//获取响应头中的数据
var contentType = xhr.getResponseHeader('Content-Type');
var responseText = xhr.responseText;
if(contentType.includes('application/json')) {
responseText = JSON.parse(responseText);
}
if(xhr.status == 200){
//http状态码等于200成功
defaults.success(responseText,xhr);
} else {
//失败
defaults.error(responseText,xhr);
}
}
}