首页 > 代码库 > PHP. 03 .ajax传输XML、 ajax传输json、封装

PHP. 03 .ajax传输XML、 ajax传输json、封装

XML简介

XML 指可扩展标记语言 EXtensible Markup Language 。设计的时候是用来传递数据的,虽然格式跟HTML类似

xml示例 

<?xml version="1.0" encoding="UTF-8"?>
<singer>
<name>Jay</name>
<age>18</age>
<skill>Sing</skill>
</singer>

xml是纯文本。xml是纯文本,这点跟HTML很像,所以我们可以用任何的文本编辑软件去打开编辑它

XML语法

虽然看起来跟HTML类似,但是XML的语法有些需要注意的,更为详细的可以查阅w3cschool_xml教程

XML声明 第一行是XML的声明,指定XML版本(1.0)以及使用的编码(UTF-8万国码) ,文件类型为name.xml

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

自定义标签  XML 中没有默认的标签,所有的标签都是我们定义者 自定义的

双标签  XML中没有但标签,都是双标签

根标签      XML中必须有一个根节点,所有的子节点都放置在根节点下

<root>
    <name></name>
</root>

XML属性 跟HTML一样,XML的标签里面也能够添加属性type=‘text‘,但是不建议这样用,而是使用标签的方式来表述内容(下半部分代码)

<!-- 使用属性配合标签表述信息 -->
    <persion sex="female">
        <firstname>Anna</firstname>
        <lastname>Smith</lastname>
    </persion>
<!-- 使用标签来表述信息 -->
    <persion>
        <sex>female</sex>
        <firstname>Anna</firstname>
        <lastname>Smith</lastname>
    </person>

XML解析

因为 XML 就是标签,所以直接用解析 Dom 元素的方法解析即可

html代码

技术分享
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        table{
            margin: 100px auto;
            width: 400px;
        }
        td{
            border: 1px solid #0094ff;
        }
    </style>
</head>
<body>
    <h1>ajax获取 多个明星数据</h1>
    <input type="button"  value="获取男神们?" id=‘getStars‘>
</body>
</html>
<script type="text/javascript">
    // 绑定点击事件
    document.querySelector(#getStars).onclick = function () {
        var ajax = new XMLHttpRequest();

        // post
        ajax.open(post,getStars.php);

        // 设置 请求的报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 发送
        ajax.send();

        // 注册事件
        ajax.onreadystatechange = function () {
            if (ajax.readyState==4 && ajax.status==200) {
                // 知道返回的是 xml
                console.log(ajax.responseXML);

                // document对象哦
                var persons = ajax.responseXML.querySelectorAll(person);
                console.log(persons);    

                // 在循环之前 把table的 拼出来

                var str =‘‘;

                // <table>
                str+=<table>;

                // 循环 获取其中的某一个
                for (var i = 0; i < persons.length; i++) {
                    // 获取 当前循环的那个person标签对象
                     var currentPerson =  persons[i];

                     // 获取 其中的 每一个值
                     console.log(currentPerson.querySelector(name).innerHTML);
                     console.log(currentPerson.querySelector(path).innerHTML);
                     console.log(currentPerson.querySelector(skill).innerHTML);

                     // 方法1 创建一个 table
                     /* js创建dom元素 再添加 比较繁琐 
                         document.createElement(‘table‘).appendChild();
                         document.createElement(‘tr‘);
                         document.createElement(‘td‘);
                     */

                     // 直接 拼接出 一个 table的 字符串 然后 设置到页面上即可

                     // 拼接开头
                     str+=<tr>;

                     str+=<td>+currentPerson.querySelector(name).innerHTML+</td>;
                     // 这里需要添加的是图片
                     // str+=‘<td>‘+currentPerson.querySelector(‘path‘).innerHTML+‘</td>‘;
                     str+=<td><img src="http://www.mamicode.com/+currentPerson.querySelector(path).innerHTML+"></td>;
                     str+=<td>+currentPerson.querySelector(skill).innerHTML+</td>;

                     // 再次添加一个td
                      str+=<td><a href="http://www.mamicode.com/#">点击了解更多_+currentPerson.querySelector(name).innerHTML+</a></td>;

                     // 拼接结尾
                     str+=</tr>;
                
                }

                // 循环完毕以后 将table 合并
                // </table>
                str+=</table>;

                // 测试 拼接的 内容 是否正确
                console.log(str);

                // 直接 添加到页面上
                document.body.innerHTML = str;
            }
        }
    }
