Home>

First, the json format in ajax

html code:

<html>
<body>
 <input type="button" value="ajax">
 <script>
  var btn=document.getelementbyid ("btn");
  btn.onclick=function () {
    var xhr=getxhr ();
    xhr.open ("post", "10.php");
    xhr.setrequestheader ("content-type", "application/x-www-form-urlencoded");
    /*
     * How to build json format on the client
     * * Build a string conforming to json format
     * /
    var user="{" name ":" zhangwuji "," pwd ":" 123456 "}";
    xhr.send ("user =" + user);
    xhr.onreadystatechange=function () {
      if (xhr.readystate == 4 && xhr.status == 200) {
        var data=xhr.responsetext;
        /*
         * Use eval () function for conversion
         * * Use "()" to wrap it,eval () function forcing it to json format (javascript code)
         * * Do not use "()" to wrap it,The eval () function recognizes it as an empty code block
         * /
        var json=eval ("(" + data + ")");
        console.log (json);
      }
    }
  }
  function getxhr () {
    var xhr=null;
    if (window.xmlhttprequest) {
      xhr=new xmlhttprequest ();
    } else {
      xhr=new activexobject ("microsoft.xmlhttp");
    }
    return xhr;
  }
 </script>
 </body>
</html>

php code:

<?php
  //receive the request data sent by the client
  $user=$_post ["user"];
  //is a string in json format
  //var_dump ($user);
  $json_user=json_decode ($user, true);
  //var_dump ($json_user ["name"]);
  $json="{" a ":1," b ":2," c ":3," d ":4," e ":5}";
  //var_dump (json_decode ($json));
  //response data conforms to json format string
  //1. build by hand
  //echo "{" name ":" zhouzhiruo "," pwd ":" 123456 "}";
  //2. use json_encode () function
  echo json_encode ($json_user);
?>

XML format in ajax

html page:

<html>
   <body>
 <input type="button" value="ajax">
 <script>
  var btn=document.getelementbyid ("btn");
  btn.onclick=function () {
    //Implement ajax asynchronous interaction
    var xhr=getxhr ();
    xhr.open ("post", "07.php");
    xhr.setrequestheader ("content-type", "application/x-www-form-urlencoded");
    /*
     * How to construct request data conforming to xml format
     * * Note
     * * Request data format-key=value cannot be changed
     * * Build value into xml format data
     * * Data type-string
     * * The format conforms to the syntax requirements of xml
     * * Note for writing
     * * Define variables-specifically build data in xml format
     * * Spelling in the send () method
     * /
    var user="<user><name>zhangwuji</name><pwd>123456</pwd>
    xhr.send ("user =" + user);
    xhr.onreadystatechange=function () {
      if (xhr.readystate == 4 && xhr.status == 200) {
        //Receive response data from the server
        var xmldoc=xhr.responsexml;
        var nameele=xmldoc.getelementsbytagname ("name") [0];
        var txtele=nameele.childnodes [0];
        console.log (txtele.nodevalue);
      }
    }
  }
  function getxhr () {
    var xhr=null;
    if (window.xmlhttprequest) {
      xhr=new xmlhttprequest ();
    } else {
      xhr=new activexobject ("microsoft.xmlhttp");
    }
    return xhr;
  }
 </script>
 </body>
</html>

php page code:

<?php
  //receive the request data sent by the client
  $user=$_post ["user"];//String type that conforms to the XML format requirements
  //var_dump ($user);
  //create domdocument object
  $doc=new domdocument ();
  //call loadxml () method
  $result=$doc->loadxml ($user);
  //var_dump ($doc);
  //how to build data in xml format
  /* Change the content-type of the response header to "text/xml"
  header ("content-type:text/xml");
  echo $user;//XML string format
  * /
  header ("content-type:application/xml");
  echo $doc->savexml ();
?>

Three html format in ajax

html page:

<html>
  <body>
 <select>
  <option>Please select</option>
  <option>Shandong</option>
  <option>Liaoning Province</option>
  <option>Jilin Province</option>
 </select>
 <select>
  <option>Please select</option>
 </select>
 <script>
  /*
   * What needs to be considered?
   * * When is the asynchronous request for ajax executed?
   * * When the user selects specific province information
   * /
  //1. Bind the onchange event to the id of the province element
  var provinceele=document.getelementbyid ("province");
  provinceele.onchange=function () {
    //clear
    var city=document.getelementbyid ("city");
    var opts=city.getelementsbytagname ("option");
    for (var z=opts.length-1;z>0;z-) {
      city.removechild (opts [z]);
    }
    if (provinceele.value!="Please select") {
      //2. execute ajax asynchronous request
      var xhr=getxhr ();
      xhr.open ("post", "06.php");
      xhr.setrequestheader ("content-type", "application/x-www-form-urlencoded");
      xhr.send ("provcince =" + provinceele.value);
      xhr.onreadystatechange=function () {
        if (xhr.readystate == 4 && xhr.status == 200) {
          //Receive data from the server
          var data=xhr.responsetext;
          //data is a string,Convert to array
          var cities=data.split (",");
          for (var i=0;i<cities.length;i ++) {
            var option=document.createelement ("option");
            var textnode=document.createtextnode (cities [i]);
            option.appendchild (textnode);
            city.appendchild (option);
          }
        }
      }
    }
  }
  //Define the function that creates the xmlhttprequest object
  function getxhr () {
    var xhr=null;
    if (window.xmlhttprequest) {
      xhr=new xmlhttprequest ();
    } else {
      xhr=new activexobject ("microsoft.xmlhttp");
    }
    return xhr;
  }
 </script>
 </body>
</html>

php page:

<?php
  //Used to process data requested by the client for secondary linkage
  //1. Receive the province information sent by the client
  $province=$_post ["provcince"];
  //2. Judge the current province information,Provide different city information
  switch ($province) {
    case "Shandong Province":
      echo "Qingdao, Jinan, Weihai, Rizhao, Dezhou";
      break;
    case "Liaoning Province":
      echo "Shenyang, Dalian, Tieling, Dandong, Jinzhou";
      break;
    case "Jilin Province":
      echo "Changchun, Songyuan, Jilin, Tonghua, Siping";
      break;
  }
  //The server responds with a string
?>

The above is the three analysis modes we share with you.Hope you like it.