javascript实现原生ajax的几种方法介绍

针对“javascript实现原生ajax的几种方法介绍”，以下是完整的攻略，共分为四个部分：介绍、XMLHttpRequest方法、fetch方法和示例说明。

介绍

AJAX是异步JavaScript和XML（Asynchronous JavaScript and XML）的缩写，是一种在无需重新加载整个页面的情况下向服务器发送请求的技术。原生AJAX（也称为XHR）是基于XMLHttpRequest对象的，而在ES6中，也加入了新的fetch API来处理AJAX请求。本文将详细介绍javascript实现原生ajax的几种方法。

XMLHttpRequest方法

XMLHttpReques是由Mozilla基于JavaScript引入的，克服了JavaScript只与HTML网页配合使用的局限性，并可以使用异步机制向服务器发送请求，而不需要重新加载整个页面，从而改善了用户的体验。以下是使用XMLHttpRequest对象实现原生AJAX的具体步骤：

1. 创建XMLHttpRequest对象，可以使用以下两种方式之一：

   javascript
var xhr = new XMLHttpRequest();

   或

   javascript
var xhr = new ActiveXObject("Microsoft.XMLHTTP");

2. 创建请求处理程序：

   javascript
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};

3. 发送请求：调用open()方法设置请求类型并发送请求：

   javascript
xhr.open("GET", "example.php", true);
xhr.send();

4. 处理响应：通过监听或轮询等方式，获取服务端处理响应的数据。

fetch方法

fetch是在ES6中引入的新API，提供了更加简洁的API接口，能够与Promise和async/await结合使用，让我们的异步操作代码更加简洁易读。以下是使用fetch API实现原生AJAX的具体步骤：

1. 发送请求：fetch方法返回Promise对象，并使用请求URL初始化它：

   javascript
fetch('example.php');

2. 处理响应：在Promise对象中有一个.json()方法，它将响应主体解析为JSON格式：

   javascript
fetch('example.php')
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(JSON.stringify(myJson));
});

示例说明

下面是两个使用XMLHttpRequest和fetch方法的ajax的示例说明。

示例1：使用XMLHttpRequest实现AJAX

以下示例使用XMLHttpRequest来获取JSON格式的数据:

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.open("GET", "example.json", true);
xhr.send();

示例2：使用fetch实现AJAX

以下示例使用fetch方法来获取JSON格式的数据:

fetch('example.json')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(myJson);
  });

希望本文可以帮助大家更加深入地了解JavaScript原生AJAX的使用。