AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

红柚r

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量169

点赞数

分类专栏： JavaScript总结

本文链接：https://blog.youkuaiyun.com/weixin_43273956/article/details/86766431

版权

JavaScript总结专栏收录该内容

7 篇文章

订阅专栏

AJAX不是JavaScript的规范，它只是一个缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行异步网络请求。

【注】Form的提交，一旦用户点击“Submit”按钮，表单开始提交，浏览器就会刷新页面。

这就是Web的运作原理：一次HTTP请求对应一个页面。

如果要让用户留在当前页面中，同时发出新的HTTP请求，就必须用JavaScript发送这个新请求，接收到数据后，再用JavaScript更新页面，这样一来，用户就感觉自己仍然停留在当前页面，但是数据却可以不断地更新。

【注】需要注意：AJAX请求是异步执行的，也就是说，要通过回调函数获得响应。

在现代浏览器上写AJAX主要依靠XMLHttpRequest对象：

AJAX封装

注意：
1.为了以后方便传参，要通过解构的方式
2.回调函数在事件绑定的时候定义，在ajax函数里调用并且传参

在这里插入图片描述
【注】注意，千万不要把open第三个参数指定为false，否则浏览器将停止响应，直到AJAX请求完成。如果这个请求耗时10秒，那么10秒内你会发现浏览器处于“假死”状态。

回调函数：
当在一个函数中有一块代码不确定要写什么的时候就要用到回调函数，类似于函数中有不确定的参数的时候，定义形参来代表

但需要注意的是，回调函数的定义与调用是分开的，在需要此代码块出现的地方调用

在PHP中，$username =$_GET['username']; 
因为$_GET是全局数组，所以相当于是通过键（name= username）来获取值（value）

JSONP

【注】JSONP跨域就是通过src这个属性实现的跨源。src这个属性没有同源限制。
JSONP，它有个限制，只能用GET请求，并且要求返回JavaScript。这种方式跨域实际上是利用了浏览器允许跨域引用JavaScript资源：

<html>
<head>
    <script src="http://example.com/abc.js"></script>
    ...
</head>
</html>

在这里插入图片描述
1、封装一个函数，这个函数有一个参数，参数就是我们下载到的数据（也就是后来动态添加的script的回调函数）

2、当需要下载数据的时候动态的创建script标签，添加到页面上

3、当script添加页面上以后，就调用第一步声明好的函数，我们在这个函数里，对下载到的数据进行处理。

参考文献：
https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/001434499861493e7c35be5e0864769a2c06afb4754acc6000