Ajax及其应用

最新推荐文章于 2024-07-26 16:20:18 发布

原创最新推荐文章于 2024-07-26 16:20:18 发布 · 837 阅读

17 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #前端 #javascript

一、什么是AJAX？

Ajax全称为Asynchronous JavaScript and XML，是一种用于创建动态网页的技术。它允许Web应用程序在不重新加载整个页面的情况下与服务器通信，从而可以快速地更新部分网页内容。

二、Ajax工作原理分析。

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面。

创建XMLHttpRequest对象：
Ajax的核心是XMLHttpRequest对象。这个对象用于和服务器交换数据。在较新的浏览器中，也可以使用Fetch API或Axios等库来替代XMLHttpRequest。

var xhr = new XMLHttpRequest();//创建一个XMLHttpRequest对象

发送HTTP请求：
通过XMLHttpRequest对象的open()和send()方法，可以发送一个HTTP请求到服务器。open()方法用于设置请求的类型（GET、POST等）和请求的URL，send()方法用于发送请求。如果需要发送数据（如在POST请求中），可以将数据作为send()方法的参数。

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求类型、URL 以及是否异步处理该请求
xhr.open('GET', 'your-endpoint-url', true);

// 设置请求完成的回调函数
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功时执行的代码
    console.log(xhr.responseText); // 打印响应内容
  } else {
    // 请求失败时执行的代码
    console.error('The request failed!');
  }
};

// 设置请求遇到错误时的回调函数
xhr.onerror = function () {
  console.error('There was an error making the request.');
};

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

监听服务器响应：
一旦请求发送出去，就可以通过监听XMLHttpRequest对象的onreadystatechange事件来接收服务器的响应。这个事件会在请求的状态改变时触发。

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        // 请求成功，处理服务器返回的数据
        var responseData = xhr.responseText;
        // 在这里可以根据需求处理响应数据，例如更新页面内容
    }
};

在以上这段代码中，当xhr.readyState的值变为4，且xhr.status的值等于200时，说明服务器已经响应请求，此时可以通过xhr.responseText获取服务器返回的响应内容。

处理服务器响应：
当收到服务器的响应后，可以通过XMLHttpRequest对象的responseText或responseXML属性来获取响应的数据。这些数据通常是HTML、XML或JSON格式的。然后，可以使用JavaScript来解析和处理这些数据，并更新页面的部分内容。

// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();

// 配置请求类型、URL 以及是否异步处理该请求
xhr.open('GET', 'your-endpoint-url', true);

// 设置请求完成的回调函数
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    // 请求成功时执行的代码
    // 服务器响应的数据存储在 xhr.responseText 中
    var responseData = xhr.responseText;
    // 根据响应数据的类型进行处理
    if (responseData.startsWith('{') && responseData.endsWith('}')) {
      // 假设服务器返回的是JSON格式的数据
      responseData = JSON.parse(responseData);
    }
    // 在这里处理转换后的响应数据
    console.log('Success:', responseData);
  } else {
    // 请求失败时执行的代码
    console.error('The request failed!');
  }
};

// 设置请求遇到错误时的回调函数
xhr.onerror = function () {
  console.error('There was an error making the request.');
};

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

在这个示例中，我们创建了一个 XMLHttpRequest 对象，并配置了一个 GET 请求。我们为这个请求设置了两个事件监听器：onload 和 onerror。在 onload 回调函数中，我们检查了请求的状态码（xhr.status），确保它表示一个成功的请求。如果请求成功，我们就可以从 xhr.responseText 中获取服务器响应的数据。

异步处理：
Ajax的一个重要特性是异步处理。这意味着在发送HTTP请求后，浏览器不会等待服务器的响应，而是继续执行其他的JavaScript代码。当服务器的响应到达时，会触发onreadystatechange事件，然后执行相应的事件处理函数。这种异步处理的方式使得网页能够保持响应性，不会因为等待服务器的响应而阻塞。这样在不阻止用户界面（UI）更新的情况下，执行耗时长的操作，如服务器请求、文件读取、数据处理等。可以提高用户体验，因为用户可以在等待操作完成的同时继续与页面交互。
（1）回调函数（Callback）：回调函数是一种将函数作为参数传递给另一个函数的函数。在异步操作完成时，会调用这个回调函数来处理结果。

function longRunningOperation(callback) {
  // 假设这个操作需要一段时间才能完成
  setTimeout(function() {
    callback(result); // result 是操作的结果
  }, 1000);
}

longRunningOperation(function(result) {
  console.log(result);
});

Promise对象： Promise是ES6引入的，用于表示一个异步操作的最终完成（或失败），以及其结果值。Promise对象有两个基本的状态：pending（进行中）和fulfilled（已成功），以及一个失败的状态rejected（已失败）。

function longRunningOperation() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve(result); // result 是操作的结果
    }, 1000);
  });
}

longRunningOperation().then(function(result) {
  console.log(result);
}).catch(function(error) {
  console.error('Operation failed:', error);
});

