<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style type="text/css">

         *{

             padding:0;

             margin: 0;

         }

         div{

             width: 300px;

             height: 300px;

             border: 1px solid black;

             margin: 50px auto;

             text-align: center;

             background: #e6e6e6;

         }

         img{

             width: 200px;

             height: 200px;

             display: block;

             margin: 10px auto 10px;

             border: 1px solid black;

         }

         p{

             text-align: center;

             background-color:#fff;

         }

     </style>

     <script src="myAjax.js"></script>

     <script>

         window.onload = function (ev) {

             var oTitle = document.querySelector("#title");

             var oDes = document.querySelector("#des");

             var oImg = document.querySelector("img");

             var oBtns = document.querySelectorAll("button");

             oBtns[0].onclick = function () {

                 var self = this;

                 ajax({

                     type:"get",

                     url:"ajax-test1.php",

                     data:{

                         "name":this.getAttribute("name")

                     },

                     timeout:5000,

                     success:function (xhr) {

                         /*向ajax后台的程序发送xmlhttp请求的时候, 后台程序接到请求会进行处理,处理结束后,可以返回一串数据给前台,

                          这个就是responseText.

                         */

                         var res = xhr.responseText.split("|");

                         oTitle.innerHTML = res[0];

                         oDes.innerHTML = res[1];

                         oImg.setAttribute("src",res[2]);

                     },

                     error:function (xhr) {

                         alert(xhr.status);

                     }

                 });

             }

             oBtns[1].onclick = function () {

                 var self = this;

                 ajax({

                     type: "get",

                     url: "ajax-test2.php",

                     data: {

                         "name": this.getAttribute("name")

                     },

                     timeout: 5000,

                     success: function (xhr) {

                         var name = self.getAttribute("name");

                         var res = xhr.responseXML;

                         var title = res.querySelector(name + ">title").innerHTML;

                         var des = res.querySelector(name + ">des").innerHTML;

                         var image = res.querySelector(name + ">image").innerHTML;

                         oTitle.innerHTML = title;

                         oDes.innerHTML = des;

                         oImg.setAttribute("src", image);},

                         error:function (xhr) {

                             alert(xhr.status);

                         }

                     });

                 }

             oBtns[2].onclick = function () {

                 var self = this;

                 ajax({

                     type:"get",

                     url:"ajax-test3.php",

                     data:{

                         "name":this.getAttribute("name")

                     },

                     timeout:5000,

                     success:function (xhr) {

                         var str = xhr.responseText;

                         var obj = JSON.parse(str);

                         var name = obj.tx;

                         oTitle.innerHTML = name.title;

                         oDes.innerHTML = name.des;

                         oImg.setAttribute("src",name.image);

                     },

                     error:function (xhr) {

                         alert(xhr.status);

                     }

                 });

             };

         }

     </script>

 </head>

 <body>

 <div>

         <p id="title">拜仁球星</p>

         <img src="" alt="">

         <p id="des">球星介绍</p>

         <button name="nz">莱万</button>

         <button name="bb">基米西</button>

         <button name="tx">罗本</button></div>

 </body>

 </html>
ajax-test1.php
 <?php

 //1.定义字典保存商品信息

 $products = array("nz"=>array("title"=>"莱万","des"=>"最佳射手","image"=>"../images/1.jpg"),

                  "bb"=>array("title"=>"基米西","des"=>"鸡哥最可爱","image"=>"../images/2.jpg"),

                  "tx"=>array("title"=>"罗本","des"=>"小飞侠","image"=>"../images/3.jpg"));

 //2.获取前端传递的参数$_GET

 $name = $_GET["name"];

 //echo $name;

 //3.根据前端传入的key,获取对应的字典

 $product = $products[$name];

 //print_r($product);

 //4.将内容取出来，返回给前端

 echo $product["title"];

 echo "|";

 echo $product["des"];

 echo "|";

 echo $product["image"];
ajax-test2.php
 <?php

 //执行结果中有中文，必须在PHP文件顶部设置

 header("content-type:text/html;charset=utf-8");

 //如果PHP中需要返回XML数据，也必须在PHP文件顶部设置

 header("content-type:text/xml;charset=utf-8");

 echo file_get_contents("ajax-test.xml");

 ?>
ajax-test.xml
 <?xml version="1.0" encoding="UTF-8" ?>

 <products>

     <nz>

         <title>莱万</title>

         <des>最佳射手</des>

         <image>../images/1.jpg</image>

     </nz>

     <bb><title>基米西</title>

         <des>可爱</des>

         <image>../images/2.jpg</image></bb>

     <tx><title>罗本</title>

         <des>小飞侠</des>

         <image>../images/3.jpg</image></tx>

 </products>

