概述
- 浏览器提供的方法,可以实现页面无刷新更新数据,提高用户浏览网站应用的体验
应用场景
- 页面上拉加载更多数据
- 列表数据无刷新分页
- 表单项离开焦点数据验证
- 搜索框提示文字下拉列表
运行环境
- Ajax技术需要运行在网站环境中才能生效
- Node创建服务器,实现静态资源访问功能
//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');
Ajax 运行原理
Ajax的实现步骤
- 创建
Ajax
对象
var xhr = new XMLHttpRequest();
- 告诉
Ajax
请求地址
xhr.open('get', 'http://www.example.com');
- 发送请求
xhr.send();
- 获取服务器给客户端的响应数据
xhr.onload = function () {
console.log(xhr.reponseText);
}
例:
- 客户端
var xhr = new XMLHttpRequest();
xhr.open('get', 'http://localhost:3000/first');
xhr.send();
xhr.onload = function () {
console.log(xhr.reponseText);
}
- 服务器端
//引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//创建web服务器
const app = express();
//静态资源访问服务功能
app.use(express.static(path.join(__dirname, 'public')));
app.get('/first', (req, res) => {
res.send('Hello Ajax');
});
//监听端口
app.listen(3000);
//控制台提示输出
console.log('服务器启动成功');
- 控制台输出:
Hello Ajax
服务器端响应的数据格式
- 服务器端大多数情况下会以JSON对象作为响应数据的格式
- 当客户端拿到响应数据时,要将JSO数据和HTML字符进行拼接,然后将拼接的结果展示在页面中
- 在 http 请求与响应的过程中,无论时请求还是响应内容,如果是对象类型,最终都会被转换成对象字符串进行传输
- json 字符串转换为 json 对象
JSON.parse();
请求参数传递
- GET请求
xhr.open('get', 'http://www.example.com?name=XXX&age=20');
- POST请求
xhr.setRequestHeader('Context-Type', 'application/x-www-form-urlencoded');
xhr.send('name=XXX&age=20');
运行原理及实现
- 请求报文:在HTTP请求和响应的过程中传递的数据块就是
报文
,包括要传送的数据和一些附加信息,这些数据和信息要遵守规定好的格式
- 请求参数的格式:
application/x-www-form-urlencoded
或application/json
- 将JSON对象转换为JSON字符串
JSON.stringify();
get
请求是不能提交JSON
对象数据格式的,传统网站的表单提交也是不支持JSON
对象数据格式的
获取服务器端的响应
Ajax 状态码
- 0:请求未初始化(还没有调用
open()
) - 1:请求已经建立,但是还没有发送(还没有调用
send()
) - 2:请求已经发送
- 3:请求正在处理中,通常响应中已经有部分数据可以用了
- 4:响应已经完成,可以获取并使用服务器的响应了
获取 Ajax 状态码
- 获取 Ajax 状态码
shr.readyState();
- onreadystatechange 事件:当
Ajax状态码
发生变化时将自动触发该事件
两种方式的比较
区别 | onload 事件 | onreadystatechange 事件 |
---|---|---|
是否兼容 IE 低版本 | 不兼容 | 兼容 |
是否需要判断 Ajax 状态码 | 不需要 | 需要 |
被调用次数 | 一次 | 多次 |
执行效率 | 高 | 不高 |
Ajax 错误处理
- 网络畅通,服务器端能接收到请求,服务器端返回的结果不是预期结果
判断服务器端返回的状态码,分别进行处理
xhr.status();//获取http状态码
- 网络畅通,服务器端没有接收到请求,返回404状态码
检查请求地址是否错误
- 网络畅通,服务器端能接收到请求,服务器端返回500状态码
服务器端错误
- 网络中断,请求无法发送到服务器端
不会触发
xhr.onload
事件,会触发xhr.onerror
事件,在 onerror 事件处理函数中对错误进行处理
低版本IE浏览器的缓存问题
问题:
在低版本的IE浏览器中,Ajax请求有严重的缓存问题,请求的地址不发生变化的情况下,只有第一次请求会真正发送到服务器,后续的请求都会从浏览器的缓存中获取结果。即使服务器端的数据更新了,客户端拿到的依然是缓存中的旧数据
解决方案:
在请求地址的后面加请求参数,保证每一次请求中的请求参数的值不相同
xhr.open('get', 'http://www.example.com?t=' + Math.random());
或者
xhr.open('get', 'http://www.example.com?t=' + Date.now());
Ajax 封装
- 基本封装函数
function ajax(options) {
//创建Ajax对象
var xhr = new XMLHttpRequest();
//配置Ajax对象
xhr.open(options.type, options.url);
//发送请求
xhr.send();
//监听xhr对象的onload事件
//当xhr对象接收完响应数据后触发
xhr.onload = function () {
optipns.success(xhr.reponseText);
}
}
ajax({
type:'get',
url:'http://www.example.com',
sucess:function(data){
console.log(data);
}
});
- 带请求参数的封装函数
- 请求参数的位置问题:
将请求参数传递到 Ajax 函数内部,在函数内部根据请求方式的不同将请求参数放在不同的位置
注
get:放在请求地址的后面
post:放在send
方法中- 请求参数的格式问题
application/x-www-form-urlencoded
:参数名称=参数值&参数名称=参数值
application/json
:{name: ‘zhangsan’, age:20}
function ajax(options) {
//存储默认值
var defaults = {
type: 'get',
url: '',
data: {},
header: {
'Content-Typr': 'application/x-www-form-urlencoded'
},
sucess: function () {],
error: function () {}
};
//使用options对象中的属性覆盖defaults对象中的属性
Object.assign(defaluts, 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);
//配置Ajax对象
xhr.open(defaults.type, defaults.url);
if(defaults.type == 'post') {
var contentType = defaults.header['Content-Type'];
xhr.setRequestHeader('Content-Type', 'appllication/x-wwww-form-urlencoded');
//判断请求参数的类型
if(ContentType == 'application/json') {
xhr.send(JSON.stringify(defaults.data));
} else {
xhr.send(params);
}
} else {
xhr.send();
}
//发送请求
xhr.send();
//监听xhr对象的onload事件
//当xhr对象接收完响应数据后触发
xhr.onload = function () {
var contentType = xhr.getPesponseHeader('Content-Type');
var reponseText = xhr.reponseText;
if(contentType.includes('application/json')) {
reponseText = JSON.parse(reponseText);
}
if(xhr.status == 200) {
defaults.sucess(xhr.responseText, xhr);
} else {
v.error(xhr.reponseText, xhr);
}
}
}
ajax({
type:'get',
url:'http://www.example.com',
header: {
'Content-Type':'x-www-form-unlencoded';
},
data: {name: 'zhangsan', age: 20},
sucess:function(data, xhr){
console.log(data);
},
error:function(data, xhr){
}
});