创建ajax对象_创建ajax对象的代码-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_47700705/article/details/139167495
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>
  <script>
    // 目的：客户端希望能够从服务端获取数据，最终在页面中展示

    // 数据存储在：数据库, java php node(服务端语言)可以访问和操作数据库

    // 如果完成 客户端与服务端通信呢？ 通过ajax技术

    /* 
        第一步：创建ajax对象   XMLHttpRequest(非ie6浏览器)  ActiveXObject（ie5-ie6浏览器）    （fetch ES6）
    
    */

    // 1、创建ajax对象 返回一个ajax实例对象

    let oajax = new XMLHttpRequest();
    console.log("请求未初始化", oajax.readyState);

    /*
      连接到服务器   http通信(超文本传输协议)  服务端地址，请求方式，向服务端发送的数据
      请求方式： get  post  
      语法：oajax.open('请求方式','json/test.json',true);//异步：true（默认为true）  同步：false
    */
    //oajax.open('GET','json/test.json',true);

    oajax.open("GET", "json/data.html", true);
    //oajax.open('GET','json/user.txt',true);

    console.log("服务器连接已建立", oajax.readyState);

    /* 设置返回的数据类型 注：需要根据请求资源手动设定 响应数据类型


      text 文本
      json  json格式
      document  HTML/XML文档
    */

    oajax.responseType = "document";

    /* 
      发送请求
    */
    oajax.send();

    /* 
      监听服务端响应   状态码：（请求状态、http状态码、业务状态）
      请求状态：0-4

      0: 请求未初始化（还没有调用到open方法）
      1: 服务器连接已建立（已调用send方法，正在发生请求）
      2: 请求已接收（send方法完成，已接收到全部响应内容）
     3: 请求处理中（解析响应内容）
     4: 请求已完成，且响应已就绪

      oajax.readyState （只读属性 用于获取当前的请求状态）

      http状态码：服务端响应状态码标记 和 请求状态没有任何关系，不同的状态码表面了不同的结果：

      200 请求成功 ok （最喜欢看到的）
      500 服务器内部错误（这是后端的问题）
      404 请求的资源不存在 （可以是客户端地址写错了，也有可能是服务端不存在地址）
      403 服务端拒绝访问（没有权限访问）
      405 请求方式不存在 （你的请求方式写错了 服务端要求：get 你写了 post）

      oajax.status （只读属性 用于获取当前的http状态码）


       请求（request） 响应（response）

       获取服务端返回的响应结果
       oajax.responseText 文本类型
       oajax.response json类型
    */

    oajax.onreadystatechange = function () {
      console.log(oajax.readyState, oajax.status);

      if (oajax.readyState === 2) {
        console.log("请求已接收");
      }

      if (oajax.readyState === 3) {
        console.log("请求处理中");
      }

      if (oajax.readyState === 4 && oajax.status === 200) {
        console.log("请求已完成,请求已成功");

        //console.log("响应结果",oajax.responseText)

        console.log("响应结果json格式", oajax.response);
      }
    };
  </script>
</html>