目录
1.1、Ajax简介
1.2、XML简介
1.3、AJAX的特点
1.3.1优点
1.3.2缺点
1.4HTTP协议简介
1.4.1 请求报文:
1.4.2 响应报文
1.5 NodeJS安装
1.6 express基本使用
1.6.1 安装
启动
1.7AJAX基本使用
1.8 AJAX设置请求参数
1.9 AJAX发送post请求
1.10 AJAX设置post请求参数
1.11 AJAX中设置请求头信息
1.12 服务端响应JSON数据
1.13 自动重启工具安装 nodemon
1.14 AJAX-IE缓存问题解决
1.15 AJAX请求超时与网络异常处理
1.16 AJAX取消请求
1.17 AJAX请求重复发送问题
2.1Axios发送AJAX请求
2.2使用fetch函数返送AJAX请求
3.1 AJAX同源策略
1.1、Ajax简介
Ajax(Asynchronous JavaScript and XML),异步的JavaScript与XML
通过AJAX可以在浏览器中向服务器发送异步请求,最大优势:无刷新获取数据
1.2、XML简介XML(Extensible Markup Language),可扩展标记语言
XML 用来传输和存储数据
XML与HTML类似,不同的是HTML中有预定义标签,而XML中码云预定义的标签
1.3、AJAX的特点 1.3.1优点1)可以无需率先你页面而与服务器端进行通信
2)允许你根据用户时间来更新部分页面内容
1.3.2缺点1)没有浏览历史,不能回退
2)存在跨域问题(同源)
3)SEO不友好
1.4HTTP协议简介HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网服务器传输超文本到本地浏览器的传送协议。
1.4.1 请求报文:请求行 :POST/GET URL 协议/版本号
请求头 :
空行
请求体
1.4.2 响应报文请求行 :版本号 状态码 原因
请求头 :
空行
请求体:html内容
1.5 NodeJS安装node.js 安装详细步骤教程_程序员老油条的博客-CSDN博客_node.js
1.6 express基本使用 1.6.1 安装npm i express
//引入
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/',(request,response)=>{
//设置响应体
response.send('HELLO AJAX');
});
//监听端口启动服务
app.listen(8000,()=>{
console.log('服务已启动,8000端口监听中');
})
启动
1.7AJAX基本使用
点击按钮拿到响应体内容在方框中做出呈现
响应体内容为:
express.js
//引入
const express = require('express');
//创建应用对象
const app = express();
//创建路由规则
//request是对请求报文的封装
//response是对响应报文的封装
app.get('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO AJAX');
});
//监听端口启动服务
app.listen(8000,()=>{
console.log('服务已启动,8000端口监听中');
})
html
Document
1.8 AJAX设置请求参数
多个参数
1.9 AJAX发送post请求xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200&c=300')
鼠标经过方框即显示响应体内容
html
Document
js
app.post('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//设置响应体
response.send('HELLO AJAX POST');
});
1.10 AJAX设置post请求参数
在send请求中设置(跨域设置任何格式,前提是服务端能够处理)
方式一:
xhr.send('a=100&b=200&c=300');
方式二:
1.11 AJAX中设置请求头信息xhr.send('a:100&b:200&c:300');
方法一:固定写法
//创建对象
const xhr=new XMLHttpRequest();
//初始化
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')
//发送
xhr.send('a=100&b=200&c=300');
//设置请求头
//Content-type设置请求体内容的类型
//application/x-www-form-urlencoded参数查询字符串类型(固定写法)
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
方法二:自定义
xhr.setRequestHeader('name','zxz')
报错是因为name为自定义的而不是预定义的(浏览器有安全机制,不能发)如何解决?
后端解决:
//可以接收任意类型的请求
app.all('/server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//表示所有类型的请求头都能接收
response.setHeader('Access-Control-Allow-Headers','*')
//设置响应体
response.send('HELLO AJAX ALL');
});
1.12 服务端响应JSON数据
客户端发送请求,服务端返回结果通常为JSON格式数据 ,我们要处理这些数据
//可以接收任意类型的请求
app.all('/json-server',(request,response)=>{
//设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin','*')
//表示所有类型的请求头都能接收
response.setHeader('Access-Control-Allow-Headers','*')
//响应一个数据
const data={
name:'zxz'
}
//对对象进行字符串转换
let str=JSON.stringify(data);
//设置响应体
response.send(str);
});
前端处理这些数据
//手动对数据转换
let data=JSON.parse(xhr.response);
result.innerHTML=data.name
//自动设置响应体内容
xhr.responseType='json'
//创建对象
const xhr=new XMLHttpRequest();
//自动设置响应体内容
xhr.responseType='json'
//初始化
xhr.open('GET','http://127.0.0.1:8000/json-server')
//设置请求头
//Content-type设置请求体内容的类型
//发送
xhr.send();
//事件绑定 处理服务端返回结果
xhr.onreadystatechange=function(){
if(xhr.readyState===4)
if(xhr.status>=200&&xhr.status<300){
result.innerHTML=xhr.response.name
}
完整代码:
Document
1.13 自动重启工具安装 nodemon
当文件内容修改时 自动启动
1.安装 npm i -g nodemon
2.重启
改服务端代码会变方便
1.14 AJAX-IE缓存问题解决什么是IE缓存问题?
为了提高访问网页的速度,InternetExplorer浏览器会采用累积式加速的方法,将你曾经访问的网页内容(包括图片以及cookie文件等)存放在电脑里。这个存放空间,我们就称它为IE缓存。以后我们每次访问网站时,IE会首先搜索这个目录,如果其中已经有访问过的内容,那IE就不必从网上下载,而直接从缓存中调出来,从而提高了访问网站的速度。
如何解决?
加一个当前时间戳
xhr.open('GET','http://127.0.0.1:8000/ie?t='+Data.now())
1.15 AJAX请求超时与网络异常处理
请求超时
//超时设置 两秒钟还没有结果那么就取消
xhr.timeout=2000
xhr.ontimeout=function(){
alert("网络异常,请稍后重试")
}
网络异常:
xhr.onerror=function(){
alert("你的网络似乎出现了问题,请检查网络")
}
1.16 AJAX取消请求
手动取消
btns.onclick=function(){
xhr.abort();
}
1.17 AJAX请求重复发送问题
节流
let xhr=null
//标识变量
let isSending=false //是否正在发送AJAX请求
window.onkeydown=function(){
//判断标识变量 如果正在发送请求 那么就取消该请求 创建一个新的请求
if(isSending)
xhr.abort()
//创建对象
xhr=new XMLHttpRequest();
//修改标识变量
isSending=true
//初始化
xhr.open('GET','http://127.0.0.1:8000/delay')
//设置请求头
//Content-type设置请求体内容的类型
//发送
xhr.send();
//事件绑定 处理服务端返回结果
xhr.onreadystatechange=function(){
if(xhr.readyState===4){
isSending=false;
}
}
}
2.1Axios发送AJAX请求
axios中文文档|axios中文网 | axios
Document
2.2使用fetch函数返送AJAX请求