JavaScript庫hxsfx.ajax之解決動(dòng)態(tài)加載HTML

言

最近寫博客真的是太痛苦了，倒不是寫博客本身，而是寫完之后往多個(gè)平臺(tái)發(fā)布的過程，一不注意就是十多分鐘往上的時(shí)間消耗。

為了解決這個(gè)問題，之前立項(xiàng)的“解決自媒體一鍵多平臺(tái)發(fā)布”項(xiàng)目必須得立刻著手完善了，爭(zhēng)取早日讓自己從發(fā)布這件事情上解脫出來專心寫文章。

【hxsfx的JavaScript庫】這個(gè)系列基本上是為“一鍵多平臺(tái)發(fā)布”項(xiàng)目打基礎(chǔ)用的。之所以把各個(gè)功能模塊拆分出來，是為了盡量讓小伙伴能夠復(fù)制即用（在兼容性方面，因?yàn)閭€(gè)人能力的原因，幾乎只會(huì)兼容Chrome瀏覽器）。

hxsfx.ajax庫

（一）介紹

AJAX 是異步的 JavaScript 和 XML（Asynchronous JavaScript And XML），開發(fā)hxsfx.ajax庫的主要目的就是希望通過異步加載HTML，從而盡量避免直接在js中寫HTML來刷新頁面內(nèi)容。

hxsfx.ajax這個(gè)庫與jquery的ajax功能基本一致，不過短時(shí)間內(nèi)應(yīng)該是寫不到人家那么完善的。哈哈~

各位小伙伴別問，為什么不用jquery的ajax而要自己再寫一個(gè)呢？

問就是，博主喜歡造輪子。開玩笑了~

其實(shí)原因是為了減少三方庫的依賴，達(dá)到對(duì)項(xiàng)目的全面掌控。

項(xiàng)目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代碼

要自己開發(fā)一個(gè)ajax庫，需要借助Web API接口中的XMLHttpRequest（XHR）對(duì)象。

XMLHttpRequest（XHR）對(duì)象用于與服務(wù)器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請(qǐng)求特定 URL，獲取數(shù)據(jù)。這允許網(wǎng)頁在不影響用戶操作的情況下，更新頁面的局部內(nèi)容。

1、在window對(duì)象上新建一個(gè)hxsfx對(duì)象，本系列的所有庫基本都會(huì)在hxsfx對(duì)象之中：

//hxsfx.js
(function () {
    window.hxsfx = {};
})();

2、在hxsfx對(duì)象的基礎(chǔ)上新建一個(gè)ajax對(duì)象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
    };
})();

3、在ajax對(duì)象中新建loadHTML方法，設(shè)置兩個(gè)參數(shù)，分別是ele準(zhǔn)備加載HTML的容器元素和url加載HTML的地址：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
        }
    };
})();

4、在loadHTML方法中新建XMLHttpRequest對(duì)象：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //為了讓代碼更健壯，使用try...catch來捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                              //在這處理返回的HTML
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

5、為了解決加載HTML緩存的問題，將loadHTML方法中傳入的URL參數(shù)后面加上一個(gè)時(shí)間戳：

//ajax.js
//時(shí)間戳用來解決加載頁面緩存的問題
var urlTimeStamp = "timeStamp=" + new Date().getTime();
url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;

6、【重點(diǎn)】在這處理返回的HTML時(shí)，如果直接將HTML加載到容器中，會(huì)出現(xiàn)HTML中Javascript代碼不執(zhí)行的問題。解決這個(gè)問題，需要將加載的script標(biāo)簽替換為script元素：

//ajax.js
ele.innerHTML = httpRequest.responseText;
var scriptElements = ele.getElementsByTagName("script");
for (var i = 0; i < scriptElements.length; i++) {
    var scriptElement = document.createElement("script");
    scriptElement.setAttribute("type", "text/javascript");
    var src = scriptElements[i].getAttribute("src");
    if (src) {
        //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁面的，需要修改為當(dāng)前頁面的引用路徑
        src = url.substring(0, url.lastIndexOf('/') + 1)  + src;
        src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
        scriptElement.setAttribute("src", src);
    }
    var scriptContent = scriptElements[i].innerHTML;
    if (scriptContent) {
        scriptElement.innerHTML = scriptContent;
    }
    //用生成的script元素去替換html中的script標(biāo)簽，以此來激活script代碼
    ele.replaceChild(scriptElement, scriptElements[i]);
}

