AJAX

Ajax

ajax的html文件必须放在网络环境中运行,实现步骤:
在这里插入图片描述
如图,
在这里插入图片描述
在这里插入图片描述
一定要开放静态资源访问,而且,一开始的请求地址是不存在的,是服务器给客户端的,故要在服务器创建一个路由,如图。

服务器端的响应数据

在这里插入图片描述
然而实际上我们获得的数据却是字符串。因为
在这里插入图片描述
转换
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
变成json对象了

字符串拼接

在这里插入图片描述
在这里插入图片描述
获取字符串在追加到页面上。

请求参数传递

在这里插入图片描述

格式一样也是在地址后面加?..&…
在这里插入图片描述

伪造AJAX

在这里插入图片描述
在这里插入图片描述

XML

在这里插入图片描述

AJAX

在这里插入图片描述

案例

在这里插入图片描述

在这里插入图片描述

返回json格式的

在这里插入图片描述
在这里插入图片描述
字符串格式
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在传输过程中是以字符串形式传递的,所以传过来要parse变成对象
也可以设置xhr的一个属性配置响应体数据的类型
在这里插入图片描述
效果一样

post请求

在这里插入图片描述
JSON的格式发送过去要转化
在这里插入图片描述
在Post请求中,如果不设置请求头的格式,服务端是不会接收到参数的。
在这里插入图片描述
表示发送的是表单数据

IE缓存

IE会将AJAX返回的数据缓存到本地并且在下次请求AJAX时使用的是本地的数据而不是服务器实施更新的数据
解决方式
在ajax请求地址后面加上参数 ?t=Date.now()这样每次请求的地址都不同,IE认为是不同的请求,就不会调用本地数据而是请求到服务器去。

延时设置

xhr.timeout=2000;
xhr.ontimeout = ()=>{alert(‘请求超时,请稍后再试’)}
2s后若没有返回数据则认为超时。

网络异常回调

xhr.οnerrοr= ()=>{alert(‘您的网络好像出了一点问题’)}

AJAX取消请求

xhr.abort()取消网络请求

重复发送问题

节流阀
设置一个变量,每次发送请求就判断,若为正,先调用xhr.abort()取消掉,再重新发送请求。在这里插入图片描述

Jquery 的AJAX

post get 请求

在这里插入图片描述
$.方式(地址,参数/数据,回调函数),第四个参数一般是响应体格式,不写默认为字符串,可以写’json’,这样服务器传回来的json格式的字符串会自动转化为json

通用形式

在这里插入图片描述

$.ajax({}),当dataType里面参数是jsonp的时候,Jquery会帮你设置跨域(创建一个script标签,添加,请求,成功,删除script标签等等)

fetch()方法发送网络请求

在这里插入图片描述
在这里插入图片描述
在这里获取返回的数据
在这里插入图片描述
不管用ajax 还是fetch发送post请求时要记得配置请求头。在这里插入图片描述
要服务器相配。
res,json显示返回的json格式,text表示返回数据的字符串形式。在这里插入图片描述

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页