Ajax与JSON，XML，PHP

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>Title</title>
  6     <style type="text/css">
  7         *{
  8             padding:0;
  9             margin: 0;
 10         }
 11         div{
 12             width: 300px;
 13             height: 300px;
 14             border: 1px solid black;
 15             margin: 50px auto;
 16             text-align: center;
 17             background: #e6e6e6;
 18         }
 19         img{
 20             width: 200px;
 21             height: 200px;
 22             display: block;
 23             margin: 10px auto 10px;
 24             border: 1px solid black;
 25         }
 26         p{
 27             text-align: center;
 28             background-color:#fff;
 29 
 30         }
 31     </style>
 32     <script src="myAjax.js"></script>
 33     <script>
 34         window.onload = function (ev) {
 35             var oTitle = document.querySelector("#title");
 36             var oDes = document.querySelector("#des");
 37             var oImg = document.querySelector("img");
 38 
 39             var oBtns = document.querySelectorAll("button");
 40 
 41 
 42             oBtns[0].onclick = function () {
 43                 var self = this;
 44                 ajax({
 45                     type:"get",
 46                     url:"ajax-test1.php",
 47                     data:{
 48                         "name":this.getAttribute("name")
 49                     },
 50                     timeout:5000,
 51                     success:function (xhr) {
 52                         /*向ajax后台的程序发送xmlhttp请求的时候, 后台程序接到请求会进行处理,处理结束后,可以返回一串数据给前台,
 53                          这个就是responseText.
 54                         */
 57                         var res = xhr.responseText.split("|");
 58                         oTitle.innerHTML = res[0];
 59                         oDes.innerHTML = res[1];
 60                         oImg.setAttribute("src",res[2]);
 83                     },
 84                     error:function (xhr) {
 85                         alert(xhr.status);
 86                     }
 87                 });
 88             }
 89             oBtns[1].onclick = function () {
 90                 var self = this;
 91                 ajax({
 92                     type: "get",
 93                     url: "ajax-test2.php",
 94                     data: {
 95                         "name": this.getAttribute("name")
 96                     },
 97                     timeout: 5000,
 98                     success: function (xhr) {
 99 
100                         var name = self.getAttribute("name");
101                         var res = xhr.responseXML;
102 
103                         var title = res.querySelector(name + ">title").innerHTML;
104                         var des = res.querySelector(name + ">des").innerHTML;
105                         var image = res.querySelector(name + ">image").innerHTML;
106 
107                         oTitle.innerHTML = title;
108                         oDes.innerHTML = des;
109                         oImg.setAttribute("src", image);},
110                         error:function (xhr) {
111                             alert(xhr.status);
112                         }
113                     });
114 
115                 }
116             oBtns[2].onclick = function () {
117                 var self = this;
118                 ajax({
119                     type:"get",
120                     url:"ajax-test3.php",
121                     data:{
122                         "name":this.getAttribute("name")
123                     },
124                     timeout:5000,
125                     success:function (xhr) {
126 
127                         var str = xhr.responseText;
128                         var obj = JSON.parse(str);
129                         var name = obj.tx;
130                         oTitle.innerHTML = name.title;
131                         oDes.innerHTML = name.des;
132                         oImg.setAttribute("src",name.image);
133 
134                     },
135                     error:function (xhr) {
136                         alert(xhr.status);
137                     }
138                 });
139             };
140         }
141     </script>
142 </head>
143 <body>
144 <div>
145         <p id="title">拜仁球星</p>
146         <img src="" alt="">
147         <p id="des">球星介绍</p>
148         <button name="nz">莱万</button>
149         <button name="bb">基米西</button>
150         <button name="tx">罗本</button></div>
151 </body>
152 </html>

ajax-test1.php

 1 <?php
 2 //1.定义字典保存商品信息
 3 $products = array("nz"=>array("title"=>"莱万","des"=>"最佳射手","image"=>"../images/1.jpg"),
 4                  "bb"=>array("title"=>"基米西","des"=>"鸡哥最可爱","image"=>"../images/2.jpg"),
 5                  "tx"=>array("title"=>"罗本","des"=>"小飞侠","image"=>"../images/3.jpg"));
 6 //2.获取前端传递的参数$_GET
 7 $name = $_GET["name"];
 8 //echo $name;
 9 //3.根据前端传入的key,获取对应的字典
10 $product = $products[$name];
11 //print_r($product);
12 //4.将内容取出来，返回给前端
13 echo $product["title"];
14 echo "|";
15 echo $product["des"];
16 echo "|";
17 echo $product["image"];

ajax-test2.php

1 <?php
2 //执行结果中有中文，必须在PHP文件顶部设置
3 header("content-type:text/html;charset=utf-8");
4 //如果PHP中需要返回XML数据，也必须在PHP文件顶部设置
5 header("content-type:text/xml;charset=utf-8");
6 echo file_get_contents("ajax-test.xml");
8 ?>

ajax-test.xml

 1 <?xml version="1.0" encoding="UTF-8" ?>
 2 <products>
 3     <nz>
 4         <title>莱万</title>
 5         <des>最佳射手</des>
 6         <image>../images/1.jpg</image>
 7     </nz>
 8     <bb><title>基米西</title>
 9         <des>可爱</des>
10         <image>../images/2.jpg</image></bb>
11     <tx><title>罗本</title>
12         <des>小飞侠</des>
13         <image>../images/3.jpg</image></tx>
14 </products>

ajax-test3.php

1 <?php 2 3 echo file_get_contents("ajax-test.txt"); 4 ?>

ajax-test.txt

{
    "nz":{
    "title":"莱万",
    "des":"最佳射手",
    "image":"../images/1.jpg"},

    "bb":{"title":"基米西",
          "des":"可爱",
          "image":"../images/2.jpg"},

    "tx":{"title":"阿尔杨-罗本",
             "des":"小飞侠",
             "image":"../images/3.jpg"}

}