AJAX了解

1.简介
AJAX = Asynchronous JavaScript And XML.

AJAX 并非编程语言。

AJAX 仅仅组合了：
浏览器内建的 XMLHttpRequest 对象（从 web 服务器请求数据）
JavaScript 和 HTML DOM（显示或使用数据）
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。

作用：
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
2.如何工作

在这里插入图片描述

网页中发生一个事件（页面加载、按钮点击）
由 JavaScript 创建 XMLHttpRequest 对象
XMLHttpRequest 对象向 web 服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由 JavaScript 读取响应
由 JavaScript 执行正确的动作（比如更新页面）
3.XMLHttp
创建 XMLHttpRequest 的语法是：

variable = new XMLHttpRequest();

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}
</script>

XMLHttpRequest 对象方法

在这里插入图片描述

XMLHttpRequest 对象属性

在这里插入图片描述

4.向服务器发送请求
如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xhttp.open(“GET”, “ajax_info.txt”, true);
xhttp.send();

在这里插入图片描述

GET 还是 POST？ GET 比 POST 更简单更快，可用于大多数情况下。

不过，请在以下情况始终使用 POST：

缓存文件不是选项（更新服务器上的文件或数据库）向服务器发送大量数据（POST 无大小限制）发送用户输入（可包含未知字符），POST 比
GET 更强大更安全

5.服务器响应
onreadystatechange 属性

readyState 属性存留 XMLHttpRequest 的状态。

onreadystatechange 属性定义当 readyState 发生变化时执行的函数。

status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。

readyState
保存了 XMLHttpRequest 的状态。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 正在处理请求
4: 请求已完成且响应已就绪

status
200: “OK”
403: “Forbidden”
404: “Page not found”

statusText 返回状态文本（例如 “OK” 或 “Not Found”）

responseText 获取字符串形式的响应数据
responseXML 获取 XML 数据形式的响应数据
getResponseHeader() 从服务器返回特定的头部信息
getAllResponseHeaders() 从服务器返回所有头部信息

6.XML文件
AJAX 可用于同 XML 文件进行交互式通信。

相关推荐