JS实现原生AJAX，在后端没有框架时，如何自建原生AJAX？

2023-12-01 05:59:29

原生JS实现原生AJAX

1. AJAX 原理

AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个网页的情况下，与服务器交换数据的技术。它利用XMLHttpRequest对象来向服务器发送请求，并在服务器响应后对网页进行局部更新。

XMLHttpRequest对象是HTML5中引入的一个新对象，它允许脚本向服务器发送请求，并在服务器响应后对网页进行局部更新。

2. 实现步骤

创建XMLHttpRequest对象
首先，我们需要创建一个XMLHttpRequest对象。在现代浏览器中，我们可以使用以下代码来创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

设置请求属性
接下来，我们需要设置请求属性。常见的请求属性包括：

method：请求类型，可以是"GET"或"POST"。
url：请求的URL。
headers：请求头。
data：请求数据。

打开请求
设置好请求属性后，我们需要打开请求。我们可以使用以下代码来打开请求：

xhr.open(method, url, true);

其中，method是请求类型，url是请求的URL，true表示异步请求。

发送请求
打开请求后，我们需要发送请求。我们可以使用以下代码来发送请求：

xhr.send(data);

其中，data是请求数据。

处理响应
服务器响应后，我们需要处理响应。我们可以使用以下代码来处理响应：

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
  }
};

其中，xhr.readyState表示请求的状态，xhr.status表示服务器的响应码。

3. 优缺点

原生JS实现原生AJAX具有以下优点：

不依赖任何第三方库。
代码简单，易于理解。
性能优异。

原生JS实现原生AJAX也具有一些缺点：

需要手动处理请求状态和响应数据。
不支持跨域请求。
兼容性较差。

4. 代码示例

以下是一个使用原生JS实现原生AJAX的代码示例：

var xhr = new XMLHttpRequest();
xhr.open("GET", "example.php", true);
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    var response = xhr.responseText;
    // 将响应数据显示在页面上
    document.getElementById("result").innerHTML = response;
  }
};

5. 跨域请求

在某些情况下，我们需要向另一个域名的服务器发送请求。这种请求称为跨域请求。由于安全限制，浏览器不允许跨域请求。

我们可以通过以下方法来实现跨域请求：

使用JSONP
JSONP是一种允许跨域请求的JSON格式。我们可以使用以下代码来实现JSONP跨域请求：

var script = document.createElement("script");
script.src = "http://example.com/jsonp.php?callback=myCallback";
document.body.appendChild(script);

function myCallback(data) {
  // 处理响应数据
}

使用CORS
CORS(Cross-Origin Resource Sharing)是一种允许跨域请求的W3C标准。我们需要在服务器端设置CORS头来允许跨域请求。我们可以使用以下代码来实现CORS跨域请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Access-Control-Allow-Origin", "*");
xhr.send();

xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    // 请求成功，处理响应数据
    var response = xhr.responseText;
    // 将响应数据显示在页面上
    document.getElementById("result").innerHTML = response;
  }
};