原生js具体实现Ajax请求的四个步骤

什么是Ajax

全称：Asynchronous JavaScript and XML，它的出现是为了解决修改一点页面信息，而刷新整个页面，Ajax 实现了与服务器的异步通信、局部刷新页面，但它也有着优缺点：
优点：

• 页面无刷新，在页面内与服务器通信，减少用户等待的时间，增强了用户体验。

• 使用异步方式与服务器通信，响应速度快。

• 可以把一些原本服务器的工作转接到客户端，利用客户端闲置的能力来处理，减轻了服务器和宽带的负担，节约空间和宽带租用成本。

• 基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

缺点：

• 无法进行操作的后退，即不支持浏览器的页面后退。

• 对搜索引擎的支持比较弱。

• 可能会影响程序中的异常处理机制。

• 安全问题。对一些网站的攻击，如 CSRF，XXS，SQL 注入等不能很好的防御。

大概实现步骤：

1. 创建 XMLHttpRequest 对象
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

具体示列

这里以登录为列

1. 先来搭建HTML解构
   css样式这里我就不加了

<div class="wrapper">
        <h2>登录</h2>
        <ul class="login">
            <li><input type="text" id="name" name="username" required><label for="name">用户名</label></li>
            <li><input type="password" id="pwd" name="password" required><label for="pwd">密码</label></li>
            <li><input type="button" value="提交"></li>
        </ul>
    </div>

2. 下面来js部分

选择器就用jq得写法，核心的不用。

class App {
   
    constructor() {
   
    	//初始化
        this.init();
    }

    init() {
   
    	//渲染页面
        this.render();
        //绑定事件
        this.handler();
    }
    //（因为结构写在html里这就没有生成结构了）
    render() {
   
    	//选择要使用得节点，添加到生成的对象上
        this.userName = $(".login input[name=username]");
        this.passWord =