Ajax
是浏览器提供的一套方法,可以实现页面无刷新跟新数据,提高用户浏览器网站应用的体验
应用场景:
1 页面上拉加载更多数据
2 列表数据无刷新分页
3 表单项离开焦点数据验证
4 搜索框提示文字下拉列表
运行环境
Ajax技术需要运行在网站环境中才能生效
app.js
引入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运行原理
实现步骤:
1 创建Ajax对象
var xhr=new XMLHttpRequest();
2 告诉Ajax请求地址以及请求方式:
xhr.open('get','http://www.example.com');
3 发送请求:
xhr.send();
4 获取服务器端给与客户端的响应数据
xhr.οnlοad=function(){
console.log(xxhr.responseText);
}
启动服务器:
服务器文件夹下:cmd–>nodemon app.js–>服务器启动成功;
配置文件:
服务器端响应的数据格式:
服务器端大多数情况下会以JSON对象作为响应数据的格式,当客户端拿到响应数据时,要将JSON数据和HTML字符串进行拼接,然后将拼接的结果展示在页面中。
客户端处理json字符串:
请求参数传递(get请求):
请求参数传递(post请求):
客户端代码:
服务器端代码:
向服务器端传送json格式数据:
Ajax状态码
0 :请求未初始化(还没调用open())
1 :请求已经建立,但是还没有发送(还没调用send())
2 :请求已经发送
3 :请求正在处理中,通常响应中已经有部分数据可以用了
4 :响应已经完成,可以获取并使用服务器的响应了
Ajax错误处理:
低版本IE浏览器的缓存问题: