Asynchronous JavaScript and XML（异步传输的 JavaScript 和 XML）
AJAX不是新的编程语言，而是一种使用现有标准的新方法。
用于创建快速动态网页的技术。页面无刷新，按需加载
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
局部刷新，异步请求

异步和同步的区别

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

    XMLHttpRequest

    AJAX的基础。
    用于在后台与服务器交换数据。

    创建XMLHttpRequest对象

    1. variable=new XMLHttpRequest();
    对象用于和服务器交换数据

    向服务器发送请求

    1. xmlhttp.open("GET","test1.txt",true);
    2. xmlhttp.send();
    | 方法 | 描述 | | —- | —- | | open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
    - method：请求的类型；GET 或 POST
    - url：文件在服务器上的位置
    - async：true（异步）或 false（同步）
    | | send(string) | 将请求发送到服务器。
    - string：仅用于 POST 请求
    |

GET请求

  1. xmlHttp.open("GET","demo_get.asp",true);
  2. xmlhttp.send();

POST请求

  1. xmlhttp.open("POST","demo_post.asp",true);
  2. xmlhttp.send();
setRequestHeader(header,value) 向请求添加 HTTP 头。
header: 规定头的名称
value: 规定头的值

GET还是POST

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

AJAX - 图1

url-服务器上的文件

open()方法的url参数是服务器上文件的地址
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。

异步-True或False

如果要用于AJAX，open() 方法的 async 参数必须设置为 true：
通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本
  • 当响应就绪后对响应进行处理

    服务器响应

    | 属性 | 描述 | | —- | —- | | responseText | 获得字符串形式的响应数据。 | | responseXML | 获得 XML 形式的响应数据。 |

onreadystatechange 事件

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status 200: “OK”
404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪

回调函数

回调函数是一种以参数形式传递给另一个函数的函数。

ASP/PHP实例