7、最后ajax.js完整代碼：

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //時(shí)間戳用來解決加載頁面緩存的問題
            var urlTimeStamp = "timeStamp=" + new Date().getTime();
            url += ((url.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
            const httpRequest = new XMLHttpRequest();
            httpRequest.open('GET', url, true);
            httpRequest.onreadystatechange = function () {
                //為了讓代碼更健壯，使用try...catch來捕獲返回狀態(tài)判斷和處理HTML代碼的異常
                try {
                    if (httpRequest.readyState === XMLHttpRequest.DONE) {
                        if (httpRequest.status === 200) {
                            ele.innerHTML = httpRequest.responseText;
                            var scriptElements = ele.getElementsByTagName("script");
                            for (var i = 0; i < scriptElements.length; i++) {
                                var scriptElement = document.createElement("script");
                                scriptElement.setAttribute("type", "text/javascript");
                                var src = scriptElements[i].getAttribute("src");
                                if (src) {
                                    //因?yàn)榧虞d的src路徑是之前相對(duì)加載HTML頁面的，需要修改為當(dāng)前頁
                                    src = url.substring(0, url.lastIndexOf('/') + 1) + src;
                                    src += ((src.indexOf('?') >= 0) ? "&" : "?") + urlTimeStamp;
                                    scriptElement.setAttribute("src", src);
                                }
                                var scriptContent = scriptElements[i].innerHTML;
                                if (scriptContent) {
                                    scriptElement.innerHTML = scriptContent;
                                }
                                //用生成的script元素去替換html中的script標(biāo)簽，以此來激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請(qǐng)求出錯(cuò)】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）調(diào)用文檔

1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾

2、在Scripts文件夾同級(jí)目錄新建index.html頁面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>js庫測(cè)試</title>
    <script src="Scripts/hxsfx/hxsfx.js"></script>
    <script src="Scripts/hxsfx/ajax.js"></script>
    <script>
        window.onload = function () {
                //調(diào)用ajax中的loadHTML方法
            window.hxsfx.ajax.loadHTML(document.getElementById("ContentContainer"), "Views/test/testPage.html");
        };
    </script>
</head>
<body>
    <div id="ContentContainer"></div>
</body>
</html>

3、在Scripts文件夾同級(jí)目錄，首先新建Views文件夾，接著其中新建test文件夾，最后在test文件夾中新建testPage.html

<style>
    div#TestPageContainer {
        height: 300px;
        width: 300px;
        background-color: #F0F0F0;
    }
</style>
<script src="../../Scripts/hxsfx/test/test.js"></script>
<script>
    function updateBackgroundColor() {
        try {
            var backgroundColor = '#' + (Math.floor(Math.random() * 0xffffff).toString(16).padStart(6, '0'));
            document.getElementById("TestPageContainer").style.backgroundColor = backgroundColor;
        }
        catch (ex) {
            console.log(ex.message);
        }
    }
</script>
<div id="TestPageContainer">
    <button onclick="updateBackgroundColor()">更改背景色</button>
    <button onclick="modifyPFontColor()">更改下面一句話的字體顏色</button>
    <p id="P">這兒是一句話。</p>
</div>

最后

以上內(nèi)容只是hxsfx.ajax庫的開始，后續(xù)的內(nèi)容更新小伙伴可以通過訪問Github項(xiàng)目地址進(jìn)行獲取。

JAX 是一種與服務(wù)器交換數(shù)據(jù)的技術(shù)，可以在補(bǔ)充在整個(gè)頁面的情況下更新網(wǎng)頁的一部分。接下來通過本文給大家介紹ajax一些常用方法，大家有需要可以一起學(xué)習(xí)。

1.url:

要求為String類型的參數(shù)，(默認(rèn)為當(dāng)前頁地址)發(fā)送請(qǐng)求的地址。

2.type:

要求為String類型的參數(shù)，請(qǐng)求方式(post或get)默認(rèn)為get。注意其他http請(qǐng)求方法，例如put和delete也可以使用，但僅部分瀏覽器支持。

3.timeout:

要求為Number類型的參數(shù)，設(shè)置請(qǐng)求超時(shí)時(shí)間(毫秒)。此設(shè)置將覆蓋$.ajaxSetup()方法的全局設(shè)置。

4.async:

要求為Boolean類型的參數(shù)，默認(rèn)設(shè)置為true，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為false。注意，同步請(qǐng)求將鎖住瀏覽器，用戶其他操作必須等待請(qǐng)求完成才可以執(zhí)行。

5.cache:

要求為Boolean類型的參數(shù)，默認(rèn)為true(當(dāng)dataType為script時(shí)，默認(rèn)為false)，設(shè)置為false將不會(huì)從瀏覽器緩存中加載請(qǐng)求信息。

6.data:

要求為Object或String類型的參數(shù)，發(fā)送到服務(wù)器的數(shù)據(jù)。如果已經(jīng)不是字符串，將自動(dòng)轉(zhuǎn)換為字符串格式。get請(qǐng)求中將附加在url后。防止這種自動(dòng)轉(zhuǎn)換，可以查看 processData選項(xiàng)。對(duì)象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉(zhuǎn)換為&foo1=bar1&foo2=bar2。如果是數(shù)組，JQuery將自動(dòng)為不同值對(duì)應(yīng)同一個(gè)名稱。例如{foo:["bar1","bar2"]}轉(zhuǎn)換為&foo=bar1&foo=bar2。

7.dataType:

要求為String類型的參數(shù)，預(yù)期服務(wù)器返回的數(shù)據(jù)類型。如果不指定，JQuery將自動(dòng)根據(jù)http包mime信息返回responseXML或responseText，并作為回調(diào)函數(shù)參數(shù)傳遞。可用的類型如下：

xml：返回XML文檔，可用JQuery處理。

html：返回純文本HTML信息;包含的script標(biāo)簽會(huì)在插入DOM時(shí)執(zhí)行。

script：返回純文本JavaScript代碼。不會(huì)自動(dòng)緩存結(jié)果。除非設(shè)置了cache參數(shù)。注意在遠(yuǎn)程請(qǐng)求時(shí)(不在同一個(gè)域下)，所有post請(qǐng)求都將轉(zhuǎn)為get請(qǐng)求。

json：返回JSON數(shù)據(jù)。

jsonp：JSONP格式。使用SONP形式調(diào)用函數(shù)時(shí)，例如myurl?callback=?，JQuery將自動(dòng)替換后一個(gè)“?”為正確的函數(shù)名，以執(zhí)行回調(diào)函數(shù)。

text：返回純文本字符串。

8.beforeSend：

要求為Function類型的參數(shù)，發(fā)送請(qǐng)求前可以修改XMLHttpRequest對(duì)象的函數(shù)，例如添加自定義HTTP頭。在beforeSend中如果返回false可以取消本次ajax請(qǐng)求。XMLHttpRequest對(duì)象是惟一的參數(shù)。

function(XMLHttpRequest){

this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

9.complete：

要求為Function類型的參數(shù)，請(qǐng)求完成后調(diào)用的回調(diào)函數(shù)(請(qǐng)求成功或失敗時(shí)均調(diào)用)。參數(shù)：XMLHttpRequest對(duì)象和一個(gè)描述成功請(qǐng)求類型的字符串。

function(XMLHttpRequest, textStatus){

this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

10.success：

要求為Function類型的參數(shù)，請(qǐng)求成功后調(diào)用的回調(diào)函數(shù)，有兩個(gè)參數(shù)。

(1)由服務(wù)器返回，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。

(2)描述狀態(tài)的字符串。

function(data, textStatus){

//data可能是xmlDoc、jsonObj、html、text等等

this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

11.error:

要求為Function類型的參數(shù)，請(qǐng)求失敗時(shí)被調(diào)用的函數(shù)。該函數(shù)有3個(gè)參數(shù)，即XMLHttpRequest對(duì)象、錯(cuò)誤信息、捕獲的錯(cuò)誤對(duì)象(可選)。ajax事件函數(shù)如下：

function(XMLHttpRequest, textStatus, errorThrown){

//通常情況下textStatus和errorThrown只有其中一個(gè)包含信息

this; //調(diào)用本次ajax請(qǐng)求時(shí)傳遞的options參數(shù)

}

12.contentType：

要求為String類型的參數(shù)，當(dāng)發(fā)送信息至服務(wù)器時(shí)，內(nèi)容編碼類型默認(rèn)為"application/x-www-form-urlencoded"。該默認(rèn)值適合大多數(shù)應(yīng)用場(chǎng)合。

13.dataFilter：

要求為Function類型的參數(shù)，給Ajax返回的原始數(shù)據(jù)進(jìn)行預(yù)處理的函數(shù)。提供data和type兩個(gè)參數(shù)。data是Ajax返回的原始數(shù)據(jù)，type是調(diào)用jQuery.ajax時(shí)提供的dataType參數(shù)。函數(shù)返回的值將由jQuery進(jìn)一步處理。

function(data, type){

//返回處理后的數(shù)據(jù)

return data;

}

14.dataFilter：

function(data, type){

//返回處理后的數(shù)據(jù)

return data;

}

15.global：

要求為Boolean類型的參數(shù)，默認(rèn)為true。表示是否觸發(fā)全局ajax事件。設(shè)置為false將不會(huì)觸發(fā)全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified：

要求為Boolean類型的參數(shù)，默認(rèn)為false。僅在服務(wù)器數(shù)據(jù)改變時(shí)獲取新數(shù)據(jù)。服務(wù)器數(shù)據(jù)改變判斷的依據(jù)是Last-Modified頭信息。默認(rèn)值是false，即忽略頭信息。

17.jsonp：

要求為String類型的參數(shù)，在一個(gè)jsonp請(qǐng)求中重寫回調(diào)函數(shù)的名字。該值用來替代在"callback=?"這種GET或POST請(qǐng)求中URL參數(shù)里的"callback"部分，例如{jsonp:'onJsonPLoad'}會(huì)導(dǎo)致將"onJsonPLoad=?"傳給服務(wù)器。

18.username：

要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問認(rèn)證請(qǐng)求的用戶名。

19.password：

要求為String類型的參數(shù)，用于響應(yīng)HTTP訪問認(rèn)證請(qǐng)求的密碼。

20.processData：

要求為Boolean類型的參數(shù)，默認(rèn)為true。默認(rèn)情況下，發(fā)送的數(shù)據(jù)將被轉(zhuǎn)換為對(duì)象(從技術(shù)角度來講并非字符串)以配合默認(rèn)內(nèi)容類型"application/x-www-form-urlencoded"。如果要發(fā)送DOM樹信息或者其他不希望轉(zhuǎn)換的信息，請(qǐng)?jiān)O(shè)置為false。

21.scriptCharset：

要求為String類型的參數(shù)，只有當(dāng)請(qǐng)求時(shí)dataType為"jsonp"或者"script"，并且type是GET時(shí)才會(huì)用于強(qiáng)制修改字符集(charset)。通常在本地和遠(yuǎn)程的內(nèi)容編碼不同時(shí)使用。

案例代碼：

$(function(){

$('#send').click(function(){

$.ajax({

type: "GET",

url: "test.json",

data: {username:$("#username").val(), content:$("#content").val()},

dataType: "json",

success: function(data){

$('#resText').empty(); //清空resText里面的所有內(nèi)容

var html = '';

$.each(data, function(commentIndex, comment){

html += '<div class="comment"><h6>' + comment['username']

+ ':</h6><p class="para"' + comment['content']

+ '</p></div>';

});

習(xí)大綱

基礎(chǔ)學(xué)習(xí)路徑

1.什么是AJAX

1.1概念

AJAX是Asynchronous javascript and xml 的縮寫，表示異步j(luò)avascript 和 xml ,是一種交互式網(wǎng)頁應(yīng)用開發(fā)技術(shù)。

AJAX是一些老技術(shù)的新應(yīng)用，應(yīng)用到了html css javascript dom , 以XMLHttpRequest為技術(shù)核心實(shí)現(xiàn)網(wǎng)頁異步數(shù)據(jù)傳輸。

1.2特點(diǎn)

最大特點(diǎn)就是：網(wǎng)頁不用刷新進(jìn)行數(shù)據(jù)傳輸

1.3應(yīng)用場(chǎng)景

用戶注冊(cè)

AJAX分頁效果

圖片加載瀑布流效果

2.AJAX工作流程

傳統(tǒng)的數(shù)據(jù)提交方式

AJAX數(shù)據(jù)提交方式

通過上述對(duì)比，客戶端用戶部分減少了2個(gè)流程，交給了ajax去處理，那么就減少了用戶的等待時(shí)間，用戶體驗(yàn)大大的提升

3.AJAX的優(yōu)點(diǎn)

? 減少服務(wù)器帶寬，按需獲得數(shù)據(jù)

注意：在一些有列表展示功能的地方優(yōu)勢(shì)特別突出

? 無刷新更新頁面，減少用戶的實(shí)際和心理等待時(shí)間

注：用戶注冊(cè)，用戶登錄。多數(shù)據(jù)信息的展示

? 更好的用戶體驗(yàn)，傳統(tǒng)數(shù)據(jù)提交會(huì)刷新頁面，易丟失用戶填寫數(shù)據(jù)

? 主瀏覽器都支持

二、AJAX使用

1.創(chuàng)建ajax對(duì)象

XHR = new XMLHttpRequest();

2.建立鏈接

1.1語法

創(chuàng)建請(qǐng)求頭使用OPEN,主要實(shí)現(xiàn)（請(qǐng)求類型，請(qǐng)求地址）

對(duì)象.open(請(qǐng)求類型GET/POST,請(qǐng)求地址,[同步true/異步false]);

默認(rèn)：同步 True

1.2代碼

//創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo.php');

3.發(fā)送請(qǐng)求

1.1語法

主要實(shí)現(xiàn)請(qǐng)求服務(wù)器操作

對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);

1.2代碼

【HTML代碼】
<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo.php');
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   XHRObj.send();
   
</script>
【PHP代碼】
<?php
echo 'test';

腳下留心：

一定要在服務(wù)器目錄下面運(yùn)行AJAX-發(fā)送請(qǐng)求.html,不能直接用瀏覽器瀏覽該文件

4.響應(yīng)請(qǐng)求（接受服務(wù)器返回的信息）

1.1語法

對(duì)象.responseText (獲取服務(wù)器響應(yīng)的字符串?dāng)?shù)據(jù))

對(duì)象.responseXML(獲取服務(wù)器響應(yīng)的xml數(shù)據(jù))

1.2代碼

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo.php');
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   
   XHRObj.send();
   //alert返回的數(shù)據(jù)
   alert(XHRObj.responseText);
   
</script>

案例運(yùn)行結(jié)果

腳下留心：無法響應(yīng)數(shù)據(jù)

原因：在AJAX沒有完成請(qǐng)求這個(gè)時(shí)候是沒有返回值的，所以獲取數(shù)據(jù)是沒有結(jié)果的。

解決方法：通過判斷reaystate == 4 是否AJAX請(qǐng)求完成

1.3判斷服務(wù)器是否響應(yīng)成功

Onreadystatechange 作用：ajax在請(qǐng)求的過程中發(fā)生任何狀態(tài)的變化都會(huì)調(diào)用該方法

Readystate 作用：返回ajax的請(qǐng)求狀態(tài)

狀態(tài)說明：

最終代碼：以及結(jié)果

思考：為什么沒有打印0~4

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo.php');
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   console.log(XHRObj.readyState);
   //發(fā)送請(qǐng)求
   XHRObj.send();
   //當(dāng)請(qǐng)求狀態(tài)發(fā)送變化時(shí)ajax會(huì)自動(dòng)調(diào)用該方法onreadystatechange
   XHRObj.onreadystatechange=function(){
       console.log(XHRObj.readyState);
       if(XHRObj.readyState==4){
            console.log(XHRObj.responseText);
       }
       
   }
   console.log(XHRObj.readyState+'sdf');  
</script>

說明：

程序是從上往下進(jìn)行的，里面的代碼是等發(fā)送異步請(qǐng)求完了才去執(zhí)行的。

狀態(tài)0是無法獲取的，因?yàn)閷?shí)例化AJAX的對(duì)象，然而監(jiān)聽需要對(duì)象對(duì)象里面的屬性來完成，所以0裝就是實(shí)例化對(duì)象的時(shí)候。

思考：避免接口寫錯(cuò)

例如：

在實(shí)際使用中，我們?yōu)榱酥挥性谡?qǐng)求的接口正確的時(shí)候獲取相應(yīng)的數(shù)據(jù)，一般我們要判斷返回的HTTP狀態(tài)是否正確，

使用：

對(duì)象.status == 200

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo1.php');
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
//    console.log(XHRObj.readyState);
   //發(fā)送請(qǐng)求
   XHRObj.send();
   //當(dāng)請(qǐng)求狀態(tài)發(fā)送變化時(shí)ajax會(huì)自動(dòng)調(diào)用該方法onreadystatechange
   XHRObj.onreadystatechange=function(){
//        console.log(XHRObj.readyState);
       if(XHRObj.readyState == 4 && XHRObj.status == 200){
            console.log(XHRObj.responseText);
       }
//        else{
//            //以郵件或者短信的形式發(fā)送通網(wǎng)站管理員
//            alert('服務(wù)器錯(cuò)誤，很忙......');
//        }
       
   }
   
//    console.log(XHRObj.readyState+'sdf');
</script>

5.案例聯(lián)系-檢查用戶名是否存在

1.1案例需求

判斷用戶名admin是否存在，當(dāng)存在的時(shí)候返回【不可用】，當(dāng)不存在的時(shí)候返回【可用】

1.2完成思路

明確需求：

第一步：給按鈕增加點(diǎn)擊事件

第二步：獲取用戶輸入的值username

第三步：使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件

第四步：編寫PHP文件checkuser.php 判斷用戶是否存在，返回結(jié)果

第五步：將PHP返回的結(jié)果彈出來

1.3HTML代碼

<!--

第一步：給按鈕增加點(diǎn)擊事件

第二步：獲取用戶輸入的值username

第三步：使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件

第四步：編寫PHP文件checkuser.php 接受參數(shù)，并且判斷用戶是否存在，返回結(jié)果

第五步：將PHP返回的結(jié)果彈出來

-->

<script type="text/javascript">
   //按鈕綁定事件，給input增加ID屬性
  var checkObj = document.getElementById('check');
  checkObj.onclick = function(){
      var username = document.getElementById('username').value;
      //創(chuàng)建ajax對(duì)象
      var XHRObj = new XMLHttpRequest();
      //創(chuàng)建請(qǐng)求頭，設(shè)置請(qǐng)求發(fā)送的地址和類型，并且將參數(shù)傳遞給服務(wù)端
      XHRObj.open('get','check.php?username='+username);
      //獲取服務(wù)器端返回的數(shù)據(jù)  
      XHRObj.onreadystatechange = function(){
          if(XHRObj.readyState == 4 && XHRObj.status == 200){
              alert(XHRObj.responseText);
          }
      }
      //發(fā)送請(qǐng)求
      XHRObj.send();
     
  }
   
</script>

1.4PHP代碼

<?php
//定義一個(gè)用戶數(shù)組
$user = array('admin','xiaoming','xiaohong','xiaoqiang');
//獲取傳遞的參數(shù)
$username = $_GET['username'];
//判斷用戶是否存在在數(shù)組中
if(in_array($username,$user)){
   echo '不可用';
}else{
   echo '可用';
}

進(jìn)化版本

1)進(jìn)化要求

當(dāng)用戶名可用的時(shí)候后面增加√說可用，當(dāng)用戶名不可用的時(shí)候出現(xiàn)一個(gè)×提示當(dāng)前用戶名太火，請(qǐng)換一個(gè)

HTML代碼

<style>
   .error{
       color: red;
       font-size: 14px;
   }
   .green{
       color: green;
       font-size: 14px;
   }
   
</style>
<body>
<!--   <span class="error">×此用戶名太首歡迎，請(qǐng)換一個(gè)</span>-->
<!--   <span class="green">√恭喜你，該用戶可用</span>-->
   <table border="1">
       <th colspan="2">用戶注冊(cè)</th>
       <tr>
           <td><input id="username" name="username" type="text"/><div id='error'></div></td>
           <td><input id="check" type="button" value="檢測(cè)用戶"/></td>
       </tr>
       
   </table>
</body>
<!--
第一步：給按鈕增加點(diǎn)擊事件
第二步：獲取用戶輸入的值username
第三步：使用AJAX將內(nèi)容發(fā)送給服務(wù)器端PHP文件
第四步：編寫PHP文件checkuser.php 接受參數(shù)，并且判斷用戶是否存在，返回結(jié)果
第五步：將PHP返回的結(jié)果彈出來
-->
<script type="text/javascript">
   //按鈕綁定事件，給input增加ID屬性
  var checkObj = document.getElementById('check');
  checkObj.onclick = function(){
      var username = document.getElementById('username').value;
      //創(chuàng)建ajax對(duì)象
      var XHRObj = new XMLHttpRequest();
      //創(chuàng)建請(qǐng)求頭，設(shè)置請(qǐng)求發(fā)送的地址和類型，并且將參數(shù)傳遞給服務(wù)端
      XHRObj.open('get','check.php?username='+username);
      //獲取服務(wù)器端返回的數(shù)據(jù)  
      XHRObj.onreadystatechange = function(){
          if(XHRObj.readyState == 4 && XHRObj.status == 200){
//               alert(XHRObj.responseText);
              if(XHRObj.responseText =='可用'){
                   document.getElementById('error').innerHTML='<span class="green">√恭喜你，該用戶沒有被注冊(cè)</span>';
              }else{
                  document.getElementById('error').innerHTML=' <span class="error">×此用戶名太首歡迎，請(qǐng)換一個(gè)</span>';
                 
              }
          }
      }
      //發(fā)送請(qǐng)求
      XHRObj.send();
     
  }
   
</script>

三、發(fā)送GET/POST請(qǐng)求

1.POST和GET的區(qū)別

數(shù)據(jù)方面：GET受瀏覽器的影響

POST 原則上是不受限制的，可以通過PHP配置POST_MAX_SIZE進(jìn)行更改

安全方面：POST比GET要安全

文件上傳：GET不能進(jìn)行文件上傳

2.Ajax之GET請(qǐng)求（加參數(shù)）

1.1實(shí)現(xiàn)方式

說明：在請(qǐng)求地址后面增加參數(shù),例如：demo.php?a=111&b=222&c=333

1.2代碼

【HTML代碼】
<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭，請(qǐng)求方式，請(qǐng)求鏈接
   XHRObj.open('get','test.php?a=111&b=222&c=333');
   //發(fā)送請(qǐng)求
   XHRObj.send();
</script>
【PHP代碼】
<?php
var_dump($_GET);

3.AJAX之POST請(qǐng)求

1.1實(shí)現(xiàn)方式

Open(‘POST’,請(qǐng)求地址);

設(shè)置發(fā)送的數(shù)據(jù)格式，采用URL編碼格式

對(duì)象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

對(duì)象.send(發(fā)送的數(shù)據(jù));

1.2代碼

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   XHRObj.onreadystatechange = function() {
   if (XHRObj.readyState == 4) {
     alert(XHRObj.responseText);
   }
 }
   //創(chuàng)建請(qǐng)求頭，請(qǐng)求方式，請(qǐng)求鏈接
   XHRObj.open('post','test.php');
   //發(fā)送post的數(shù)據(jù)
   var postData = 'name=123123&age=rrr';
   
   //設(shè)置數(shù)據(jù)編碼格式,使用URL編碼格式
   XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   
   //發(fā)送請(qǐng)求
   XHRObj.send(postData);
</script>

【PHP代碼】

<?php

var_dump($_POST);

效果

4.練習(xí)：表單無刷新數(shù)據(jù)錄入

四、AJAX同步異步請(qǐng)求

1.概念

同步：等待服務(wù)器響應(yīng)完成在執(zhí)行下一段JS代碼（阻塞模式）

異步：不等服務(wù)器響應(yīng)完成直接執(zhí)行下一段JS代碼（非阻塞模式）

2.驗(yàn)證同步

設(shè)置open(方式，請(qǐng)求地址,false/同步);

HTML【代碼】

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo.php',false);
   //時(shí)時(shí)監(jiān)控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4){
           console.log('111');
       }
   }
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   XHRObj.send();
   console.log('js執(zhí)行完成');
   
</script>

【PHP代碼】

為了增加延遲效果使用sleep

<?php
sleep(8);
echo 'test';

3.驗(yàn)證異步

【HTML代碼】
<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','demo.php');
   //時(shí)時(shí)監(jiān)控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4){
           console.log('111');
       }
   }
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   XHRObj.send();
   console.log('js執(zhí)行完成');
   
</script>

【PHP代碼】

<?php
sleep(8);
echo 'test';

五、解決緩存問題

1.緩存分析

我們?cè)贋g覽一些網(wǎng)站的時(shí)候?yàn)g覽器為了方便用戶再次訪問的時(shí)候增加用戶訪問體驗(yàn)會(huì)將一些靜態(tài)資源文件緩存到本地

緩存的位置在：

選中IE瀏覽器右鍵

打開

靜態(tài)緩存目錄就出現(xiàn)再這里面了

說明：IE存在緩存

2.解決方案

1.1隨機(jī)數(shù)

代碼設(shè)置：?t=Math.random()

缺點(diǎn)：

1.不能保證URL絕對(duì)唯一

2.產(chǎn)生大量緩存文件

1.2時(shí)間

代碼設(shè)置：?t=new Date().getTime(); //取得毫秒時(shí)間戳

優(yōu)點(diǎn)：保證URL絕對(duì)唯一

缺點(diǎn)：依然產(chǎn)生大量緩存文件

1.3設(shè)置請(qǐng)求頭

代碼設(shè)置：對(duì)象.setRequestHeader("If-Modified-Since","0");

原理分析：

If-Modified-Since是標(biāo)準(zhǔn)的HTTP請(qǐng)求頭標(biāo)簽，在發(fā)送HTTP請(qǐng)求時(shí)，把瀏覽器端緩存頁面的最后修改時(shí)間一起發(fā)到服務(wù)器去，服務(wù)器會(huì)把這個(gè)時(shí)間與服務(wù)器上實(shí)際文件的最后修改時(shí)間進(jìn)行比較。

如果時(shí)間一致，那么返回HTTP狀態(tài)碼304（不返回文件內(nèi)容），客戶端接到之后，就直接把本地緩存文件顯示到瀏覽器中。

如果時(shí)間不一致，就返回HTTP狀態(tài)碼200和新的文件內(nèi)容，客戶端接到之后，會(huì)丟棄舊文件，把新文件緩存起來，并顯示到瀏覽器中。

1.4設(shè)置相應(yīng)頭

代碼設(shè)置：header("Cache-Control: no-cache, must-revalidate");

原理分析：

利用php的header函數(shù)向響應(yīng)頭中寫數(shù)據(jù)，寫的是告訴客戶端：不要對(duì)本次的結(jié)果進(jìn)行緩存。

這種做法，可以從根本上解決緩存問題，不產(chǎn)生任何緩存文件。

六、返回?cái)?shù)據(jù)格式

