Ajax的js原生实现

一、Ajax简介

Ajax全称是，Asynchronous JavaScript + XML（异步JavaScript和XML）, 其本身不是一种新技术，是现有技术集合成的一个方法。当使用结合了这些技术的AJAX模型以后， 网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。这使得程序能够更快地回应用户的操作。

Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。

二、用到的技术

1.使用CSS和XHTML or HTML页面显示

2. 使用DOM模型来交互和动态显示

3.使用XMLHttpRequest来和服务器进行异步通信

4.使用javascript来绑定和调用

AJAX 的核心是 XMLHttpRequest 对象，而且不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的

IE 浏览器使用 ActiveXObject，而其他的浏览器使用名为 XMLHttpRequest 的 JavaScript 内建对象

二、XMLHttpReques

XMLHttpRequest 对象用于在后台与服务器交换数据，它允许网页在不影响用户的操作的情况下更新页面的局部内容。

构造函数：

XMLHttpRequest()

该构造函数用于初始化一个 XMLHttpRequest 对象。在调用其他方法之前，必须先调用该构造函数，或通过其他方式间接得到一个 XMLHttpRequest 对象。

常用属性：

1.XMLHttpRequest.onreadystatechange

当 readyState 属性发生变化时调用的 EventHandler

2.XMLHttpRequest.readyState 

返回 一个无符号短整型（unsigned short）数字，代表请求的状态码

3.XMLHttpRequest.responseText 

返回一个 DOMString，该 DOMString 包含对请求的响应，如果请求未成功或尚未发送，则返回 null

4.XMLHttpRequest.status 

返回一个无符号短整型（unsigned short）数字，代表请求的响应状态

常用方法：

1.XMLHttpRequest.abort()

如果请求已被发送，则立刻中止请求

2.XMLHttpRequest.open()

初始化一个请求。该方法只能在 JavaScript 代码中使用

3.XMLHttpRequest.send()

发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回

4.XMLHttpRequest.setRequestHeader()

设置 HTTP 请求头的值。您必须在 open() 之后、send() 之前调用 setRequestHeader() 方法

三、js原生实现

实现AJAX，有如下四步：

1.创建XMLHttpRequest对象。

2.设置请求方式及参数。

3.调用回调函数（非异步无）。

4.发送请求。

//第一步：创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();

//第二步：初始化一个请求，设置请求方式及参数,true表示异步处理
var url = 'xxxxxx';
xmlHttp.open('POST', url, true);

//第三步：调用回调函数
xmlHttp.onreadystatechange = function () {
    if (xmlHttp.readyState === 4) {
        if (xmlHttp.status === 200) {
            console.log(xmlHttp.responseText);
        } else {
            alert("ajax服务器返回错误！");
        }
    }
}

//发送请求
var params = 'userName=' + document.getElementsByName('userName')[0].value + "&userPass=" + document.getElementsByName("userPass")[0].value;
xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=UTF-8");
xmlHttp.send(params);

本文章参考了https://blog.csdn.net/weixin_37580235/article/details/81459282部分内容。