二、对XMLHttpRequest对象的理解。

（1）属性

onreadystatechange： 这是一个事件处理函数，每当 XMLHttpRequest 对象的 readyState 改变时，都会调用这个函数。readyState 表示请求的状态，从 0 到 4 变化，分别代表：

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

readyState： 这是一个只读属性，它表示 XMLHttpRequest 对象当前的状态。
status： 这是一个只读属性，它表示 HTTP 响应的状态码。例如，200 表示成功，404 表示未找到资源。
statusText： 这是一个只读属性，它表示 HTTP 响应的状态文本，例如 “OK” 或 “Not Found”。
responseText：这是一个只读属性，它包含服务器的响应文本数据。如果响应的数据类型是文本，则使用这个属性。
responseXML： 这是一个只读属性，它包含服务器的响应XML数据。如果响应的数据类型是XML，则使用这个属性。
responseType： 这是一个可写属性，允许你指定期望的响应类型，例如 "arraybuffer"、"blob"、"document"、"json" 或 "text"。
withCredentials： 这是一个布尔属性，用于指定是否应该将认证信息（如cookies）包括在请求中。

（2）方法

open(method, url, async, user, password)：初始化一个新的请求。method 是HTTP方法（如 GET、POST 等），url 是请求的URL，async 是一个布尔值，指示请求是异步的还是同步的，user 和 password 是可选的用户名和密码。
send(string/Blob/ArrayBuffer/FormData)：发送请求到服务器。如果请求的方法是 GET，则这个方法可以不接受任何参数。如果是 POST 或其他方法，则需要传递一个字符串、Blob、ArrayBuffer 或 FormData 对象作为请求的主体。
abort()：取消请求。
getAllResponseHeaders()：返回所有HTTP响应头作为字符串。
getResponseHeader(header)：返回一个特定的HTTP响应头。header 参数是一个表示头名称的字符串。

（3）事件

onreadystatechange：如上所述，这是一个事件处理函数，用于在请求的状态改变时执行代码。
onload：当请求成功完成时触发。
onerror：当请求遇到错误时触发。
ontimeout：当请求超时时触发。

三、以JSONPlaceHolder为数据服务，编写案例，以进一步阐述Ajax及XMLHttpRequest对象的用法。

JSONPlaceholder 是一个免费的在线服务，用于测试和原型设计。它为我们提供了一个假的 REST API，可以返回用户数据、照片、评论等。我们可以使用 XMLHttpRequest 对象来与这个 API 进行交互。
以下是一个使用 XMLHttpRequest 对象与 JSONPlaceholder 服务的示例，涵盖了多种应用场景，包括创建用户、获取用户列表、更新用户和删除用户。

// 获取用户列表
function getUserList() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'https://jsonplaceholder.typicode.com/users', true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var users = JSON.parse(xhr.responseText);
      displayUsers(users);
    }
  };
  xhr.send();
}

// 显示用户列表
function displayUsers(users) {
  var ul = document.createElement('ul');
  users.forEach(function(user) {
    var li = document.createElement('li');
    li.textContent = user.name;
    ul.appendChild(li);
  });
  document.body.appendChild(ul);
}

// 创建新用户
function createUser() {
  var newUser = {
    name: 'New User',
    username: 'newuser',
    email: 'newuser@example.com',
    phone: '123-456-7890',
    website: 'https://newuser.com'
  };

  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'https://jsonplaceholder.typicode.com/users', true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 201) {
      console.log('User created successfully');
    }
  };
  xhr.send(JSON.stringify(newUser));
}

// 更新用户
function updateUser(userId) {
  var updatedUser = {
    name: 'Updated Name',
    username: 'updateduser',
    email: 'updateduser@example.com',
    phone: '123-456-7890',
    website: 'https://updateduser.com'
  };

  var xhr = new XMLHttpRequest();
  xhr.open('PUT', `https://jsonplaceholder.typicode.com/users/${userId}`, true);
  xhr.setRequestHeader('Content-Type', 'application/json');
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log('User updated successfully');
    }
  };
  xhr.send(JSON.stringify(updatedUser));
}

// 删除用户
function deleteUser(userId) {
  var xhr = new XMLHttpRequest();
  xhr.open('DELETE', `https://jsonplaceholder.typicode.com/users/${userId}`, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      console.log('User deleted successfully');
    }
  };
  xhr.send();
}

// 调用函数示例
getUserList();
createUser();
updateUser(1);
deleteUser(1);

在这个示例中，我们定义了四个函数：
getUserList()：获取并显示用户列表。
displayUsers(users)：接收用户列表并将其显示在页面上。
createUser()：创建一个新用户并发送到 JSONPlaceholder API。
updateUser(userId)：更新指定用户 ID 的用户信息。
deleteUser(userId)：删除指定用户 ID 的用户。
我们可以在页面加载后调用这些函数，或者根据需要手动调用它们。