<!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. mybatis工作流程

    1)通过Reader对象读取src目录下的mybatis.xml配置文件(该文本的位置和名字可任意) 2)通过SqlSessionFactoryBuilder对象创建SqlSessionFactory ...

  2. java+web文件的上传和下载代码

    一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不能这样上传了.我这里分享一下我自己开发的一套大文件上传控件 ...

  3. python #!/usr/bin/python作用

    #!/usr/bin/python指定用什么解释器运行脚本以及解释器所在的位置 # -*- coding: utf-8 -*-用来指定文件编码为utf-8的PEP 0263 -- Defining P ...

  4. DES算法概述

    DES全称为Data Encryption Standard,即数据加密标准.1997年数据加密标准DES正式公布,其分组长度为64比特,密钥长度为64比特,其中8比特为奇偶校验位,所以实际长度为56 ...

  5. Django之logging配置

    1. settings.py文件 做开发离不开必定离不开日志, 以下是我在工作中写Django项目常用的logging配置. # 日志配置 BASE_LOG_DIR = os.path.join(BA ...

  6. Python3 Selenium自动化web测试 ==> 第二节 页面元素的定位方法 -- iframe专题 <下>

    学习目的: 掌握iframe矿建的定位,因为前端的iframe框架页面元素信息,大多时候都会带有动态ID,无法重复定位. 场景: 1. iframe切换 查看iframe 切换iframe 多个ifr ...

  7. addRoutes进行权限控制

    用addRoutes实现动态路由:https://www.jianshu.com/p/0bea4a1b0350 详解基于vue,vue-router, vuex以及addRoutes进行权限控制:ht ...

  8. vue-cli3 取消eslint 校验代码 真正的解决办法

    在网上找了各种办法都没解决,看了下文档就解决了 关闭vue-cli3.0 报错:eslint-disable-next-line to ignore the next line.   注意我这里是VU ...

  9. nRF5 SDK Bootloader and DFU moudles(1)

    在嵌入式操作系统中,BootLoader是在操作系统内核运行之前运行.可以初始化硬件设备.建立内存空间映射图,从而将系统的软硬件环境带到一个合适状态,以便为最终调用操作系统内核准备好正确的环境. 在嵌 ...

  10. superset采集流程

    superset采集流程: 先从业务的bi从库oride-slave-bi(10.52.123.212)去拿数,然后计算(每10分钟由airflow调py代码),放到bi的库(BI业务-数据指标存储1 ...