Skip to content

Ajax ⯐

简介

Ajax的全称是Asynchronous JavaScript and XML，即异步JavaScript和XML。Ajax是一种用于创建动态Web应用程序的技术。它使用JavaScript、XML和HTTP请求来实现异步数据交换。异步数据交换意味着Web应用程序可以在不刷新整个页面的情况下更新部分页面内容（局部刷新），从而提高用户体验。

search

基本原理

Ajax通过JavaScript和XMLHttpRequest对象实现异步通信，从而实现在不刷新整个页面的情况下更新页面的部分内容。

具体来说，当用户与页面交互时，JavaScript代码会通过XMLHttpRequest对象向服务器发送请求，服务器返回数据后，JavaScript代码再将数据更新到页面的指定位置，从而实现页面的动态更新。由于这个过程是异步的，因此用户可以在等待数据返回的同时继续进行其他操作，提高了用户体验。

XMLHttpRequest 成员简介

XMLHttpRequest (XHR) 对象是实现 AJAX 的核心，它提供了与服务器进行 HTTP 通信的能力。以下是其主要成员（属性、方法和事件）的详细介绍：

属性名 类型 描述
readyState 整数 请求状态码，取值范围 0-4（见下方状态说明）
status 整数 HTTP 响应状态码（如 200、404、500 等）
statusText 字符串 HTTP 响应状态文本（如 "OK"、"Not Found"）
responseText 字符串 响应数据的文本形式（适用于 JSON、HTML 等）
responseXML XMLDocument 响应数据的 XML 形式（仅当响应为 XML 时可用）
response 任意类型 响应数据（现代浏览器支持，自动根据 responseType 解析）
responseType 字符串 响应数据类型（如 "text"、"json"、"blob"、"arraybuffer" 等）
timeout 整数 请求超时时间（毫秒），超时后触发 ontimeout 事件
withCredentials 布尔值 是否在跨域请求中携带凭证（如 cookies、HTTP 认证信息）
upload XMLHttpRequestUpload 用于监控上传进度的对象（可绑定 onprogress 等事件）

readyState 状态说明

值 状态名 描述
0 UNSENT 实例已创建，但未调用 open()
1 OPENED 已调用 open()，但未调用 send()
2 HEADERS_RECEIVED 已调用 send()，服务器已返回响应头
3 LOADING 正在接收响应体数据
4 DONE 请求完成，响应已就绪
方法名 语法 描述
open() xhr.open(method, url, async, username, password) 配置请求参数：
- method：HTTP 方法（GET、POST 等）
- url：请求地址
- async：是否异步（默认 true）
- username/password：可选，用于 HTTP 认证
send() xhr.send(body) 发送请求：
- body：请求体（GET 时为 null，POST 时为数据）
setRequestHeader() xhr.setRequestHeader(header, value) 设置请求头（需在 open() 后、send() 前调用）
getResponseHeader() xhr.getResponseHeader(header) 获取指定响应头的值
getAllResponseHeaders() xhr.getAllResponseHeaders() 获取所有响应头（字符串形式）
abort() xhr.abort() 取消正在进行的请求（状态变为 0）
overrideMimeType() xhr.overrideMimeType(mime) 覆盖响应的 MIME 类型（如强制解析为 XML）
事件名 触发时机 描述
onreadystatechange readyState 改变时 传统事件，需手动判断 readyState 和 status
onload 请求成功完成时（readyState=4） 现代事件，无需判断 readyState，仅需检查 status
onerror 网络错误（如连接失败） 触发时 status 为 0
ontimeout 请求超时时 需设置 timeout 属性才会触发
onprogress 接收响应数据时（下载） 可用于显示下载进度
upload.onprogress 发送请求数据时（上传） 可用于显示上传进度 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
const xhr = new XMLHttpRequest();        
xhr.open('GET', 'https://api.example.com/data', true); // 配置请求        
xhr.responseType = 'json'; // 设置响应类型（现代浏览器支持）        
xhr.onload = function() { // 注册事件
  if (xhr.status === 200) {
    console.log('响应数据:', xhr.response); // 自动解析为 JSON
  } else {
    console.error('请求失败:', xhr.status);
  }
};

xhr.onerror = function() {
  console.error('网络错误');
};

