JavaScript 原生 AJAX 实现步骤详解：从创建到响应处理

AJAX 核心与对象创建

使用 JavaScript 发送 AJAX 请求，需要按照特定的步骤逐步进行。

AJAX 技术的核心在于 XMLHttpRequest 对象。

第一步：创建一个 XMLHttpRequest 对象。主流浏览器均支持通过 new 关键字实例化该对象。

var xmlhttp = new XMLHttpRequest()。需要注意的是，旧版 IE 浏览器不支持此方法，需编写兼容函数进行创建。

连接与发送请求步骤

第二步：连接服务端。

获取到 XMLHttpRequest 对象后，即可调用其 open() 方法与服务器建立连接，该方法接受以下参数。

open(method, url, async)：

• method：指定请求方法，通常为 GET 或 POST。
• url：指定服务器的请求地址。
• async：布尔值，表示是否异步请求，默认为 true，可省略不写。
• 示例代码：xmlhttp.open("GET", "/ajax_get/", true);

第三步：发送请求。

调用 xmlhttp.send(null)。此处加上 null 主要是为了解决部分浏览器的兼容性问题。null 在 JavaScript 中是一种数据类型，表示空值。

上述三个步骤的功能大致相当于 jQuery 中的 。

$.ajax({
　　url:"/ajax_get/",
　　type:"GET",
　　success:function(){　　
　　}
　　)}

响应状态监听与数据处理

第四步：接收服务器响应。

请求发出后，服务端开始执行处理逻辑。

XMLHttpRequest 对象提供了一个 onreadystatechange 事件监听器。

该事件包含 5 种状态：0 表示初始化，仅创建了 XMLHttpRequest 对象；

1 表示请求已开始，即调用了 open() 方法；

2 表示请求发送完成，即调用了 send() 方法；

3 表示正在读取服务器响应；

4 表示服务器响应读取结束。

onreadystatechange 事件会在状态为 1、2、3、4 时触发。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

</head>
<body>

<form action="/index/" method="post">

  <p><input type="text">{{ error }}</p>
  <p><input type="text">{{ error }}</p>
  <p><input type="submit"></p>

</form>

<p>用户名：<input type="text" class="user"></p>
<button onclick="send()">ajax</button>

</body>

<script>
{#  给button按钮绑定send事件#}
  function send() {

    var ele = document.getElementsByClassName("user")[0];
    var con = ele.valueOf;

    xmlHttp=new XMLHttpRequest();
    xmlHttp.open("GET","/getajax/",true);
    xmlHttp.send(null);

    {#监听服务端 #}
    xmlHttp.onreadystatechange=function () {
      if (xmlHttp.readyState ==4 && xmlHttp.status ==200){
        alert(xmlHttp.responseText);
        alert(typeof xmlHttp.responseText)

      }
    }

 }通过XMLHttpRequest对象的readyState属性来得到XMLHttpRequest对象的状态。需要获取到服务器响应的内容，可以通过XMLHttpRequest对象的responseText得到服务器响应内容。

</script>


</html>

POST 请求的特殊处理

关于 AJAX 的 POST 请求处理。

<1> 需要设置请求头：xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 注意：HTML form 表单默认会设置此键值对，若未手动设定，Web 服务器可能会忽略请求体内容。

<2> 在发送时可以指定请求体数据：xmlHttp.send("username=yuan&password=123")。

创建 XMLHttpRequest 对象；

调用 open() 方法打开与服务器的连接；

调用 send() 方法发送请求；

为 XMLHttpRequest 对象指定 onreadystatechange 事件处理函数，该函数会在

XMLHttpRequest 对象的 readyState 为 1、2、3、4 四种状态时被调用；

XMLHttpRequest 对象共有 5 种状态，通常我们只关心状态 4。

XMLHttpRequest 对象的 status 属性表示服务器状态码，它只有在 readyState 为 4 时才能获取到。

XMLHttpRequest 对象的 responseText 属性表示服务器响应内容，它只有在 readyState 为 4 时才能获取到！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。