Ajax基础

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浏览器的缓存问题：