主頁 > 知識庫 > 分享ajax的三種解析模式

分享ajax的三種解析模式

熱門標簽:越南河內(nèi)地圖標注 騰訊地圖標注位置能用多久 硅語電話機器人公司 地圖標注項目怎么樣 個人怎樣在百度地圖標注地名 ai機器人電銷資源 超級大富翁地圖標注 云呼外撥網(wǎng)絡電話系統(tǒng) 機器人電銷騙局揭秘

一、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==4xhr.status==200){
        var data = xhr.responseText;
        /*
         * 使用eval()函數(shù)進行轉換
         * * 使用"()"將其包裹,eval()函數(shù)強制將其轉換為JSON格式(javascript代碼)
         * * 不使用"()"將其包裹,eval()函數(shù)將其識別為一個空的代碼塊
         */
        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
  // 接收客戶端發(fā)送的請求數(shù)據(jù)
  $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));
  // 響應數(shù)據(jù)符合JSON格式的字符串
  // 1. 手工方式構建
  //echo '{"name":"zhouzhiruo","pwd":"123456"}';
  // 2. 使用json_encode()函數(shù)
  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(){
    // 實現(xiàn)Ajax的異步交互
    var xhr = getXhr();
    xhr.open("post","07.php");
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    /*
     * 如何構建符合XML格式的請求數(shù)據(jù)
     * * 注意
     *  * 請求數(shù)據(jù)的格式 - key=value 不能改變的
     * * 將value值構建成符合XML格式的數(shù)據(jù)
     *  * 數(shù)據(jù)類型 - 字符串(string)
     *  * 格式符合XML的語法要求
     * * 編寫注意
     *  * 定義變量 - 專門構建XML格式的數(shù)據(jù)
     *  * 在send()方法進行拼串
     */
    var user = "user>name>zhangwuji/name>pwd>123456/pwd>/user>";
    xhr.send("user="+user);
    xhr.onreadystatechange = function(){
      if(xhr.readyState==4xhr.status==200){
        // 接收服務器端的響應數(shù)據(jù)
        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
  // 接收客戶端發(fā)送的請求數(shù)據(jù)
  $user = $_POST['user'];//符合XML格式要求的string類型
  //var_dump($user);
  // 創(chuàng)建DOMDocument對象
  $doc = new DOMDocument();
  // 調(diào)用loadXML()方法
  $result = $doc->loadXML($user);
  //var_dump($doc);
  // 如何構建符合XML格式的數(shù)據(jù)
  /* 修改響應頭的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>
  /*
   * 需要思考哪些事情?
   * * 在什么時候執(zhí)行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. 執(zhí)行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==4xhr.status==200){
          // 接收服務器端的數(shù)據(jù)內(nèi)容
          var data = xhr.responseText;
          // data是字符串,轉換為數(shù)組
          var cities = data.split(",");
          for(var i=0;icities.length;i++){
            var option = document.createElement("option");
            var textNode = document.createTextNode(cities[i]);
            option.appendChild(textNode);
            city.appendChild(option);
          }
        }
      }
    }
  }
  // 定義創(chuàng)建XMLHttpRequest對象的函數(shù)
  function getXhr(){
    var xhr = null;
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject("Microsoft.XMLHttp");
    }
    return xhr;
  }
 /script>
 /body>
/html> 

php頁面:

?php
  // 用于處理客戶端請求二級聯(lián)動的數(shù)據(jù)
  // 1. 接收客戶端發(fā)送的省份信息
  $province = $_POST['provcince'];
  // 2. 判斷當前的省份信息,提供不同的城市信息
  switch ($province){
    case '山東省':
      echo '青島市,濟南市,威海市,日照市,德州市';
      break;
    case '遼寧省':
      echo '沈陽市,大連市,鐵嶺市,丹東市,錦州市';
      break;
    case '吉林省':
      echo '長春市,松原市,吉林市,通化市,四平市';
      break;
  }
  // 服務器端響應的是字符串
?>

以上內(nèi)容是小編給大家分享ajax的三種解析模式,希望大家喜歡。

您可能感興趣的文章:
  • AJAX的阻塞及跨域名解析
  • jQuery Ajax 全解析
  • 用JQuery 實現(xiàn)AJAX加載XML并解析的腳本
  • Jquery ajax不能解析json對象,報Invalid JSON錯誤的原因和解決方法
  • Javascript(AJAX)解析XML的代碼(兼容FIREFOX/IE)
  • jQuery Ajax使用 全解析
  • 一步一步學asp.net Ajax登錄設計實現(xiàn)解析
  • jquery ajax請求實例深入解析
  • 淺析ajax請求json數(shù)據(jù)并用js解析(示例分析)
  • jquery.Ajax()方法調(diào)用Asp.Net后臺的方法解析

標簽:林芝 舟山 鄭州 洛陽 遼源 海南 邢臺 內(nèi)蒙古

巨人網(wǎng)絡通訊聲明:本文標題《分享ajax的三種解析模式》,本文關鍵詞  分享,ajax,的,三種,解析,;如發(fā)現(xiàn)本文內(nèi)容存在版權問題,煩請?zhí)峁┫嚓P信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《分享ajax的三種解析模式》相關的同類信息!
  • 本頁收集關于分享ajax的三種解析模式的相關信息資訊供網(wǎng)民參考!
  • 企业400电话

    智能AI客服机器人
    15000

    在线订购

    合计11份范本:公司章程+合伙协议+出资协议+合作协议+股权转让协议+增资扩股协议+股权激励+股东会决议+董事会决议

    推薦文章