1.數(shù)據(jù)格式分類

普通字符串文本格式：responseText

XML數(shù)據(jù)格式:responseXML

JSON 字符串?dāng)?shù)據(jù)格式：responseText (在實(shí)際工作中用到最多，最廣泛的格式)

2.返回Text數(shù)據(jù)處理

1.1HTML代碼

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','text.php');
   //時(shí)時(shí)監(jiān)控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4 && XHRObj.status == 200){
           document.getElementById('content').innerHTML=XHRObj.responseText;
       }
   }
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   XHRObj.send();
   
</script>
<body>
   <div id="content"></div>
</body>

1.2PHP代碼

<?php

echo '<h1>返回的文本</h1>';

最終效果

3.返回XML數(shù)據(jù)處理

1.1HTML代碼

<script type="text/javascript">
   //創(chuàng)建AJAX對(duì)象
   var XHRObj = new XMLHttpRequest();
   //創(chuàng)建請(qǐng)求頭
   XHRObj.open('GET','xml.php');
   //時(shí)時(shí)監(jiān)控
   XHRObj.onreadystatechange = function(){
       if(XHRObj.readyState == 4 && XHRObj.status == 200){
          var xmlObj = XHRObj.responseXML;
           //以前獲取html文檔我們使用  document.getElementByTagName()
           books = xmlObj.getElementsByTagName('book');
           for(i=0;i<books.length;i++){
//獲取第二級(jí)的值我們使用childen 方法
               for(j=0;j<books[i].children.length;j++){
                   
                   console.log(books[i].children[j].innerHTML);
               }
           }
       }
   }
   //發(fā)送請(qǐng)求  對(duì)象.send(POST請(qǐng)求則填寫POST的數(shù)據(jù)/GET請(qǐng)求可以不用寫);
   XHRObj.send();
   
   
