ajax、xml、json

一、ajax

1.ajax的概念

         （1）我们使用表单登录，我们输入用户名，密码，这个时候点击登录，表单直接提交，把请求发给服务器，服务器接收到请求，处理请求，完成响应，在这个处理的过程中，用户一直处于一个等待的状态。用户在页面不能做其他的操作，就算我做其他的操作，服务器响应了之后，响应回来的界面把原来的界面覆盖，我们把这种方式的交互叫做同步交互。

         （2）比如我用户注册，我输入了用户名，它会直接给我一个提示，该用户名已经被注册。我们输入用户名，发送了一个请求，服务器接收到请求，处理请求，完成响应，在这样服务器处理的一个过程当中用户是可以做其他事情，等服务器响应完毕，响应回来的数据不会把原来的页面覆盖，我们把这种交互叫做异步交互。

           异步交互实现的效果：页面不刷新，就可以跟服务器进行动态数据交互。我们做ajax开发都是异步交互，即页面不刷新，跟服务器进行交互。

 2.怎样完成数据交互        

          js给我们提供了一个对象，这个对象可以用跟服务器进行交互也就是通过这个对象我们可以发送http请求，通过这个对象我们可以接受服务器返回的数据。

     这个对象是浏览器直接提供的XMLHttpRequest（）；

    （1）创建一个对象               var xhr=new XMLHttpRequest（）；
                 （2）跟服务器建立一个连接              xhr.open（“GET/POST”，“xxx.php”）；第一个“”里面是请求提交的方式，即get或post，第二个“”里面是提交的地址

          （3）发送数据给服务器                     xhr.send（）

①get方式提交时，没有提交体，如果要发数据给服务器，这个数据必须放在地址里面，发送参数数据都应该写在地址路径后面。此时格式为                   xhr.open（“GET”，“xxx.php？username=zhangsan”）；

                                                       xhr.send（null）；

对应的xxx.php为：                          $data=$_GET;   var_dump($data);

②post提交方式,发给服务器的数据在请求体当中，我们必须在发送数据之前给服务器一个请求头，Ⅰ.发送请求头的方法Ⅱ.请求头的名称是什么，请求头对应的值是什么？

 格式为：                                        xhr.open（“POST”，“xxx.php”）；

                                                       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

                                                       xhr.send（“username=zhangsan”）；

对应的xxx.php为：                          $data=$_POST;   var_dump($data)；

           （4）接收响应的数据          时刻监听着服务器状态的改变，服务器在客户端响应的过程当中会给客户端很多的状态，当服务器在响应的过程中的时候会一直调用这个方法。

                                                xhr.onreadystatechange=function(){

                                                 //可以获取服务器端的状态  xhr.readyState共有0,1,2,3,4五个状态

                                                 4：代表服务器已经响应完成，所有数据响应完成

                                                 xhr.status：是服务器端给客户端的一个状态码  200：代表服务器响应ok

                                                 判断服务器是否响应完成且响应ok。满足条件才会将数据接收成功，完成一定的事件

                                                  if（xhr.readyState==4 && xhr.status==200）{

                                                         var data = xhr.responseText;//返回一个字符串

                                                         alert(data);console.log(data);此处这样可以判断数据是否接收成功，用于bug调试

                                                  }

                                           }

3.总结。

        ajax：页面不刷新，可以从服务器获取到数据，我们是通过XMLHttpRequest获取到数据，通过dom把收到的数据写到页面上去的。

二、使用ajax客户端浏览器与服务器进行交互时，传递数据的格式

        发送一个请求给服务器，如果数据在网络上面传递，服务器数据非常多，比较复杂，客户端接收到这些数据，要把这些数据转换成html再放到页面上。如果没有一定的格式，解析这些数据非常麻烦（方便客户端解析这些数据）。

        我们做ajax 开发  从界面发送一个请求给服务器，服务器接收到请求，响应数据，响应的数据非常的非常多，一般数据只要在网络上面传递，为了方便解析，我们就要求这个数据要遵守一定的格式。

        传递数据的格式有两种：（1）xml格式（2）json格式

