1ajiax的基本使用(1ajax01.html)

游鹄君2025年8月24日小于 1 分钟

html示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax的基本使用</title>
  <style type="text/css">
    #dvs
    {
     width:300px;
     height:300px;
     border:solid 1px blue;
    }
  </style>
</head>
<body>
  <button>点击发送ajax</button>
  <br/>
  <div id="dvs"></div>
  <script type="text/javascript">
  //获取button节点元素
  //因为是数组,所以需要加上[0];
  var buts=document.getElementsByTagName('button')[0];
  var dvs=document.getElementById('dvs');
 
  buts.onclick=function()
  {
    //发送ajax请求
 
    //1创建ajax对象
    var x = new XMLHttpRequest;
 
    //2触发ajax对象事件 on  当..时候  readystate ajax对象的属性  change 改变
    x.onreadystatechange = function()
    {
     if(x.readyState == 4 && x.status==200)
     {
       //服务器返回结果
       //console.log(x.responseText);
       dvs.innerHTML=x.responseText;
     }
    }
 
    //3.初始化
    //1.参数  请求的方式  
    //2.参数  请求的处理数据的脚本
    //3.参数  是否异步  true 异步  false 同步
    x.open("GET","1ajax01.php",true);
 
    //4.发送
    x.send();
  }
  </script>
</body>
</html>

对应的1ajax01.php


<?php
 
    //echo 'iloveyou';
 
    //var_dump(['one','two','three']);
 
    print_r(['one','two','three']);