Ajax及其应用

AJAX概述

1、AJAX的定义：异步的JS和XML，使用XMLHttpRequest对象与服务器通信；可以在不重新刷新页面的情况下与服务器通信，交换数据或更新页面。

2、概念：AJAX是浏览器与服务器进行数据通信的技术。

3、工作原理：客户端发送请求交给xhr，xhr把请求提交给服务器进行处理，服务器响应数据交给xhr对象，xhr对象接收数据，最后由javascript把数据写到页面上

4、AJAX请求步骤：①创建XMLHttpRequest实例②发送HTTP请求③接收服务器传回的数据④更新网页数据

（AJAX只能向同源网址（协议域名端口相同）发出HTTP请求，否则会报错）

XMLHttpRequest对象

1、XMLHttpRequest对象是AJAX的主要接口；XMLHttpRequest本身是一个构造函数，没有任何参数

2、readyState: 返回请求的状态。可能的值有：

• 0: 对象已创建，但尚未调用 open() 方法。

• 1: open() 方法已被调用。

• 2: send() 方法已被调用，请求已发出。

• 3: 服务器正在发送响应数据。

• 4: 服务器响应已完全接收。

• var xhr = new XMLHttpRequest();
  
  if (xhr.readyState === 4) {
    // 请求结束，处理服务器返回的数据(表示发出的HTTP请求已经成功)
  } else {
    // 显示提示“加载中……”
  }
  

3、responseText: 将响应的文本内容作为字符串返回。

4、responseXML: 如果响应的内容类型是 "text/xml" 或 "application/xml"，则将响应作为 XMLDocument 对象返回。

5、status: 返回 HTTP 状态码，只有2xx和304的状态码表示成功。

6、statusText: 返回 HTTP 状态文本，例如 "OK" 或 "Not Found"。

7、responseURL: 属性是字符串，表示发送数据的服务器的网址

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/test', true);
xhr.onload = function () {
  // 返回 http://example.com/test
  console.log(xhr.responseURL);
};
xhr.send(null);

方法

1. open(method, url, async, user, password): 初始化请求参数。
   • method: 请求方法（GET, POST, PUT, DELETE 等）。
   • url: 请求的 URL。
   • async: 是否异步发送请求，默认为 true。
   • user: 可选的用户名用于身份验证。
   • password: 可选的密码用于身份验证。
2. send(data): 发送请求。如果请求是 POST 类型，那么 data 将作为请求主体发送。
3. setRequestHeader(header, value): 设置请求的 HTTP 头部信息。
4. abort(): 取消当前请求。
5. getAllResponseHeaders(): 返回所有响应头信息。
6. getResponseHeader(header): 返回特定响应头的信息。

事件

1、onreadystatechange：

• 当 readyState 改变时会触发此事件。

2、onloadstart：

• 当请求开始加载时触发。

3、onprogress：

• 当请求接收到数据时触发。

4、onabort：

• 当请求被取消时触发。

5、onerror：

• 当请求遇到错误时触发。

6、onload：

• 当请求成功完成时触发。

7、ontimeout：

• 当请求超时时触发。

8、onloadend：

• 当请求结束时触发（无论请求成功还是失败）。

案例：获取文章详细内容

function fetchPostDetail postId) {
 var xhr = new XMLHttpRequest();
 xhr.open('GET', 'http://jsonplaceholder.typicode.com/posts/' + postId, true);
 xhr.onload = function () {
   if (xhr.status >= 200 && xhr.status < 300) {
     var post = JSON.parse(xhr.responseText);
     displayPostDetail(post);
   } else {
     console.error('服务器返回了错误状态码：', xhr.status);
   }
 };
 xhr.onerror = function () {
   console.error('请求失败！');
 };
 xhr.send();
}
 
// 展示文章详情的函数
function displayPostDetail(post) {
 var detail = document.getElementById('postDetail');
 detail.innerHTML = '<h2>' + post.title + '</h2><p>' + post.body + '</p>';
}