【 Ajax 】之異步交互

時間 2019-12-13

標籤 Ajax 異步交互欄目 Ajax 简体版

原文原文鏈接

Ajax

1.同步交互與異步交互

同步交互；就是發送個請求到服務器端，等待返回，而後再發送下個請求
異步交互；就是發送個請求到服務器端，無需等待返回，直接發送下個請求，不過呢，可能會等待上個請求html

2.Ajax是什麼

關於HTML頁面中可以快速加載到界面病展現個用戶，不須要再次加載頁面
實現Ajax步驟json

<body>
<button id="qyc">按鈕</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.open('get','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);

        xhr.onreadystatechange = function () {
            if(xhr.readyState === 4){
               console.log(xhr.responseText);

            }
        }
    });
</script>
</body>

3.實現Ajax異步交互

建立XMLHttpRequest對象
調用XMLHttpRequest對象open()方法
調用XMLHttpRequest對象send()方法
利用XMLHttpRequest對象onreadystatechange事件數組

readySate屬性

<body>
<button id="qyc">按鈕</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function (){
        var xhr = createXMLHttpRequest();
//        建立XMLHttpRequest對象
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4){
               console.log(xhr.status);
               if (xhr.status === 200){
                   console.log(responseText);
               }
            }
        }
        xhr.open('get','http://localhost:63342/code/%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html');
        xhr.send(null);
    })
</script>
</body>

4.GET與POST請求方式

GET；建立的請求數據增長到open()方法的url地址中
將發送請求數據的send()方法參數爲null值
POST；須要經過XMLHttpRequest對象的setRequestHeader()方法設置請求信息
經過XMLHttpRequest對象的send()發送請求數據服務器

<body>

<form action="#" enctype="application/x-www-form-urlencoded">
    <input type="text" id="user" name="user">
    <input type="text" id="pwd" name="pwd">
    <input type="submit">
</form>
<button id="qyc">按鈕</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');

    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        // 建立XMLHttpRequest對象
        xhr.onreadystatechange = function () {// 監聽服務器端的通訊狀態
            if(xhr.readyState === 4){
                console.log(xhr.status);
                if (xhr.status === 200){
                    console.log(xhr.responseText);
                }
            }
        }
        xhr.open('post','http://localhost:63342/code/02_%E6%B5%8B%E8%AF%95XMLHTTPRequest%E5%AF%B9%E8%B1%A1.html?user=zhangwuji&pwd=123456');
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        // 設置請求頭部信息
        xhr.send('user=zhangwuji&pwd=123456');
    });
</script>
</body>

JSON數據格式

1.JavaScript中的JSON

<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
//    JSON字符串-該格式符合JSON格式要求，類型就是字符串的類型
    var jsonObject = {
        name : '犬夜叉'
    }
    var jsonArr = [1,2,3,4];
//    JSON對象-該JSON模式在JavaScript中具體表現只有對象與數組
</script>
</body>

2.JSON字符串與JSON對象

<script src="js/json2.js"></script>
</head>
<body>
<script>
    var jsonString = '{"name" : "犬夜叉"}';
    var jsonObject = JSON.parse(jsonString);
    console.log(jsonObject);
    var jsonResult = JSON.stringify(jsonObject);
    console.log(jsonResult);
//    JSON字符串
</script>
</body>

Ajax中的JSON

<body>
<button id="qyc">提交</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function(){
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function(){
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 接收數據 - JSON數據格式，是字符串類型
                var data = xhr.responseText;
                // 將符合JSON格式的字符串類型數據進行轉換
                var json = JSON.parse(data);
                // 進行具體處理
                console.log(json);
            }
        }

        // 請求數據格式 - user=zhangwuji&pwd=12345
        xhr.open('post','server.json');

        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

        var obj = {
            name : '犬夜叉',
            age : 16
        }
        // 將JSON字符串轉換成符合請求數據的格式
        xhr.send('name=' + obj.name + '&age=' + obj.age);
    });

</script>
</body>

Ajax中的XML

<body>
<button id="qyc">按鈕</button>
<script src="js/createXMLHttpRequest.js"></script>
<script>
    var qyc = document.getElementById('qyc');
    qyc.addEventListener('click',function () {
        var xhr = createXMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200){
                var data = xhr.responseXML;
                //接收數據-responseXML屬性-接收XML數據格式
                var nameElement = data.getElementsByTagName('name')[0];
                // 利用DOM解析XML
                console.log(nameElement.textContent);
            }
            xhr.open('post','server.xml');
            xhr.snd(null);
        }
    });
</script>
</body>

相關標籤/搜索

每日一句

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