</script>

1.2PHP代碼

首先確保PHP寫的xml文件能再瀏覽器端訪問

<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
   <book>
       <name>西游記</name>
       <price>50.12</price>
   </book>
   
   <book>
       <name>三國演義</name>
       <price>876.12</price>
   </book>
   
</books>
';

4.返回JSON數(shù)據(jù)處理

1.1什么是JSON數(shù)據(jù)

JSON(javascript Object Notation js 對(duì)象標(biāo)記) 是一種輕量級(jí)的數(shù)據(jù)交換格式。

1.2JSON數(shù)據(jù)優(yōu)勢(shì)

數(shù)據(jù)格式比較簡單，易于讀寫，格式都是壓縮的，占用帶寬小

易于解析這種語言，客戶端JavaScript可以簡單的通過eval()進(jìn)行JSON數(shù)據(jù)的讀取

因?yàn)镴SON格式能夠直接為服務(wù)器端代碼使用, 大大簡化了服務(wù)器端和客戶端的代碼開發(fā)量, 但是完成的任務(wù)不變, 且易于維護(hù)

1.3服務(wù)器端JSON生成和解析

PHP端生成JSON數(shù)據(jù)使用：json_encode(數(shù)組數(shù)據(jù)格式);

PHP端解析JSON數(shù)據(jù)使用：json_decode(待解碼數(shù)據(jù)，true/false);

