ajax 의 세 가지 해석 모드 공유

1.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 를 공유 하 는 세 가지 해석 모델 입 니 다.마음 에 드 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Javascript Ajax에 대한 간단한 연습

저는 약 4년 동안 프로그래밍 개인 튜터로 일한 경험이 있습니다. 약 5년 전에 " "이라는 제목의 페르시아어로 내 웹사이트에 블로그 게시물을 올렸고 사람들이 저에게 전화하기 시작했습니다. 나는 항상 사람들을 가르치...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

ajax 의 세 가지 해석 모드 공유

좋은 웹페이지 즐겨찾기