前端Ajax

最新推荐文章于 2024-11-15 15:35:41 发布

weixin_43331769

最新推荐文章于 2024-11-15 15:35:41 发布

阅读量94

点赞数 1

分类专栏： javascript Ajax 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43331769/article/details/104121468

版权

javascript 同时被 2 个专栏收录

12 篇文章 0 订阅

订阅专栏

Ajax

4 篇文章 0 订阅

订阅专栏

JavaScript基础-Ajax、Json

一、Ajax作用
二、创建Ajax步骤
- get请求：
三、json

一、Ajax作用

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

二、创建Ajax步骤

get请求：

1：创建Ajax对象
var xhr = new XMLHttpRequest();
2:打开对象
xhr.open(“GET”,“test1.txt”,true); //true表明是异步方式发送
3：发送请求
xhr.send();
4：监听请求

0 => xhr对象已经创建，但未开始初始化
1：xhr调用了open
2：发送了请求
3：返回了部分数据
4：数据全部返回

  <script>
    window.onload = function () {
      //1:创建ajax对象
      var xhr = new XMLHttpRequest();
      //4：监听请求
      xhr.onreadystatechange = function () {当xhr的对象readystate发生改变时触发
        if (xhr.readyState !== 4){  //4：数据全部返回
          return;
        }
        if(xhr.status >= 200 && xhr.status <= 300){//数据放在了xhr.responseText中， 
          document.querySelector('h1').innerText = xhr.responseText
        }else {
          console.log("请求失败");
        }
      }
      //2：打开这个对象
      xhr.open('get','./test.txt', true)//true 表明异步发送
      //3：发送请求
      xhr.send();
    }
  </script>
</head>
<body>
    <h1></h1>
</body>