现代网站开发技术余姚网络推广
原生Ajax
xml
已被json取代
http
请求方法+url+http版本号
network
谷歌浏览器查看请求报文和响应报文
F12
network
header里面有
请求头
响应头
点击view source
可以查看请求响应行
请求体在请求行头下面
get请求有url参数，请求体变为query String ，会对请求参数进行解析
响应体在response 栏中看
Preview预览效果查看
Nodejs
Nodejs就是一个应用程序可以解析js代码
express框架
基本使用
文件夹最外层启动终端
1.npm init --yes 进行初始化
2.npm i express
Ajax请求发送前的准备
前端页面的准备
服务端代码的准备
Ajax操作的基本步骤
XHR network选择文件时 XHR Ajax请求的筛选
获取元素btn
Ajax操作四步
Ajax中设置url参数
如何给url缀参数
用问号？分隔url
a=100 a:参数名，后面是参数值
如果有多个参数用&符分隔
Ajax post请求
服务端代码需要添加路由
post请求设置请求体
在Payload中查看
Ajax设置请求头信息
在Ajax设置中第二步进行
Content-Type设置请求体内容的类型
为其固定内容
通常来说，身份校验的信息会存在头信息里面，，被服务器端提取，进行校验
自定义请求头设置
1.
自定义请求头因为浏览器的安全机制，会报错
需要在服务端代码中添加设置响应头
允许自定义头信息
2.使用自定义请求头，会自动发送options请求（全新的校验，检测头信息是否可用）
需要将端口 路由设置 接受改为all 可以接受任意类型的请求
设置请求头信息一般用于存储身份校验的信息
Ajax请求服务端响应Json
通常情况下，服务端返回结果绝大多数都是json格式的数据
服务端设置
服务端设置响应体数据
response.send()只能传入String和Buffer
ajax第四步设置
手动对传来的响应体数据进行转换
自动转换
第一步
nodemon
IE浏览器缓存问题
Date.now()时间戳
这时再发送请求 每次都是不同的请求，会发送新的请求，不会走浏览器本地缓存
请求超时控制和网络异常处理
/delay
取消请求
abort()
重复请求问题
jQuery中Ajax
用bootcdn时，在标签内 加 crossorigin="anonymous" 跨源请求的一个属性设置, 设置匿名后，向后面的资源发送请求时不会携带当前域名下的cookie 可以消除一个警告
第一个参数是给谁发；第二个参数是一个data参数对象用键值对的形式保存；第三个参数是一个回调函数
get请求下 date参数对象成为url字符串参数 post请求下 成为请求体
jQuery通用方法发送Ajax请求
axios Ajax工具库
axios 可以发送url参数，也可以发送请求头信息
get方法无法设置请求体，在post方法中才能设置请求体
get请求
.then方法返回的是一个Axios对象
用于设置回调函数
post请求
post方法ruguodiergecansh
axios 通用方法发送请求
method:post
后面添加.then 可以进行响应结果的处理
response
fetch函数发送Ajax请求
fetch函数属于全局对象，返回结果是Promise对象
第一个参数是URL，第二个参数是一个对象包含各种请求内容
跨域
同源策略
同源策略就是来自于同一个服务器内容
同源策略就是本页面和请求都来自于同一个服务端 server.js
jsonp解决跨域
script标签本身具有跨域特性，例如bootcdn的使用，使用远程资源进行Axios等的服务
open with liveServer （访问方式为http协议） 打开页面其中可以找到源文件 的http路径
将原本的url文件url换成完整的url
jsonp实现跨域原理
然后Script标签对里面的内容做解析处理
这里的js文件的请求是一个跨域请求
、、
这里用script标签的src引入这个服务 会发生错误 因为这个服务返回的是字符串，
script标签无法对其进行解析
、、
原理：script请求src过去后，需要回来的结果是一段js代码，这样浏览器才能解析和执行代码
返回结果的形式是一个函数调用，而函数的参数是我们想给客户端返回的结果数据
jsonp案例
案例实现目标：
失去焦点后，边框变红，并在下面显示‘已存在’。
回调函数
返回结果
jQuery发送jsonp请求
注意：使用jQuery发送jsonp请求时，需要在url补一个参数
写的时候callback的值是？ 实际发送请求时 有值 服务端会接收到callback参数值
需要callback参数的值作为函数调用的函数去拼接字符串
现在jQuery已经注册一个这样的callback函数
只要服务端返回结果是这个函数的调用，则前端会对这个代码数据进行处理
服务端返回结果设置
cors
常用
5.11.12
onreadyststechange
readystate 是xhr对象中的属性 有五个值
0：xhr未初始化
1：open方法调用完毕
2：send方法调用完毕
3：服务端返回部分结果
4：返回所有结果
xhr.status
响应状态码
响应行：http版本 响应状态码 状态字符串
xhr.statusText
响应头
空行
响应体
AJax请求基本操作
1.创建对象
const xhr = new XMLHttpRequest（）
2.初始化 设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server');
3.发送
xhr.send();
4.事件绑定 处理服务端返回的结果
xhr.onreadysatechange=function（）{
}
报文样式