說明：false 解碼出來的數(shù)據(jù)是一個(gè)對(duì)象，true,解碼出來的是一個(gè)數(shù)組

1.4客戶端解析JSON數(shù)據(jù)

由于我們返回值的處理使用的是responseText 格式

? JSON.parse()

語法格式：JSON.parse(字符串);

作用：從一個(gè)字符串中解析出json數(shù)據(jù)對(duì)象

前提：字符串必須是json格式的字符串

? Eval

七、綜合案例-用戶注冊(cè)

1.需求

用戶會(huì)員注冊(cè)功能，用戶填寫好根據(jù)規(guī)則進(jìn)行驗(yàn)證，如果驗(yàn)證成功提示用戶注冊(cè)成功。

驗(yàn)證規(guī)則：

1.用戶名不能為空

2.用戶名必須是由數(shù)字和字母組成，而且是在6~8位之間

2.HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>AJAX-用戶注冊(cè)</title>
</head>
<style>
   dd{float: left;}    
</style>
<body>
  <div>
      <dl>
          <dd>用戶名</dd>
          <dd><input type="text" name="username" id="username"></dd>
          <dd><input type="button" id="regbtn"  value="注冊(cè)"></dd>
      </dl>
  </div>
   
</body>
<script type="text/javascript">
   
   //給注冊(cè)按鈕增加click事件
   
   var regbtn = document.getElementById('regbtn');
   
   regbtn.onclick = function(){
       
       //獲取用戶輸入的值
       var username = document.getElementById('username').value;
       
        //創(chuàng)建AJAX對(duì)象
       var XHRObj = new XMLHttpRequest();
       //打開對(duì)象
       XHRObj.open('get','reg.php?username='+username);
       //實(shí)時(shí)監(jiān)控AJAX運(yùn)行狀態(tài)
       XHRObj.onreadystatechange = function(){
           //判斷服務(wù)器是否響應(yīng)成功
           if(XHRObj.readyState==4 && XHRObj.status == 200){
               //將json數(shù)據(jù)轉(zhuǎn)換成對(duì)象
               jsonObj = JSON.parse(XHRObj.responseText);
               //判斷用戶是否操作成功進(jìn)行頁面跳轉(zhuǎn)
               if(jsonObj.state ==1){
                   location.href='success.html';
                   
               }else{
                   alert(jsonObj.msg);
               }
           }
       }
       //發(fā)送請(qǐng)求
       XHRObj.send();
       
   }
   
 
   
   