</script>
html代码

 

php代码

在php中如果要使用xml传输数据,需要使用header()设置返回的内容为xml

<?php
    // 设置返回的是xml
    header(‘content-type:text/xml; charset=utf-8‘) ;
    // 读取并返回 oh -yeah
    echo file_get_contents( ‘starList.xml);
?>

XML文件

<?xml version="1.0" encoding="UTF-8"?>
<stars>
    <person>
        <name>盖伦</name>
        <path>images/hzt.jpg</path>
        <skill>转圈</skill>
     </person>
    <person>
        <name>赵信</name>
        <path>images/xy.jpg</path>
        <skill>爆菊花</skill>
    </person>
</stars>

 

JSON语法

JSON( JavaScript Object Notation ) 是 ECMAScript 的子集,作用是进行数据的交换,而且由于语法更为简洁,网络传输、解析都更为迅速 文件名类型为 name.json

语法规则:

  对象 使用{}包裹

  数组 使用[]包裹

 属性名 使用双引号包裹

 属性名 跟属性值之间 使用冒号分割

 属性值 也必须使用双引号包裹(数字可以不包裹)

 

数据类型:

下列内容无论键、值 都是用双引号包起来

  数字(整数或浮点数)/字符串(在双引号中)/逻辑值(true/false)/数组(在方括号中)/对象(在花括号中)/null

示例代码:

// 基本对象
{
  "name":"fox",
  "age":"18 ",
   "sex":"true",
   "car":"null"
}
// 数组
[
 {
  "name":"小小",
  "age":"1"
 },
 {
  "name":"大大",
  "age":"2"
 }
]

JSON 解析

JavaScript使用JSON对象

  JSON.parse()方法:将JSON字符串转化为JavaScript对象 需要接收

  JSON.stringify()方法:将JavaScript对象,转化为JSON字符串 需要接收

  IE(8以下)浏览器中没有 JSON 对象,通过导入 JSON2.js 框架即可解决,框架获取地址JSON2.js_github地址

<script type="text/javascript">
    var obj = {
        name:"fox",
        age:18,
        skill:"撩妹"
    };
   console.log(
"原生形式"+obj); //将javaScript对象格式化为JSON字符串 var jsonStr = JSON.stringify(obj); console.log("我是json字符串"+jsonStr);
 // 将JSON字符串 格式化为javaScript对象
  var jsonObj = JSON.parse(jsonStr);
  console.log("我是javaScript对象+jsonObj ");
  
</script>

技术分享

使用eval() 方法将 json字符串 转化为 javaScript对象

  需要将内容使用()括号包裹起来,

    var jsonStr1 = ‘{ "name":"fox","age":18,"skill":"撩妹" }‘    ;
    var jsonObj = eval(‘(‘+jsonStr1+‘)‘);
    console.log(jsonObj);
    console.log(jsonObj.name);


json_decode()  : 将json字符串 转化为变量

json_encode()  :   将变量转化为‘json’字符串

<?php
header("Content-Type:text/html;charset=utf-8"); // json字符串 $jsonStr = ‘{"name":"itcast","age":54,"skill":"Singing"}‘; // 字符串转化为php对象 print_r(json_decode($jsonStr)); echo ‘
<br>‘; // php数组 $arrayName = array(‘name‘=>‘littleFox‘,‘age‘=>12); // php对象转化为json字符串 print_r(json_encode($arrayName));

技术分享

 使用例子:

json:

[
    {
        "name":"jay",
        "skill"  :"singing",
        "path" :"images/jay.jpg"
    }
    {
        "name":"ED",
        "skill"  :"singing",
        "path" :"images/ed.jpg"
    }
]

php:

<?php 
    echo file_get_contents(‘info/stars.json);
?>

