原生Ajax

最新推荐文章于 2024-09-19 16:13:24 发布

小森呀

最新推荐文章于 2024-09-19 16:13:24 发布

阅读量189

点赞数

分类专栏： Ajax 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/KEY2018/article/details/117829488

版权

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

get

var xhr = new XMLHttpRequest();
      xhr.open("GET", "http://127.0.0.1:8000?a=100", false);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText);
          } else {
            console.log(err);
          }
        }
      };
      xhr.send();

post

var xhr = new XMLHttpRequest();
      xhr.open("POST", "http://127.0.0.1:8000", false);
      xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300) {
            console.log(xhr.responseText);
          } else {
            console.log(100);
          }
        }
      };
      xhr.send("a=124");

简易封装

function Ajax(request, url, data, type) {
  var xhr = new XMLHttpRequest();
  xhr.open(request, url, type);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
      if (xhr.status >= 200 && xhr.status < 300) {
        console.log(xhr.responseText);
      } else {
        console.log(err);
      }
    }
  };
  xhr.send(data);
}

readyState(服务器响应的状态信息)

0	请求未初始化（代理被创建，但尚未调用 open() 方法）
1	服务器连接已建立（open方法已经被调用）
2	请求已接收（send方法已经被调用，并且头部和状态已经可获得）
3	请求处理中（下载中，responseText 属性已经包含部分数据）
4	请求已完成，且响应已就绪（下载操作已完成）