分享ajax的三種解析模式

分享ajax的三種解析模式_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

一、Ajax中的JSON格式

html代碼：

<html><body> <input type="button" value="Ajax" id="btn"> <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");    /*     * 在用戶端如何構建JSON格式     * * 構建符合JSON格式的字串     */    var user = '{"name":"zhangwuji","pwd":"123456"}';    xhr.send("user="+user);    xhr.onreadystatechange = function(){      if(xhr.readyState==4&&xhr.status==200){        var data = xhr.responseText;        /*         * 使用eval()函數進行轉換         * * 使用"()"將其包裹,eval()函數強制將其轉換為JSON格式(javascript代碼)         * * 不使用"()"將其包裹,eval()函數將其識別為一個空的代碼塊         */        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代碼：

<?php  // 接收用戶端發送的請求資料  $user = $_POST['user'];  // 就是一個JSON格式的string字串  //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));  // 響應資料符合JSON格式的字串  // 1. 手工方式構建  //echo '{"name":"zhouzhiruo","pwd":"123456"}';  // 2. 使用json_encode()函數  echo json_encode($json_user);?>

二 Ajax中的XML格式

html頁面：

<html>   <body> <input type="button" value="Ajax" id="btn"> <script>  var btn = document.getElementById("btn");  btn.onclick = function(){    // 實現Ajax的非同步互動    var xhr = getXhr();    xhr.open("post","07.php");    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");    /*     * 如何構建符合XML格式的請求資料     * * 注意     *  * 請求資料的格式 - key=value 不能改變的     * * 將value值構建成符合XML格式的資料     *  * 資料類型 - 字串(string)     *  * 格式符合XML的文法要求     * * 編寫注意     *  * 定義變數 - 專門構建XML格式的資料     *  * 在send()方法進行拼串     */    var user = "<user><name>zhangwuji</name><pwd>123456</pwd></user>";    xhr.send("user="+user);    xhr.onreadystatechange = function(){      if(xhr.readyState==4&&xhr.status==200){        // 接收伺服器端的響應資料        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頁面代碼：

<?php  // 接收用戶端發送的請求資料  $user = $_POST['user'];//符合XML格式要求的string類型  //var_dump($user);  // 建立DOMDocument對象  $doc = new DOMDocument();  // 調用loadXML()方法  $result = $doc->loadXML($user);  //var_dump($doc);  // 如何構建符合XML格式的資料  /* 修改回應標頭的Content-Type值為"text/xml"  header('Content-Type:text/xml');  echo $user;// 符合XML格式的string類型  */  header('Content-Type:application/xml');  echo $doc->saveXML();?>

三 Ajax中的HTML格式

HTML頁面：

<html>  <body> <select id="province">  <option>請選擇</option>  <option>山東省</option>  <option>遼寧省</option>  <option>吉林省</option> </select> <select id="city">  <option>請選擇</option> </select> <script>  /*   * 需要思考哪些事情?   * * 在什麼時候執行Ajax的非同步請求?   *  * 當使用者選擇具體的省份資訊時   */  // 1. 為id為province元素繫結onchange事件  var provinceEle = document.getElementById("province");  provinceEle.onchange = function(){    // 清空    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 != "請選擇"){      // 2. 執行Ajax非同步請求      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){          // 接收伺服器端的資料內容          var data = xhr.responseText;          // data是字串,轉換為數組          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);          }        }      }    }  }  // 定義建立XMLHttpRequest對象的函數  function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){      xhr = new XMLHttpRequest();    }else{      xhr = new ActiveXObject("Microsoft.XMLHttp");    }    return xhr;  } </script> </body></html>

php頁面：

<?php  // 用於處理用戶端請求二級聯動的資料  // 1. 接收用戶端發送的省份資訊  $province = $_POST['provcince'];  // 2. 判斷當前的省份資訊,提供不同的城市資訊  switch ($province){    case '山東省':      echo '青島市,濟南市,威海市,日照市,德州市';      break;    case '遼寧省':      echo '瀋陽市,大連市,鐵嶺市,丹東市,錦州市';      break;    case '吉林省':      echo '長春市,松原市,吉林市,通化市,四平市';      break;  }  // 伺服器端響應的是字串?>

以上內容是小編給大家分享ajax的三種解析模式，希望大家喜歡。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More