Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

柔情只为你懂 2021-12-22 22:17 320阅读 0赞

1、原生Ajax

一定要理解Ajax出现的背景

Ajax通过url查询后端接口的数据，在前端做数据的解析和局部更新

1、隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验

访问后台接口数据显示在iframe页面中显示，没有做主页面的刷新，但页面实际上也刷新了  看左上角的转圈圈了

![1151059-20190601175342857-257292304.png][]

![1151059-20190601180027281-502046050.png][]

![1151059-20190601175735691-142025647.png][]

2、Ajax异步请求，真正实现页面局部刷新，没有跳转，坐上角小圈圈没转

原生Ajax写法---注意ajax的缩写

![1151059-20190601181028883-1850294740.png][]

![1151059-20190601181202081-1159417435.png][]

![1151059-20190601182339033-1289880567.png][]

![1151059-20190601182026940-2119413150.png][]

![1151059-20190601182630046-1403829989.png][]

![1151059-20190601184519174-1573408942.png][]

![1151059-20190601185531925-786357770.png][]

![1151059-20190601201443914-1660237994.png][]

![1151059-20190601201604610-1591032034.png][]

3、服务器放回了xml数据格式

![1151059-20190601195544134-349072176.png][]![1151059-20190601195602151-1511526221.png][]

![1151059-20190601200400403-1180907789.png][]

解析过程还是很麻烦的，所以这种数据格式很少用了。

4、后台返回数据主流数据风格：json格式数据

![1151059-20190601205757874-972820437.png][]

![1151059-20190601210209636-129453103.png][]

![1151059-20190601210552353-1724335846.png][]

![1151059-20190601211046650-1240992143.png][]

![1151059-20190601211608421-2051968629.png][]

做一个json格式的接口（其实就是调用url后返回的是数据、json格式的数据，不是完整的页面）

![1151059-20190601212750864-1795113099.png][]

![1151059-20190601213005481-226166614.png][]

5、ajax异步请求

![1151059-20190601213145411-992697477.png][]

js的执行：  单线程（从上往下一行行解析执行） + 事件队列（代码从上往下执行完后，事件队列里的方法是再右浏览器处理的）

![1151059-20190601215651007-1447222314.png][]

![1151059-20190601214029695-1579645214.png][]

![1151059-20190601214350007-518364180.png][]

![1151059-20190601215040022-771759554.png][]

6、Ajax原生封装

![1151059-20190601221005033-766943689.png][]

![1151059-20190601221226202-2062169136.png][]

转载于:https://www.cnblogs.com/yangyutian/p/10961249.html

[1151059-20190601175342857-257292304.png]: /images/20211220/0a6070c5e56d41c08c67bacda7c832c7.png
[1151059-20190601180027281-502046050.png]: /images/20211220/6b163d007b834ccf9459b99fd735b3e8.png
[1151059-20190601175735691-142025647.png]: /images/20211220/e9884550dd2b496585c907daa2212ce0.png
[1151059-20190601181028883-1850294740.png]: /images/20211220/c2cf9ad425734e2087d271cee31c0484.png
[1151059-20190601181202081-1159417435.png]: /images/20211220/fd27fd3f61344577b9f396cfc8828ba3.png
[1151059-20190601182339033-1289880567.png]: /images/20211220/c31166f2e6ea4d8fba990fd9321c564a.png
[1151059-20190601182026940-2119413150.png]: /images/20211220/d3106f77ad2041398876f92a52163fdd.png
[1151059-20190601182630046-1403829989.png]: /images/20211220/c87dfe0bba36496e9f744ef03e9bbee9.png
[1151059-20190601184519174-1573408942.png]: /images/20211220/221c88d5336043a79d457ba221abee79.png
[1151059-20190601185531925-786357770.png]: /images/20211220/32fac1d155954a7cae11b3d9ab308cbb.png
[1151059-20190601201443914-1660237994.png]: /images/20211220/3c1164fc53a7428ba75fb22351546439.png
[1151059-20190601201604610-1591032034.png]: /images/20211220/15a8fbf471314ac79987201ca7ad7df8.png
[1151059-20190601195544134-349072176.png]: https://img2018.cnblogs.com/blog/1151059/201906/1151059-20190601195544134-349072176.png
[1151059-20190601195602151-1511526221.png]: /images/20211220/198d8ccb954047cb9ba85f6b51ff63f3.png
[1151059-20190601200400403-1180907789.png]: /images/20211220/aaea0b8b56124b78894d5e938b22a629.png
[1151059-20190601205757874-972820437.png]: /images/20211220/05303fa9da7c4cbe8a808eb4663b65ca.png
[1151059-20190601210209636-129453103.png]: /images/20211220/2c264913130c461db344dd7cabc64e19.png
[1151059-20190601210552353-1724335846.png]: /images/20211220/5ded6038fa5b42acb16b86dd06eff214.png
[1151059-20190601211046650-1240992143.png]: /images/20211220/1ad0029fcc5d4719afea16bfbd95a239.png
[1151059-20190601211608421-2051968629.png]: /images/20211220/ed73c0b70f98445097e8db2c844e6424.png
[1151059-20190601212750864-1795113099.png]: /images/20211220/64e8ccf23e8a4633b343ae7c0e5ad0cf.png
[1151059-20190601213005481-226166614.png]: /images/20211220/2bb4825e18594cd5b9b0bb69c19e28d5.png
[1151059-20190601213145411-992697477.png]: /images/20211220/7f480c52b6604b51950b13a6f6ac2cca.png
[1151059-20190601215651007-1447222314.png]: /images/20211220/218f44c59db1428cbfa5a3fce45bcfa7.png
[1151059-20190601214029695-1579645214.png]: /images/20211220/17fdc10cda6b4c9dbba16a24da1702aa.png
[1151059-20190601214350007-518364180.png]: /images/20211220/ca887994c5ec46cca4664e3a9b8e5ee5.png
[1151059-20190601215040022-771759554.png]: /images/20211220/008ee106d8864a9d8c890191c73d1a8f.png
[1151059-20190601221005033-766943689.png]: /images/20211220/44102e9d5894498d98998800f5408870.png
[1151059-20190601221226202-2062169136.png]: /images/20211220/3be1f069f2e042e783f269fcb63b402b.png