Ajax学习篇-2、原生Ajax写法

最新推荐文章于 2023-11-07 19:47:12 发布

互联网切图仔

最新推荐文章于 2023-11-07 19:47:12 发布

阅读量151

点赞数

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

本文链接：https://blog.csdn.net/qq_42109047/article/details/107511392

版权

Ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

来自MDN源码

//点击按钮发送请求
<button id="ajaxButton" type="button">Make a request</button>

<script>
(function() {
  var httpRequest;
  //监听点击事件
  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
  //事件处理函数
  function makeRequest() {
  //创建XMLHttpRequest实例对象
    httpRequest = new XMLHttpRequest();

    if (!httpRequest) {
      alert('Giving up :( Cannot create an XMLHTTP instance');
      return false;
    }
    //发出请求，然后执行（onreadystatechange）传递给alertContents
    //即指定响应函数
    httpRequest.onreadystatechange = alertContents;
    //指定请求的方式以及请求的url
    httpRequest.open('GET', 'test.html');
    //发送请求
    httpRequest.send();
  }
	//响应函数，该函数为立即执行函数
	//alertContents（）检查是否收到响应
	//如果响应成功，则弹出响应内容
  function alertContents() {
    if (httpRequest.readyState === XMLHttpRequest.DONE) {
      if (httpRequest.status === 200) {
        alert(httpRequest.responseText);
      } else {
        alert('There was a problem with the request.');
      }
    }
  }
})();
</script>