发送get请求的ajax_基础语法代码演示

最新推荐文章于 2021-08-06 11:48:54 发布

GaojbSunny

最新推荐文章于 2021-08-06 11:48:54 发布

阅读量630

点赞数

分类专栏： ajax基础、get方法、前端基础文章标签： ajax get 前端 php

本文链接：https://blog.csdn.net/GaojbSunny/article/details/53355016

版权

ajax基础、get方法、前端基础专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <h1>发送get请求的ajax_基础语法</h1>
   <input type="button"  value="发送get_ajax请求" id='btnAjax'>
</body>
</html>
<script type="text/javascript">
   // 绑定点击事件
   document.querySelector('#btnAjax').onclick = function () {
      // 发送ajax 请求 需要 五步

      // 1.创建异步对象
      var ajaxObj = new XMLHttpRequest();

      // 2.设置请求的url等参数
      // 参数1 请求的方法 参数2 请求的url
      ajaxObj.open('get','02.ajax.php');

      // 3.发送请求
      ajaxObj.send();

      // 假设 有一个 接返回数据的 方法ajaxObj.get();
      

      // 4.注册事件
      // onreadystatechange  状态改变就会调用
      // 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
      ajaxObj.onreadystatechange = function () {
         // 为了保证 数据 完整回来,我们一般会判断 两个值
         if (ajaxObj.readyState==4&&ajaxObj.status==200) {
            // 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
            // 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
            console.log('数据完美的回来了');

            // 数据是保存在 异步对象的 属性中
            console.log(ajaxObj.responseText);

            // 修改页面的显示
            document.querySelector('h1').innerHTML = ajaxObj.responseText;
         }
         
      }

      
   }
</script>