三種ajax解析模式！

時間 2019-12-06

標籤三種 ajax 解析模式欄目 Ajax 简体版

原文原文鏈接

1、Ajax中的JSON格式javascript

html代碼：php

<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代碼：html

<?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格式java

html頁面：node

<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頁面代碼：json

<?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頁面：app

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。