黑马程序员技术交流社区

标题: 从浅到深，带你彻底搞懂AJAX异步请求 [打印本页]

作者: 长沙-小知姐姐 时间: 2020-3-12 11:38
标题: 从浅到深，带你彻底搞懂AJAX异步请求
本帖最后由长沙-小知姐姐于 2020-3-12 11:40 编辑

什么是 AJAX
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

实例用法
AJAX异步请求细分的话可以分为四种：

load()方法
$.get()方法
$.post()方法
$.ajax()方法
其实这四种方法，原理和实现都相差无几。具体实现请往下看吧。

1、AJAX load() 方法
load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

使用语法

$(selector).load(URL, data, callback);

【注意】
URL 必填项，请求加载的URL地址。
data 选填项，参数，请求时需要携带的参数，格式键 / 值对集合。
callback 选填项，load()方法执行完后回调方法。

使用案例（需要引入Jquery）
页面给出了一个按钮和一个div标签，点击按钮load数据内容显示到div中。代码如下：

<button class = "btn btn-success">AJAX load方法</button>
<div id = "loadText" ></div>

JS代码：

<script type="text/javascript">
      function loadFun(){
            //loadText显示返回数据的标签DOM
            $("#loadText").load("loadText", {data: "请求携带的参数"}, function(responseTxt, statusTxt, xhr){
                     console.log(responseTxt);
                     console.log(statusTxt);
                     console.log(xhr);
            })
      }
</script>

【注】 load方法中第一个参数loadText是请求地址，第二{data: “请求携带的参数”}是携带的参数，第三个为请求完成后回调方法。请求地址必填，其他两个可以根据项目需求是否添加。

回调方法中三个参数分别为：

responseTxt - 请求返回的内容
statusTXT - 请求返回的状态
xhr - XMLHttpRequest 对象
loadText请求后台代码：

@RequestMapping(value = "/loadText")
public String loadText(String data) {
      System.out.println("前台传递的参数" + data);
      return "loadText";
}

返回的为loadText页面，代码如下(只需要body中的内容也可以)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
      这是load过去的页面
</body>
</html>

初始页面效果（初始页面就一个按钮）：

点击按钮后效果（点击按钮后，请求的到的内容将显示在div中）：

浏览器控制台输出（请求结束后，回调方法的参数）

编辑器控制台输出（后台方法接收到的参数输出）

2、$.get() 方法
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
GET 基本上用于从服务器获得（取回）数据。GET 方法可能返回缓存数据。

使用语法

$.get(URL, callback);

【注意】
URL 必填项，请求加载的URL地址。
callback 选填项，$.get()方法执行完后回调方法。

使用实例
这里偷个懒 O(∩_∩)O哈哈~，页面代码还是用上面的load方法的，把点击按钮的方法改成$.get()方法了。代码如下：

<script type="text/javascript">
      function loadFun(){
            $.get("loadText", function(data, status){
                     console.log(data);
                     console.log(status);
            })
      }
</script>

【注】 $.get()方法只能获取到请求后台返回的数据，不能直接显示在页面上，如果需要显示在页面上还是使用load方法吧（不嫌麻烦可以在回调函数中用JS处理）。其中loadText为请求地址，必填项，第二回调方法，选填。

回调方法中的参数：

data为请求返回的数据
status为请求状态
请求的后台代码和上面load方法的一样，点击按钮后，浏览器控制台输出如下：

3、$.post() 方法
$.post() 方法通过 HTTP POST 请求从服务器上请求数据。
POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

使用语法

$.post(URL, data, callback);

【注意】
URL 必填项，请求加载的URL地址。
data 选填项，参数，请求时需要携带的参数，格式键 / 值对集合。
callback 选填项，$.post()方法执行完后回调方法。

使用实例
这里页面只改了点击按钮的方法，发送请求方法改成$.post()方法了。代码如下：

<script type="text/javascript">
      function loadFun(){
            $.post("loadText", {data: "请求携带的参数"}, function(data,status){
                     console.log(data);
                     console.log(status);
            })
      }
</script>

不难发现， $.post()方法在参数上和load()方法一样，但回调方法的参数又和 $.get()方法一样，这里就不用在解释了吧！直接来看一下效果吧（左边为浏览器控制台输出，右边为编辑器控制台输出）。

4、ajax() 方法
ajax() 方法通过 HTTP 请求加载远程数据。该方法是 jQuery 底层 AJAX 实现。上面的 $.post()和 $.get()方法底层都是ajax()方法。大多数情况直接使用 $.post()和 $.get()方法简单一些，如果需要操作不常用的选项，使用ajax()方法更灵活，属性设置多一些。
【注】这里说一下 $.get()和 $.post()方法除了参数外的区别， $.get()方法请求携带的参数一般只能拼接在请求地址后面，安全性不是很高。 $.post()方法请求携带的参数不会显示在地址后面，所以安全性要高一点，一般推荐使用 post方法。

ajax()的简单使用案例
这里页面只改了点击按钮的方法，发送请求方法改成$.ajax()方法了。代码如下：

