Ajax

AJAX

概念

ASynchronous JavaScript And XML 异步的 JavaScript 和 XML

异步和同步：客户端和服务器端相互通信的基础上

客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。提升用户的体验

JQuery 的 Ajax 请求

$.ajax(url,[settings]) 请求参数
- url：一个包含发送请求的 URL 字符串
- settings:AJAX 请求设置。所有选项都是可选的(下面只列举常用属性，全部属性请查看 API 文档)
  - data：发送到服务的数据。将自动转换为请求字符串格式。
  - dataType:预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。
  - success(data,textStatus,jqXHR)：请求成功后的回调函数。
  - type：(默认：“GET")请求方式(”POST"或"GET")，默认为"GET"，注意：其他 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持
  - async：(默认：true)默认设置下，所有请求均为异步请求，如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成后才可以执行。
- 示例代码：
```
$.ajax({
	url:"/servlet1",
	type:"GET"(或者"POST"),
	data:"name=aa&age=23",
	dataType:"JSON",  (或不写，默认"text")
	success:function(data){
	}
})
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
- 注意：ajax 中，在此处，url，type，data 等等他们是无序的，可以任意调换他们的位置。

下面的方法必须遵守参数的顺序

$.get 请求和 $.post 请求
- url:请求的 URL 地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
- type:返回内容格式，xml, html, script, json, text。
  - 以 GET 携带着请求数据发出请求，再按照 type 规定的类型对服务器传回的数据进行转换，若转换失败则不会进入回调函数。
  - 示例代码：
```
$.get(
  '/servlet',
  'username=zs&age=23',
  function (data) {
    console.log(data)
  },
  'JSON'
)
```
  1
  2
  3
  4
  5
  6
  7
  8
  - 注意事项：url,data,fn,type 的顺序是固定的，必须在正确的位置填入正确的参数。
  - 其他：还有一个方法叫做$.getJSON(url,[data],[callback]) 就等效于当$.get 的 type 为 JSON 时的情况。
Jquery 的$.getJSON
- url:待载入页面的 URL 地址
- data:待发送 Key/value 参数。
- callback:载入成功时回调函数。
serialize()
ajax 异步代码执行的流程

执行流程中最难理解的两个点我觉得无外乎就是异步体现在哪里、回调函数如何理解了，这两点直到我到了黑马之后才真正的理解清楚，之前工作的时候也仅仅知道如何去用，但是始终对它不理解。
- 请看如下代码，分析浏览器弹窗最后弹出的数据是什么
```
--test.json文件内容 { "username":"zs", "password":123 } --ajax_test.html文件内容
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Ajax异步与同步测试</title>
    <script src="../jquery-1.11.3.js" type="text/javascript"></script>
    <script>
      $(function () {
        var a = 'aaa'
        $.ajax({
          url: 'test.json',
          dataType: 'JSON',
          type: 'GET',
          async: true, //异步执行，当为false时，同步执行
          success: function (data) {
            a = data.username
          },
        })
        alert(a)
      })
    </script>
  </head>
  <body></body>
</html>
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
- 代码分析，程序流从上往下走，走到 js 代码后执行文档加载事件，加载文档，文档加载完毕后进入事件函数中，执行 js 代码，首先给变量 a 赋初始值"aaa" ，接着执行$.ajax() 方法，根据 ajax 中定义的参数发送请求，注意，关键点来了：发出请求时，会根据参数 async 的对应参数决定下面的程序走向，当为 true 也就是异步执行时，程序在发出请求后不管服务器有没有给浏览器返回数据就接着执行下面的代码 ，体现在本程序中也就是不管程序有没有走 success 回调函数都会接着执行$.ajax()函数下面的代码，又因为程序从发出一个请求到服务器做出反应的时间较慢，所以通常都是当 js 代码全部执行完毕后才接收到服务器响应，然后进入成功的回调函数(success)，这一步又该如何理解呢？浏览器向服务器发出请求，服务器接收到请求后通过 response.getWriter().write()的方式向浏览器写回数据，若响应成功就会进入 success 回调函数中，按照 dataType 指定的类型，封装到回调函数的 data 参数中，若返回的数据不符合 dataType 指定的类型，将无法封装到 data 参数中(例如 dataType 指定类型为'JSON'，若返回的数据格式不符合要求就无法进入成功的回调函数)。因此，在默认异步(async:true)的情况下，上面的程序会先执行 alert(a)，之后才走成功的回调函数，因此浏览器弹窗中 a 的值应该仍然为"aaa".
- 如果我将上面代码中的 async:true 改为 async:false，又会出现什么状况呢？更改之后就等于是同步执行了，程序走到 ajax 后，向服务器发出请求，然后程序会停在这里知道服务器响应回来，接着走成功的回调函数，ajax 代码块中的逻辑完全执行完毕后才会接着往下走，因为在成功的回调函数中对 a 重新赋值为"zs"，因此当浏览器弹窗的时候 a 的值也会对应着变为 zs。

#JavaWeb

上次更新: 2025/02/26, 08:57:57

← JavaScript JSON→