html:

<body>
    <input type="button" value="获取" id=‘getStars‘>
</body>
<script type="text/javascript">
    document.querySelector("#getStars").onclick = function(){
        var ajax = new XMLHttpRequest() ;
        ajax.open(post,getStars.php);
        ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");
        
        ajax.send();

        ajax.onreadystatechange = function(){
                if(ajax.readystate ==4 && ajax.status==200){
            // 转化为js对象,不光是数组还是对象都可以使用该方法转化
                var strArr = JSON.parse(ajax.responseText); 
            // 这里也方法哦一个table中
                var str="";
                str+=<table>
                    for(var i=0;i<strArr.length;i++){
                      str+=<tr>;
                      str+=<td> +strArr[i].name+</td>. ;
                      str+=<td> +strArr[i].skill +</td>. ;
                      str+=<td><img src="http://www.mamicode.com/+strArr[i].path+"></td;
                      str+=</tr>;
                     }
               document.body.innerHtml = str ;
            }
   }
</script>
    

 

 

封装一下

// ajax get 五部曲
function ajax_get(url,data) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // url 方法
    // 如果是get发送数据 发送的格式为 xxx.php?name=jack&age=18
    // 所以 这里 需要拼接 url
    if (data) {
        // 如果有值 需要拼接字符串 
        // 拼接为xxx.php?name=jack&age=18
        url+=‘?‘;
        url+=data;
    }else{
    }

    ajax.open(‘get‘,url);
    // 发送
    ajax.send();

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&& ajax.status==200) {
            console.log(ajax.responseText);
        }
    }
}

// ajax_post五部曲
function ajax_post(url,data) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // url 方法
    ajax.open(‘post‘,url);

    // 设置 请求报文 
    ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    // 发送
    if (data) {
        // 如果 有值 post请求 是在 send中 发送给服务器
        ajax.send(data);
    }else{
        ajax.send();
    }
    

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            console.log(ajax.responseText);
        }
    }

}

// 将 get 跟post 封装到一起
/*
    参数1:url
    参数2:数据
    参数3:请求的方法
    参数4:数据成功获取以后 调用的方法
*/
function ajax_tool(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method==‘get‘) {
        // get请求
        if (data) {
            // 如果有值
            url+=‘?‘;
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);

        // send即可
        ajax.send();
    }else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url);

        // 需要设置请求报文
        ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");

        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }

}

使用代码:

get方式:

php:

<?php 
    // 获取get提交的数据
    echo $_GET[‘skill‘];
 ?>

html:

<body>
    <input type="button"  value="测试get" id=‘ajax_get‘>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src=‘ajax_tool.js‘></script>
<script type="text/javascript">
    document.querySelector(#ajax_get).onclick = function () {
        // 直接使用 封装的 工具函数即可
        /*
            参数1:url
            参数2:数据
            参数3:请求的方法
        */
        var backData = ajax_tool(01.test_get.php,name=huluw&skill=saveyeye,get,function(data){
            console.log(data);
        });
        // 测试
        console.log(backData);
    }
</script>

post方式:

php:

<?php 
    echo $_POST[‘friend‘];
 ?>

html:

<body>
    <input type="button"  value="测试post" id=‘ajax_post‘>
</body>
</html>
<!-- 导入 封装的js -->
<script type="text/javascript" src=‘ajax_tool.js‘></script>
<script type="text/javascript">
    document.querySelector(#ajax_post).onclick = function () {
        // 直接使用 封装的 工具函数即可
        /*
            参数1:url
            参数2:数据
            参数3:请求的方法
            参数4:数据获取成功调用的方法
        */
        var backData = ajax_tool(02.test_post.php,friend=好丽友,post,function(data){
            console.log(data+"---dddd-----");
        });
        // 测试
        console.log(backData+"我是backdata");


        // 怎么样 处理数据 全部写在 匿名函数中
        ajax_tool(02.test_post.php,friend=好丽友,post,function(data){
            console.log(data+"我是ajax_tool");
            // 修改页面的显示呢?
        });

    }
</script>

 

PHP. 03 .ajax传输XML、 ajax传输json、封装