原生的js实现ajax请求

2022-01-22 06:39:15

AJAX是什么？

AJAX的全称是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

AJAX是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。而传统的网页（不使用ajax）如果需要更新内容，必须重载整个网页面。

实现AJAX

XMLHttpRequest对象

XMLHttpRequest对象是AJAX的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。

XMLHTTPRequest的方法：

abort()：停止当前请求
getAllResponseHeaders()：把HTTP请求的所有响应首部作为键/值对返回
getAllResponseHeader("header")：返回指定首部的串值
open(method, url, [asyncFlag], [username], [password])：建立对服务器的调用。method参数可以是GET、POST或PUT。url参数可以是相对URL或绝对URL。这个方法还包括3个可选的参数，是否异步，用户名，密码
send(content)：向服务器发送请求
setRequestHeader("header", "value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和请求一起发送 (‘post‘方法一定要 )

五步使用法

创建XMLHttpRequest对象
使用open方法设置和服务器交互的信息
设置发送的数据，开始和服务器交互
注册事件
更新界面

异步get请求

 function get() {
        //1.
        let ajax = new XMLHttpRequest();
        //2.
        ajax.open("get", "/web/user/login.do?username=tom&password=123", true);
        //3.
        ajax.send();
        //4.
        ajax.onreadystatechange = () => {
            if (ajax.readyState === 4 && ajax.status === 200){
                //5.
                console.log(ajax.responseText);
            }
        }
    }

异步post请求

function post() {
      let ajax = new XMLHttpRequest();
      ajax.open("post", "/web/user/login.do");
      //
      ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      ajax.send("username=tom&password=123");
      ajax.onreadystatechange = () => {
          if(ajax.readyState === 4 && ajax.status === 200){
              console.log(ajax.responseText);
          }
      }
    }