4服务器响应结果(4response01.html)

游鹄君2025年8月24日大约 2 分钟

html示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>服务器响应结果</title>
  <style type="text/css">
    #dvs{width:300px;height:300px;border:solid 1px blue;}
  </style>
</head>
<body>
  <button>服务器响应结果</button>
  <br/>
  <div id='dvs'></div>
  <script type="text/javascript">
  var buts = document.getElementsByTagName('button')[0];
  var dvs = document.getElementById('dvs');
  buts.onclick=function()
  {
    //发送ajax请求
    //创建ajax对象
    var x = new XMLHttpRequest;
    //触发事件
    x.onreadystatechange=function()
    {
     //判断
     if(x.readyState==4 && x.status==200)
     {
       //html 返回的是html文件 字符串
       //console.log(typeof x.responseText);
       //xml 返回的是xml文件 字符串
       /*var parser = new DOMParser();
       //这一行拼错了 var xlmDoc = parser.parseFromString(x.responseText,"text/xml");
       var xmlDoc = parser.parseFromString(x.responseText,"text/xml");
       var xs = xmlDoc.getElementsByTagName('country');
       //console.log(xs);
       var arr=[];
       for(var i=0;i<xs.length;i++)
       {
         arr[i]=xs[i].innerHTML;
       }
       console.log(arr);*/
       //索引数组
 
       //console.log(typeof x.responseText);这样只是字符串
       //使用eval函数把json字符串转化成 js数组对象
       /*eval('var arr='+x.responseText);
       for(var i=0;i<arr.length;i++)
       {
         console.log(arr[i]);
       }*/
       //关联数组
 
       //一维数组 关联数组 返回的结果是js对象
       /*eval('var arr ='+x.responseText);
       for (var i = 0; i < arr.length; i++) {
         console.log(arr[i]);
       };*/
       //二维数组 返回的结果 外面是数组对象 里面是js对象
       eval('var arr='+x.responseText)
       {
         for (var i = 0; i < arr.length; i++) {
          console.log(arr[i].name);
         };
       }
 
     }
    }
 
    //初始化
    //请求html文件
    //x.open("GET",'4response_html.html',true);
    //请求xml文件 
    //x.open("GET",'4response_xml.xml',true);
    //请求php
    /*索引数组 关联数组 一维数组 二维数组*/
    x.open("GET",'4response01.php',true);
 
    //发送
    x.send();
 
  }
  </script>
</body>
</html>

对应的4response01.php

<?php
  //echo "haha";
  //索引数组
  //$arr=array(one,two,three);
  //关联数组
   //$arr = array('id'=>100,'name'=>'wwwww','age'=>20);
 
 
  //二维数组
  $arr = array(
 
       array('id'=>100,'name'=>'wwwww','age'=>20),
       array('id'=>100,'name'=>'wwwww','age'=>20),
       array('id'=>100,'name'=>'wwwww','age'=>20)
     );
 
  // var_dump($arr);
  //把数组转换成json字符串
  $res=json_encode($arr);
 
  echo $res;

对应的4response_xml.xml

<?xml version='1.0' encoding='utf-8'?>
<movies>
  <movie>
    <name>战狼</name>
    <country>中国</country>
  </movie>
  <movie>
    <name>速度与激情8</name>
    <country>美国</country>
  </movie>
  <movie>
    <name>传奇</name>
    <country>美国</country>
  </movie>
</movies>

对应的4response_html.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    我们傻乐乐
  </body>
</html>