<script type="text/javascript">
      function loadFun(){
            $.ajax({
                     url: "loadText",       //请求地址
                     type: "post",       //请求方式，post/get
                     data: {data: "请求携带的参数"},             //请求携带参数
                     async: false,       //设置请求是同步还是异步，默认为true异步

其中请求地址还是上面的请求地址，使用对应的后台方法也就一样了。其中属性这里只设置了部分，下方有ajax方法的全部属性，可以根据项目需求自行添加。下面是控制台输出的效果（左边为浏览器控制台输出，右边为编辑器控制台输出）。

5、页面全部代码
因为写的案例，偷了个懒O(∩_∩)O哈哈~，每次都只改了按钮点击事件的方法，这里我把页面的全部代码贴出来，大家容易看一些。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="static/bootstrap/js/jquery.js"></script>
</head>
<body>
      <button class = "btn btn-success">AJAX load方法</button>
      <div id = "loadText" ></div>

      <script type="text/javascript">
            function loadFun(){
                     //load()方法
                     /* $("#loadText").load("loadText", {data: "请求携带的参数"}, function(responseTxt, statusTxt, xhr){
                              console.log(responseTxt);
                              console.log(statusTxt);
                              console.log(xhr);
                     }) */

                     //$.get()方法
                     /* $.get("loadText", function(data,status){
                              console.log(data);
                              console.log(status);
                     }) */

                     //$.post()方法
                     /* $.post("loadText", {data: "请求携带的参数"}, function(data,status){
                              console.log(data);
                              console.log(status);
                     }) */

                     //ajax方法
                     $.ajax({
                              url: "loadText",       //请求地址
                              type: "post",       //请求方式，post/get
                              data: {data: "请求携带的参数"},             //请求携带参数
                              async: false,       //设置请求是同步还是异步，默认为true异步
                              // 设置返回的数据类型，一般最多的设置为json，这里因为返回的是一个HTML文件，所以设置的为text文本。详细讲解请往下看
                              dataType:"text",
                              success: function(data){       //请求成功后的回调函数，data为返回的数据
                                    console.log(data);
                              }
                     });
            }
      </script>
</body>
</html>

6、ajax的常用属性
1、url
类型：String
默认值: 当前页地址。发送请求的地址。

2、type
类型：String
请求类型（get / set），默认值: “GET”。请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

3、data
类型：String
请求携带的参数，发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。

4、async
类型：Boolean
请求方式（同步 / 异步），默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。
注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

5、dataType
类型：String
请求返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:
“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

6、success
类型：Function方法
请求成功后的回调函数。
参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

7、error
类型：Function方法
默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。
有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。
如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

8、complete(XHR, TS)
类型：Function方法
请求完成后回调函数 (请求成功或失败之后均调用)。
参数： XMLHttpRequest 对象和一个描述请求类型的字符串。

9、beforeSend(XHR)
类型：Function方法
发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头。
XMLHttpRequest 对象是唯一的参数。
如果返回 false 可以取消本次 ajax 请求。

10、xhr
类型：Function方法
需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

11、dataFilter
类型：Function方法
给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

12、ifModified
类型：Boolean
仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 ‘etag’ 来确定数据没有被修改过。

13、password
类型：String
用于响应 HTTP 访问认证请求的密码

14、username
类型：String
用于响应 HTTP 访问认证请求的用户名。

15、contentType
类型：String
默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。
默认值适合大多数情况。如果你明确地传递了一个 content-type 给 $.ajax() 那么它必定会发送给服务器（即使没有数据要发送）。

16、context
类型：Object
这个对象用于设置 Ajax 相关回调函数的上下文。也就是说，让回调函数内 this 指向这个对象（如果不设定这个参数，那么 this 就指向调用本次 AJAX 请求时传递的 options 参数）。比如指定一个 DOM 元素作为 context 参数，这样就设置了 success 回调函数的上下文为这个 DOM 元素。
就像这样：

$.ajax({ url: "test.html", context: document.body, success: function(){
      $(this).addClass("done");
}});

17、cache
类型：Boolean
默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面。

18、global
类型：Boolean
是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

19、jsonp
类型：String
在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 “callback=?” 这种 GET 或 POST 请求中 URL 参数里的 “callback” 部分，比如 {jsonp:‘onJsonPLoad’} 会导致将 “onJsonPLoad=?” 传给服务器。

20、jsonpCallback
类型：String
为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

21、processData
类型：Boolean
默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 “application/x-www-form-urlencoded”。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

22、scriptCharset
类型：String
只有当请求时 dataType 为 “jsonp” 或 “script”，并且 type 是 “GET” 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

23、traditional
类型：Boolean
如果你想要用传统的方式来序列化数据，那么就设置为 true。

24、timeout
类型：Number
设置请求超时时间（毫秒）。此设置将覆盖全局设置。
————————————————

原文链接：「一枕江风」https://blog.csdn.net/qq_40205116/article/details/104732478

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2