ajax-test3.php

<?php echo file_get_contents("ajax-test.txt"); ?>

ajax-test.txt

{

    "nz":{

    "title":"莱万",

    "des":"最佳射手",

    "image":"../images/1.jpg"},

    "bb":{"title":"基米西",

          "des":"可爱",

          "image":"../images/2.jpg"},

    "tx":{"title":"阿尔杨-罗本",

             "des":"小飞侠",

             "image":"../images/3.jpg"}

}

Ajax与JSON，XML，PHP的更多相关文章

  1. Ajax返回类型JSON,XML

    Ajax的三种返回类型 **一.TEXT *二.JSON 数据显示页面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  2. 调用AJAX返回JSON、XML数据类型

    1.调用AJAX返回JSON数据 用下拉列表显示Nation表民族名称 主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transi ...

  3. javascript 解析ajax返回的xml和json格式的数据

    写个例子,以备后用 一.JavaScript 解析返回的xml格式的数据: 1.javascript版本的ajax发送请求 (1).创建XMLHttpRequest对象,这个对象就是ajax请求的核心 ...

  4. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  5. 跟阿根一起学Java Web开发二：使用Ajax技术及XML与JSON实现输出

    如今B/S结构的系统使用Ajax技术是再平常只是的了.今天我们就来探讨下在JSPGenSDF第四版中:怎样使用Ajax技术.怎样输出XML文件及JSON格式数据输出. 怎样搭建一个最基础的JSPGen ...

  6. 让我们喝喝下午茶，聊聊AJAX和JSON

    1.AJAX     [1] AJAX简介         > 全称:Asynchronous JavaScript And XML         > 直译:异步的JavaScript和 ...

  7. Ajax与Json的一些总结

    Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...

  8. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

  9. ThinkPHP中使用ajax接收json数据的方法

    本文实例讲述了ThinkPHP中使用ajax接收json数据的方法.分享给大家供大家参考.具体分析如下: 这里通过ThinkPHP+jquery实现ajax,扩展了下,写了个查询,前台代码如下: 首先 ...

  10. MyEclipse下Struts2配置使用和Ajax、JSON的配合

    原创文章,转载请注明:MyEclipse下Struts2配置使用和Ajax.JSON的配合  By Lucio.Yang 新手,初学Struts2的配置,同时尝试与Ajax通过JSON交互.首先介绍M ...

随机推荐

  1. Linux终端Terminal常用快捷键

    快捷键 功能CTRL+ALT+T 打开终端Ctrl+a 光标移动到开始位置Ctrl+e 光标移动到最末尾Ctrl+k 删除此处至末尾的所有内容Ctrl+u 删除此处至开始的所有内容Ctrl+d 删除当 ...

  2. Perfect-Server-Swift学习记录

    开发环境搭建: https://github.com/Perfect-Server-Swift-LearnGuide/PerfectLearnGuide 中文文档学习: https://www.per ...

  3. vue build后 less sass background-img找不到文件

    修改build下面的utils.js配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicP ...

  4. Apriori算法--Python实现

    # -*- coding: utf-8 -*- """ Created on Mon Nov 05 22:50:13 2018 @author: ZhuChaochao ...

  5. 【Zookeeper】分布式环境搭建

    环境说明 本文以三台机器为例,分别为bigdata111,bigdata112,bigdata113三台机器,先部署bigdata111机器,然后通过scp分发配置方式配置其他两台机器: 安装步骤 上 ...

  6. nexus私服库被误删如何恢复

    恢复步骤: 1,登录nexus服务器,找到nexus安装目录(默认/usr/local/下): 2,找到sonatype-work/nexus/trash 下找到你删除的库: 3,copy到指定的so ...

  7. centos 自动挂载ISO

    创建挂载点并挂载光盘mkdir -p /media/cdrommount -t iso9660 -o loop /usr/ison/centos.iso /media/cdrom 设置开机自动挂载:方 ...

  8. Spark Streaming的实时词频和累加词频统计

    (注:运行环境是Ubuntu16, pycharm) 1. 按时段统计:获取scoket端口传输的数据(英文数据即可,方便分词),统计各个时间段内每个单词出现的次数(每个时间段都分别统计,需要使用的关 ...

  9. 版权动态日记页脚 JS

    关键代码如下 <script>document.write(new Date().getFullYear())</script> js方法 new Date() //实例化Da ...

  10. nginx 代理 registry docker certificate is valid for k8s, not

    1.配置SSL证书及nginx反向代理docker registry 搭建私有CA,初始化CA环境,在/etc/pki/CA/下建立证书索引数据库文件index.txt和序列号文件serial,并为证 ...