1.xml

        xml是一种数据格式，规定使用ajax客户端与服务器进行交互的时候传递数据的一个标准。必须是后缀为一个.xml格式的文件。

        解析xml是把xml转换成一个dom对象，解析后调用dom方法，放在页面上。

        解析xml格式数据步骤：

                     ①通过js 的xmlHttpRequest 对象中的xhr.responseXML属性接收xml 格式的数据，自动转成dom 对象。

                     ②通过dom的一些方法和属性去解析xml 格式的数据。

                     ③然后把解析到的数据写到页面上面来。

        xml  ：标记语言，是可以扩展的标记语言
        html ：超文本标记语言
        作用：html 是做页面显示；xml 用来做数据传输 （软件的配置文件）
                   html里面的标记都是固定的 ，w3c规定好的；xml 里面的标记是自定义的。名字随便去定义

        xml格式的文件：第一行声明一个xml文档。必须在第一行<?xml version ="1.0" encoding="utf-8" ?>

       xml必须有且仅有一个根元素

             在客户端浏览器（html文件）中，点击事件，从服务器（xxx.php文件）获取数据，数据格式是xml，服务端必须设置一个响应头 header("Content-Type:text/xml;charset=utf-8");。如果服务器返回的是一个xml格式的数据，必须要使用xhr.responseXML这个属性去接受服务器返回的数据，自动转成dom 对象。      var data=xhr.responseXML;//现在data已经变成document 对象。

在php文件中，需要规定服务器返回的文本格式即：

<?php
        /*   header 给客户端发送一个响应头。发送一个响应头给客户端浏览器Content-Type:text/html;charset=utf-8；告诉客户端浏览器，服务端返回的内容类型。 text 返回的是一个文本。 html 格式的文本。

              header('Content-Type:text/html;charset=utf-8');     

       */
              header('Content-Type:text/xml;charset=utf-8');

        /*    我要给客户端返回xml 格式的数据。*/
        $data=file_get_contents("books.xml");   //xml格式的文件
        echo $data;
?>

books.xml格式的文件，即服务器数据传输格式为xml，传输的数据文件

<?xml  version="1.0" encoding="UTF-8"  ?>
<books>
        <book>
              <bookName>坏蛋是怎么练成</bookName>
              <bookAuthor>刘占超</bookAuthor>
              <bookPrice>9.99</bookPrice>
        </book>
        <book>
            <bookName>斗破苍穹</bookName>
            <bookAuthor>鹏鹏</bookAuthor>
            <bookPrice>1块三斤</bookPrice>
        </book>
        <book>
            <bookName>一生遗憾</bookName>
            <bookAuthor>张扬</bookAuthor>
            <bookPrice>36</bookPrice>
        </book>
</books>

2.json

         json 是一种轻量级的数据格式，能够使用更少的字符串代表更多的内容，这种传输方式使用非常多，xml很少。

             发送一个请求，给服务器，服务接收到请求，然后返回的是json 格式的数据，客户端js接收到json格式的数据 ，怎么去解析json 格式的数据？

        解析json格式数据步骤：①我们通过js 的xmlHttpRequest 对象中的xhr.responseText属性接收json 格式的数据。

                                               ②通过js 去解析json 格式的数据。通过eval（）或JSON.parse（json）转换成js对象。

                                               ③然后把解析到的数据写到页面上面来。
             js 提供一个函数给我们，可以直接把这个json 格式的字符串转成对象， 这个函数叫做eval();这个函数里面换地一个json 格式的字符串，但是要求这个json 格式的字符串，必须使用() 括起来。

两种方式：直接把json 格式的数据转换成javascript 的对象
                  ①：eval("("+json+")")；//此方法常用
                  ②: JSON.parse(json);

服务器数据：

<?php
        header('Content-Type:text/html;charset=utf-8');
        $data=file_get_contents("data.json");
        echo $data;
?>

data.json文件：

{
  "total":99,
  "rows":[ {
      "username":"蔡依婷",
      "age":35,
      "sex":"男",
      "desc":"花花蝴蝶" },
    { "username":"张朝阳",
      "age":22,
      "sex":"弯",
      "desc":"搜狐" },
    { "username":"张扬",
      "age":11,
      "sex":"男",
      "desc":"我就是性格有点张扬"}
  ]
}

3. xml格式与json格式的不同：

       ①xml解析用dom对象的一些方法和属性，json解析是使用js进行解析的。

       ②xml使用xhr.responseXML属性接收服务器的数据，接受的同时把数据变成dom对象；json使用xhr.responseText属性接收服务器的数据，接收后数据为字符串，需要用js中的eval（）函数或者JSON.parse（json）将接收到的数据转换成js的对象。

       ③xml格式要求服务端返回的数据给一个响应头header("Content-Type:text/xml;charset=utf-8");json格式不要求，php就是普通的响应头 header("Content-Type:text/html;charset=utf-8")。

       ④xml服务器端提供数据的文件是xxx.xml格式的（需要一个xxx.xml文件）；json服务器端提供数据的文件是xxx.json格式的（需要一个xxx.json文件）。 

4.   因为我们跟服务器进行交互，我们要注意性能：
      跟服务器交互的次数越少越好，跟服务器传递的数据越少越好。json是轻量级的数据格式，能够使用更少的字符串代表更多的内容。因此在与服务器进行交互使用过程中，传输的最多的就是json格式，xml格式很少使用。xml主要用于软件的配置文件，以后调用百度、调用微信，返回的还是xml格式的数据。