ajax簡介

時間 2019-11-08

標籤 ajax 簡介欄目 Ajax 简体版

原文原文鏈接

AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。html

AJAX 的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。web

原生JS的實現ajax

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function loadXMLDoc()
        {
            // 二、建立一個XMLHttpRequest對象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {
                //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
                xmlhttp=new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 瀏覽器執行代碼
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //三、註冊回調函數
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            // 四、配置請求信息
            xmlhttp.open("GET","/springboot/src/main/webapp/123.txt",true);
            xmlhttp.send();
            // 五、state change發生改變調用回調函數 回調函數將xmlhttp.responseText內容寫入到頁面
        }
    </script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
<!--一、點擊按鈕觸發loadXMLDoc這個方法-->
<button type="button" onclick="loadXMLDoc()">修改內容</button></body>
</html>

根據上面的代碼解釋下ajax的請求步驟spring

一、點擊按鈕觸發loadXMLDoc這個方法json

　　這個沒啥好說的瀏覽器

二、建立一個XMLHttpRequest對象springboot

　　　全部現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。XMLHttpRequest 用於在後臺與服務器交換數據。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。服務器

三、註冊回調函數app

四、配置請求信息webapp

　　xmlhttp.open()參數:

method：請求的類型；GET 或 POST
url：文件在服務器上的位置
async：true（異步）或 false（同步）

　　　　若是是同步執行，不須要重寫onreadystatechange函數，把代碼放到 send() 語句後面便可

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

　　xmlhttp.send();

string：僅用於 POST 請求

　　　　若是post請求中有參數須要卸載send方法中

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

五、state change發生改變調用回調函數回調函數將xmlhttp.responseText內容寫入到頁面

　　若是返回的內容是字符串(json) 使用:responseText

　　若是來自服務器的響應是 XML，並且須要做爲 XML 對象進行解析，請使用 responseXML 屬性