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>

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

使用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));

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

使用例子：

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>

秒客网

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

XML简介

XML语法

XML解析

php代码

JSON语法

语法规则：

数据类型：

JSON 解析

JavaScript使用JSON对象

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

get方式：

post方式：

相关文章

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

XML简介

XML语法

XML解析

php代码

JSON语法

语法规则：

数据类型：

JSON 解析

JavaScript使用JSON对象

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

get方式：

post方式：

相关文章

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