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></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="'+currentPerson.querySelector('path').innerHTML+'"></td>';

                     str+='<td>'+currentPerson.querySelector('skill').innerHTML+'</td>';

                     // 再次添加一个td

                      str+='<td><a href="#">点击了解更多_'+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="'+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>