传统网站中存在的问题
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()”
刷新会按照当前的时间来更新
?