传统网站中存在的问题
1网速慢的情况下，页面加载时间长，用户只能等待
ajax
概述：他是浏览器提供的一套方法，可以实现页面刷新更新数据，提高用户浏览器应用的体验
缺点：没有浏览历史，不能后退
存在跨域问题
SEO不友好
ajax 应用场景
1 页面上拉加载，更多的数据
2 列表数据无刷新分页
3 表单离开焦点数据验证
4 搜索框 提示文字下拉列表
ajax 的运行环境
ajax技术需要运行在网站环境中才能生效
ajax实现步骤
//1 创建对象
//2 初始化，设置请求方法和 url
//3 发送
//4 事件绑定 处理服务器端返回的结果
express安装和基本使用
1 使用
express 右键文件选择集成中端打开，打开写有express的js文件
2 ajax的请求类型方法 get post all
//1引入express
const express = require('express');
//2创建应用对象
const app = express();
//3创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
//get
app.get('/server',(request,response) =>{
//设置响应头 这是允许跨域
response.setHeader('Access-Control-Allow-Origin','*');
//设置响应体
response.send('Hello AJAX GET')
});
//post
app.post('/server',(request,response) =>{
response.setHeader('Access-Control-Allow-Origin','*');
response.send('Hello AJAX POST')
});
//all all可以接受任意类型请求
app.all('/server',(request,response) =>{
response.setHeader('Access-Control-Allow-Origin','*');
//响应头，设置什么类型的响应头都能接受到
response.setHeader('Access-Control-Allow-Headers','*');
response.send('Hello AJAX POST')
});
//json数据处理
app.all('/json-server',(request,response) =>{
response.setHeader('Access-Control-Allow-Origin','*');
//响应头，设置什么类型的响应头都能接受到
response.setHeader('Access-Control-Allow-Headers','*');
//响应一个数据
const data = {
name:'牛虎'
}
//数据进行转换 send(字符串)
let str = JSON.stringify(data);
//响应体
response.send(str);
});
//4监听端口启动服务
app.listen(8000,()=>{
console.log("服务器已启动，8000端口监听中....");
})2.1 get请求
<body>
<button class="btn">点击发送get请求</button>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<script>
//获取button按键
const btn = document.querySelector('.btn');
//获取文本框
const te = document.querySelector('#text');
//绑定点击事件
btn.addEventListener('click',function(){
//1 创建对象
const xhr = new XMLHttpRequest();
//2 初始化，设置请求方法和 url
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300');
//3 发送
xhr.send();
//4 事件绑定 处理服务器端返回的结果
/*
on when 当。。。。。的是时候
readystate 是xhr 对象中的属性，表示状态 0 1 2 3(返回部分结果) 4(服务端返回所有的结果)
change 改变
*/
xhr.onreadystatechange = function(){
//判断（服务器端返回了 所有的结果）
if(xhr.readyState ===4){
//判断状态码 200 404 403 401 500
//响应状态码 2** 2开头的都是代表成功的
if(xhr.status >= 200 && xhr.status < 300){
//处理结果 行 头 空行 体
//1 响应行
console.log(xhr.status);//状态码
console.log(xhr.statusText);//状态字符串
console.log(xhr.getAllResponseHeaders());//所有响应头
console.log(xhr.response);//响应体
te.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
2.2post请求
<body>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<script>
const test = document.querySelector('#text');
test.addEventListener('mouseover',function(){
//1 创建对象
const xhr = new XMLHttpRequest();
//2 初始化，设置请求方法和 url
xhr.open('POST',"http://127.0.0.1:8000/server");
//设置请求头，固定写法 content-type设置请求体内容类型 application/x-www-form-urlencoded参数查询字符串类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//3 发送
//xhr.send()
xhr.send('2133132156123niuhu');//设置请求体213313256123niuhu
//4 事件绑定 处理服务器端返回的结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
test.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
2.3 all（可以接受所有类型）请求
<body>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<script>
const test = document.querySelector('#text');
test.addEventListener('mouseover',function(){
//1 创建对象
const xhr = new XMLHttpRequest();
//2 初始化，设置请求方法和 url
xhr.open('POST',"http://127.0.0.1:8000/server");
//设置请求头，固定写法 content-type设置请求体内容类型 application/x-www-form-urlencoded参数查询字符串类型
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//自定义响应头类型，值，同时要在server.js设置 //响应头，设置什么类型的响应头都能接受到 response.setHeader('Access-Control-Allow-Headers','*');
xhr.setRequestHeader('name','niuhu')
//3 发送
//xhr.send()
xhr.send('2133132156123niuhu');//设置请求体213313256123niuhu
//4 事件绑定 处理服务器端返回的结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
test.innerHTML = xhr.response;
}
}
}
});
</script>
</body>
2.4 json数据转换
<body>
<textarea name="" class="text" cols="30" rows="10"></textarea>
<button class="button">点击获取json</button>
<script>
const text = document.querySelector(".text");
const btn = document.querySelector(".button")
text.addEventListener("keydown",function(){
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET","http://127.0.0.1:8000/json-server");
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >=200 && xhr.status < 300){
text.innerHTML = xhr.response.name;
}
}
}
})
</script>
</body> 针对ie缓存机制 ajax解决方案，加一个参数 “+Date.now()”
刷新会按照当前的时间来更新