Ajax及其应用

用户5454780681086
75 阅读4分钟

关于Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。 用于实现与服务器进行异步交互的功能。

  • Ajax的核心是XMLHttpRequest对象。
  • 由浏览器提供，开发者可以使用它发出HTTP和HTTPS请求。
  • 不需要刷新（重新提交）页面，就可以获取服务器最新的相应，从而修改页面的内容。

Ajax的工作原理

ajax的工作原理就是通过xmlhttprequest对象来向服务器发出异步请求，从服务器中获得数据，然后用javascript来操作dom从而更新局部页面。

  1. 创建请求：当用户在网页上执行某个操作（如点击按钮、输入数据等）时，JavaScript代码会捕获到这个动作，并创建一个HTTP请求。这个请求是通过XMLHttpRequest对象或者现代浏览器中的Fetch API来创建的。
  2. 发送请求：创建好请求后，JavaScript代码会将这个请求发送给服务器。这个请求可以包含多种信息，如请求的URL、请求方法（GET、POST等）、请求头以及请求体等。
  3. 服务器处理：服务器接收到请求后，会根据请求的内容进行相应的处理。这可能包括查询数据库、执行计算、读取文件等操作。处理完成后，服务器会生成一个响应，这个响应通常包含处理结果的数据。
  4. 返回响应：服务器将生成的响应发送回客户端（即用户的浏览器）。这个响应同样包含多种信息，如响应状态码、响应头以及响应体等。
  5. 处理响应：当浏览器接收到服务器的响应后，JavaScript代码会监听这个响应的到来，并读取响应的内容。然后，JavaScript代码会根据响应的数据来动态地更新页面的部分内容。这通常涉及到操作DOM（文档对象模型），以将新的数据插入到页面的指定位置。
  6. 更新页面：最后，用户会看到页面上的部分内容已经被更新，而整个页面并没有重新加载。这就是AJAX带来的最大优势之一：能够提供更为流畅和快速的用户体验。

G9~`(I9MX(~RYQK`NOTKFVV.png

关于XMLHttpRequest对象

XMLHttpRequest对象是AJAX技术的核心，它允许Web应用程序与服务器进行异步通信，从而在不重新加载整个页面的情况下更新页面内容。

  • XMLHttpRequest对象提供了许多属性，常用的有如图所示：

    H29O1SAALFFAGI_$Z`E]5HX.png

  • XMLHttpRequest对象常用方法：

    image.png

  • XMLHttpRequest对象事件

XMLHttpRequest对象的主要事件是onreadystatechange，当readyState属性的值发生变化时，就会触发此事件。通常，我们在处理AJAX请求时，会在onreadystatechange事件处理函数中检查readyState的值，并在值为4（即请求已完成）时处理响应数据。

var xhr = new XMLHttpRequest(); 
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) { // 请求已完成，且响应状态码为200 
    var responseData = xhr.responseText; // 处理响应数据... 
    } };
    xhr.open('GET', 'example.com/data', true); 
    xhr.send();

在上面的示例中，当readyState变为4，并且status为200时，我们从responseText中获取响应数据，并进行后续处理。

JSONPlaceholder

JSONPlaceholder 是一个免费的在线 REST API，我们可以使用它来创建一些关于 AJAX 和 XMLHttpRequest 对象的示例。

  1. 获取数据(GET 请求)：
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Error: ', xhr.status);
  }
};
xhr.send();

在这个示例中，我们发送了一个 GET 请求到 JSONPlaceholder 的 /posts 路径，然后在控制台打印出响应。

  1. 发送数据(POST 请求)：
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://jsonplaceholder.typicode.com/posts', true);
xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status === 201) {
    console.log(xhr.response);
  } else {
    console.error('Error: ', xhr.status);
  }
};
var data = JSON.stringify({ title: 'foo', body: 'bar', userId: 1 });
xhr.send(data);

在这个示例中，我们发送了一个 POST 请求到 JSONPlaceholder 的 /posts 路径，同时发送了一些 JSON 数据。然后在控制台打印出响应。

  1. 更新数据(PUT 请求)：
var xhr = new XMLHttpRequest();
xhr.open('PUT', 'https://jsonplaceholder.typicode.com/posts/1', true);
xhr.setRequestHeader('Content-type', 'application/json; charset=UTF-8');
xhr.responseType = 'json';
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.response);
  } else {
    console.error('Error: ', xhr.status);
  }
};
var data = JSON.stringify({ id: 1, title: 'foo', body: 'bar', userId: 1 });
xhr.send(data);

在这个示例中，我们发送了一个 PUT 请求到 JSONPlaceholder 的 /posts/1 路径，同时发送了一些 JSON 数据来更新 post。然后在控制台打印出响应。

以上这些例子展示了如何使用 XMLHttpRequest 对象和 AJAX 发送 GET、POST 和 PUT 请求。每个请求都有一个回调函数，当请求成功时，会打印出服务器的响应。

avatar
文章
阅读
粉丝