</script>
</html>

3.PHP代碼

在線咨詢

上一篇：在html5頁面中如何使用vue3
下一篇：Jsoup解析Html標(biāo)簽(Java后臺(tái)解析）

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

JavaScript庫hxsfx.ajax之解決動(dòng)態(tài)加載HTML

言

hxsfx.ajax庫

（一）介紹

（二）代碼

1、在window對(duì)象上新建一個(gè)hxsfx對(duì)象，本系列的所有庫基本都會(huì)在hxsfx對(duì)象之中：

2、在hxsfx對(duì)象的基礎(chǔ)上新建一個(gè)ajax對(duì)象：

3、在ajax對(duì)象中新建loadHTML方法，設(shè)置兩個(gè)參數(shù)，分別是ele準(zhǔn)備加載HTML的容器元素和url加載HTML的地址：

4、在loadHTML方法中新建XMLHttpRequest對(duì)象：

5、為了解決加載HTML緩存的問題，將loadHTML方法中傳入的URL參數(shù)后面加上一個(gè)時(shí)間戳：

6、【重點(diǎn)】在這處理返回的HTML時(shí)，如果直接將HTML加載到容器中，會(huì)出現(xiàn)HTML中Javascript代碼不執(zhí)行的問題。解決這個(gè)問題，需要將加載的script標(biāo)簽替換為script元素：

7、最后ajax.js完整代碼：

（三）調(diào)用文檔

1、將hxsfx.js和ajax.js放入Scripts文件夾中的hxsfx文件夾

2、在Scripts文件夾同級(jí)目錄新建index.html頁面

3、在Scripts文件夾同級(jí)目錄，首先新建Views文件夾，接著其中新建test文件夾，最后在test文件夾中新建testPage.html

最后

習(xí)大綱

1.什么是AJAX

1.1概念

1.2特點(diǎn)

1.3應(yīng)用場(chǎng)景

2.AJAX工作流程

3.AJAX的優(yōu)點(diǎn)

二、AJAX使用

1.創(chuàng)建ajax對(duì)象

2.建立鏈接

1.1語法

1.2代碼

3.發(fā)送請(qǐng)求

1.1語法

1.2代碼

4.響應(yīng)請(qǐng)求（接受服務(wù)器返回的信息）

1.1語法

1.2代碼

1.3判斷服務(wù)器是否響應(yīng)成功

5.案例聯(lián)系-檢查用戶名是否存在

1.1案例需求

1.2完成思路

1.3HTML代碼

1.4PHP代碼

三、發(fā)送GET/POST請(qǐng)求

1.POST和GET的區(qū)別

2.Ajax之GET請(qǐng)求（加參數(shù)）

1.1實(shí)現(xiàn)方式

1.2代碼

3.AJAX之POST請(qǐng)求

1.1實(shí)現(xiàn)方式

1.2代碼

四、AJAX同步異步請(qǐng)求

1.概念

2.驗(yàn)證同步

3.驗(yàn)證異步

五、解決緩存問題

1.緩存分析

2.解決方案

1.1隨機(jī)數(shù)

1.2時(shí)間

1.3設(shè)置請(qǐng)求頭

1.4設(shè)置相應(yīng)頭

六、返回?cái)?shù)據(jù)格式

1.數(shù)據(jù)格式分類

2.返回Text數(shù)據(jù)處理

1.1HTML代碼

1.2PHP代碼

3.返回XML數(shù)據(jù)處理

1.1HTML代碼

4.返回JSON數(shù)據(jù)處理

1.1什么是JSON數(shù)據(jù)

1.2JSON數(shù)據(jù)優(yōu)勢(shì)

1.3服務(wù)器端JSON生成和解析

1.4客戶端解析JSON數(shù)據(jù)

? JSON.parse()

? Eval

七、綜合案例-用戶注冊(cè)

1.需求

2.HTML代碼

3.PHP代碼

您的項(xiàng)目需求