xhr.send(null); // 发送请求

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
const xhr = new XMLHttpRequest();

xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');

xhr.onload = function() {
  if (xhr.status === 201) {
    console.log('提交成功:', xhr.responseText);
  } else {
    console.error('提交失败:', xhr.status);
  }
};

xhr.send(JSON.stringify({ // 发送 JSON 数据
  name: 'Alice',
  age: 25
}));

虽然 XMLHttpRequest 功能完整，但现代开发中更常用以下替代方案：

Fetch API：基于 Promise 的现代网络请求 API，语法更简洁： 

1
2
3
4
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

发展历程

Ajax的发展历程可以分为以下几个阶段：

  1. XMLHttpRequest的出现（1999年）：XMLHttpRequest是一种可以在不刷新页面的情况下向服务器发送请求和接收响应的技术。它最初是为了实现Gmail的邮件预览功能而开发的。

  2. Ajax的命名（2005年）：Ajax这个词是由Jesse James Garrett在2005年提出的，它是Asynchronous JavaScript and XML的缩写。这个词的出现标志着Ajax开始成为一种独立的技术。

  3. jQuery的出现（2006年）：jQuery是一种流行的JavaScript库，它简化了使用Ajax的过程，使得开发者可以更容易地使用Ajax技术。

  4. HTML5的出现（2008年）：HTML5引入了一些新的API，如XMLHttpRequest Level 2和WebSockets，使得Ajax技术更加强大和灵活。

  5. Ajax的普及（2010年至今）：随着Web应用程序的普及，Ajax技术也变得越来越重要。现在，几乎所有的Web应用程序都使用Ajax技术来实现动态交互和数据更新。同时，Ajax技术也在移动应用程序和桌面应用程序中得到了广泛的应用。

应用场景

Ajax技术可以应用于以下场景：

  1. 动态更新页面内容：使用Ajax技术可以在不刷新整个页面的情况下更新页面的部分内容，从而提高用户体验。

  2. 表单验证和提交：使用Ajax技术可以在用户提交表单之前对表单进行验证，从而减少服务器的负担和提高用户体验。

  3. 实时搜索和过滤：使用Ajax技术可以在用户输入关键字时实时搜索和过滤数据，从而提高搜索的效率和准确性。

  4. 购物车和结算：使用Ajax技术可以实现购物车和结算功能，从而提高用户购物的体验和效率。

  5. 即时通讯和聊天室：使用Ajax技术可以实现即时通讯和聊天室功能，从而提高用户的沟通效率和体验。

  6. 数据可视化和图表展示：使用Ajax技术可以将服务器返回的数据以图表的形式展示在页面上，从而提高数据的可视化程度和用户体验。

  7. Web游戏和交互式应用：使用Ajax技术可以实现Web游戏和交互式应用，从而提高用户的娱乐体验和互动性。

特点

  1. 提高用户体验：使用Ajax技术可以在不刷新整个页面的情况下更新页面的部分内容，从而提高用户体验。

  2. 减少服务器负担：使用Ajax技术可以在用户提交表单之前对表单进行验证，从而减少服务器的负担。

  3. 提高搜索效率和准确性：使用Ajax技术可以在用户输入关键字时实时搜索和过滤数据，从而提高搜索的效率和准确性。

  4. 提高购物体验和效率：使用Ajax技术可以实现购物车和结算功能，从而提高用户购物的体验和效率。

  5. 提高沟通效率和体验：使用Ajax技术可以实现即时通讯和聊天室功能，从而提高用户的沟通效率和体验。

  6. 提高数据可视化程度和用户体验：使用Ajax技术可以将服务器返回的数据以图表的形式展示在页面上，从而提高数据的可视化程度和用户体验。

  7. 实现Web游戏和交互式应用：使用Ajax技术可以实现Web游戏和交互式应用，从而提高用户的娱乐体验和互动性。

  1. 对搜索引擎不友好：由于Ajax技术是通过JavaScript动态更新页面内容，因此对搜索引擎的抓取和索引不友好。

  2. 安全性问题：由于Ajax技术可以在不刷新页面的情况下向服务器发送请求和接收响应，因此存在一定的安全性问题，如跨站脚本攻击（XSS）和跨站请求伪造（CSRF）等。

  3. 对浏览器兼容性要求高：由于不同浏览器对JavaScript和Ajax的支持程度不同，因此在开发过程中需要考虑浏览器兼容性问题。

  4. 对服务器的压力较大：由于Ajax技术可以在不刷新页面的情况下向服务器发送请求和接收响应，因此可能会对服务器造成一定的压力。

