AJAX入门笔记

什么是AJAX

Async JavaScript And XML（异步JavaScript和XML）, 其本身不是一种新技术，而是一门语言（在 2005年由Jesse James Garrett提出），用来描述一种使用现有技术集合的‘新’方法，包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

四个步骤

1. 创建一个HttpRequest 对象（全称是XMLHttpRequest）
2. 调用对象的open方法
3. 监听对象的onload&onerror事件（专业前端会改用onreadystatechange事件）
4. 调用对象的send方法。

具体代码如下 （onload&onerror,不推荐使用该方法）

const request = new XMLHttpRequest();
  request.open("GET", "/3.html");
  request.onload = () => {
    const div = document.createElement("div");
    div.innerHTML = request.response;
    document.body.appendChild(div);
  };
  request.onerror = () => {};
  request.send();

具体代码如下（onreadystatechange事件 推荐使用）

const request = new XMLHttpRequest();
 request.open("GET", "/5.json");
 request.onreadystatechange = () => {
   if (request.readyState === 4 && request.status === 200) {
     console.log(request.response);
   }
 };
 request.send();

readyState

HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。

.open(method, url);

• method

  请求所使用的HTTP方法; 例如 "GET", "POST"

• url

• 该请求所要访问的URL地址

request.response

请求响应的内容

responseXML

对请求的响应，解析为 XML 并作为 Document 对象返回。

const dom = request.responseXML;

status

由服务器返回的 HTTP 状态代。status 200 代表一个成功的请求。如果服务器响应中没有明确指定status码，XMLHttpRequest.status 将会默认为200。