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

ゞ浴缸里的玫瑰 2022-01-09 11:43 295阅读 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/20220109/81945e6f4bca4809b085d97581a2917a.png
[1151059-20190601180027281-502046050.png]: /images/20220109/d18eaab5ad29441082b5340205c0ee34.png
[1151059-20190601175735691-142025647.png]: /images/20220109/f83d82ca38ac485ab34069bb4373e05f.png
[1151059-20190601181028883-1850294740.png]: /images/20220109/5ce3b9bbee114eeba7c5e3ea3ff74c7f.png
[1151059-20190601181202081-1159417435.png]: /images/20220109/5143ad3c89b44fb9833483aec19cb127.png
[1151059-20190601182339033-1289880567.png]: /images/20220109/33f68e1009264535b77d92396b33e638.png
[1151059-20190601182026940-2119413150.png]: /images/20220109/9e0f2152db644f2f8d7f9db7bac50ca9.png
[1151059-20190601182630046-1403829989.png]: /images/20220109/bce89a91d2364e2e99a4ee1b415677f7.png
[1151059-20190601184519174-1573408942.png]: /images/20220109/bf3e091ca03647de9e4b79c2cd2023bd.png
[1151059-20190601185531925-786357770.png]: /images/20220109/95514dfc53174b6c9de4662c2fdfb1aa.png
[1151059-20190601201443914-1660237994.png]: /images/20220109/17771de73c84409295aace772ee6dbab.png
[1151059-20190601201604610-1591032034.png]: /images/20220109/cb95b47087584e68bd344bb2d570f3d9.png
[1151059-20190601195544134-349072176.png]: https://img2018.cnblogs.com/blog/1151059/201906/1151059-20190601195544134-349072176.png
[1151059-20190601195602151-1511526221.png]: /images/20220109/89f39f2742cf43f0a9b4a989b4c11fd5.png
[1151059-20190601200400403-1180907789.png]: /images/20220109/e9e606b017d24bfd936593a5fc7525fe.png
[1151059-20190601205757874-972820437.png]: /images/20220109/cfa1342cbe394216b3ca9bfca1183018.png
[1151059-20190601210209636-129453103.png]: /images/20220109/27282e8fe1574f8d85d11e006ecbb804.png
[1151059-20190601210552353-1724335846.png]: /images/20220109/2efb563a15f3489cac8f61491627f77a.png
[1151059-20190601211046650-1240992143.png]: /images/20220109/12bb54e21a774abdb7f27c24b0013c71.png
[1151059-20190601211608421-2051968629.png]: /images/20220109/4994130e660d4ebeb16bad4b892e04d4.png
[1151059-20190601212750864-1795113099.png]: /images/20220109/dd7283657449457a95af9e16fbde55d2.png
[1151059-20190601213005481-226166614.png]: /images/20220109/e7ca91e2200647d8993d81e37f90f95c.png
[1151059-20190601213145411-992697477.png]: /images/20220109/d89e578f1b324f65b54462aca4e38046.png
[1151059-20190601215651007-1447222314.png]: /images/20220109/41b860af4adb4ce0965e3c234cd56bcf.png
[1151059-20190601214029695-1579645214.png]: /images/20220109/5f3c53fde71943ebb6236634e19c7de3.png
[1151059-20190601214350007-518364180.png]: /images/20220109/d381f3c9c9f1438583e6770d4238d1b7.png
[1151059-20190601215040022-771759554.png]: /images/20220109/e84c181bc7414d9683219c01b4034e2f.png
[1151059-20190601221005033-766943689.png]: /images/20220109/26d7492109164022bc9735827dc00224.png
[1151059-20190601221226202-2062169136.png]: /images/20220109/36831b0cc16d46748848ee8e86ca874e.png