原生Ajax

Javascript直接使用XMLHttpRequest对象进行Ajax请求步骤如下：

  1. 创建XMLHttpRequest对象：

    1
    var xhr = new XMLHttpRequest();

  2. 设置请求参数：

    1
    xhr.open('GET', 'http://example.com/api/data', true);

    其中，第一个参数表示请求的类型（GET或POST），第二个参数表示请求的URL，第三个参数表示是否异步（true表示异步，false表示同步）。

  3. 设置请求头部：

    1
    xhr.setRequestHeader('Content-Type', 'application/json');

    其中，第一个参数表示请求头部的名称，第二个参数表示请求头部的值。

  4. 发送请求：

    1
    xhr.send();

    如果是POST请求，需要在send()方法中传递请求参数，如下所示：

    1
    xhr.send('{"name": "John", "age": 30}');

  5. 监听响应：

    1
2
3
4
5
6
7
8
9
    xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error: ' + xhr.status);
    }
  }
};

    其中，readyState属性表示XMLHttpRequest对象的状态，4表示服务器已经返回响应数据；status属性表示服务器返回的状态码，200表示请求成功。

完整代码如下：

原生Ajax操作
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/api/data', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(xhr.responseText);
    } else {
      console.error('Error: ' + xhr.status);
    }
  }
};

在实际开发中，可以根据具体需求设置请求参数、请求头部和请求方法，以及处理响应数据。

Ajax框架

jQuery

jQuery是一个流行的JavaScript库，提供了方便的方法来处理Ajax请求。下面是使用jQuery处理Ajax的示例代码：

  1. 发送GET请求：

    1
2
3
    $.get('http://example.com/api/data', function(data) {
  console.log(data);
});

    其中，第一个参数表示请求的URL，第二个参数是回调函数，用于处理服务器返回的数据。

  2. 发送POST请求：

    1
2
3
    $.post('http://example.com/api/data', {name: 'John', age: 30}, function(data) {
  console.log(data);
});

    其中，第一个参数表示请求的URL，第二个参数是请求参数，第三个参数是回调函数，用于处理服务器返回的数据。

  3. 发送JSON数据：

    1
2
3
4
5
6
7
8
9
    $.ajax({
  url: 'http://example.com/api/data',
  type: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({name: 'John', age: 30}),
  success: function(data) {
    console.log(data);
  }
});

    其中，url表示请求的URL，type表示请求的类型，contentType表示请求头部的Content-Type，data表示请求的数据，success表示请求成功后的回调函数。

总之，使用jQuery处理Ajax请求可以简化代码，提高开发效率。需要注意的是，jQuery需要在页面中引入相应的库文件。

axios

Axios是一个流行的JavaScript库，用于处理Ajax请求。下面是使用Axios处理Ajax的示例代码：

  1. 发送GET请求：

    1
2
3
4
5
6
7
    axios.get('http://example.com/api/data')
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.error(error);
  });

    其中，get()方法用于发送GET请求，then()方法用于处理服务器返回的数据，catch()方法用于处理请求失败的情况。

  2. 发送POST请求：

    1
2
3
4
5
6
7
    axios.post('http://example.com/api/data', {name: 'John', age: 30})
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.error(error);
  });

    其中，post()方法用于发送POST请求，第一个参数表示请求的URL，第二个参数表示请求的数据，then()方法用于处理服务器返回的数据，catch()方法用于处理请求失败的情况。

  3. 发送JSON数据：

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
    axios({
  method: 'post',
  url: 'http://example.com/api/data',
  headers: {'Content-Type': 'application/json'},
  data: {name: 'John', age: 30}
})
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    console.error(error);
  });

    其中，method表示请求的类型，url表示请求的URL，headers表示请求头部信息，data表示请求的数据，then()方法用于处理服务器返回的数据，catch()方法用于处理请求失败的情况。

总之，使用Axios处理Ajax请求可以简化代码，提高开发效率。需要注意的是，Axios需要在页面中引入相应的库文件。