JavaScript庫hxsfx.ajax之解決動態加載HTML

言

最近寫博客真的是太痛苦了，倒不是寫博客本身，而是寫完之后往多個平臺發布的過程，一不注意就是十多分鐘往上的時間消耗。

為了解決這個問題，之前立項的“解決自媒體一鍵多平臺發布”項目必須得立刻著手完善了，爭取早日讓自己從發布這件事情上解脫出來專心寫文章。

【hxsfx的JavaScript庫】這個系列基本上是為“一鍵多平臺發布”項目打基礎用的。之所以把各個功能模塊拆分出來，是為了盡量讓小伙伴能夠復制即用（在兼容性方面，因為個人能力的原因，幾乎只會兼容Chrome瀏覽器）。

hxsfx.ajax庫

（一）介紹

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

hxsfx.ajax這個庫與jquery的ajax功能基本一致，不過短時間內應該是寫不到人家那么完善的。哈哈~

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

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

其實原因是為了減少三方庫的依賴，達到對項目的全面掌控。

項目地址：https://github.com/hxsfx/hxsfx_web_tools

（二）代碼

要自己開發一個ajax庫，需要借助Web API接口中的XMLHttpRequest（XHR）對象。

XMLHttpRequest（XHR）對象用于與服務器交互。通過 XMLHttpRequest 可以在不刷新頁面的情況下請求特定 URL，獲取數據。這允許網頁在不影響用戶操作的情況下，更新頁面的局部內容。

1、在window對象上新建一個hxsfx對象，本系列的所有庫基本都會在hxsfx對象之中：

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

2、在hxsfx對象的基礎上新建一個ajax對象：

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

3、在ajax對象中新建loadHTML方法，設置兩個參數，分別是ele準備加載HTML的容器元素和url加載HTML的地址：

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

4、在loadHTML方法中新建XMLHttpRequest對象：

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

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

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

6、【重點】在這處理返回的HTML時，如果直接將HTML加載到容器中，會出現HTML中Javascript代碼不執行的問題。解決這個問題，需要將加載的script標簽替換為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) {
        //因為加載的src路徑是之前相對加載HTML頁面的，需要修改為當前頁面的引用路徑
        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標簽，以此來激活script代碼
    ele.replaceChild(scriptElement, scriptElements[i]);
}

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

//ajax.js
(function () {
    window.hxsfx.ajax = {
        loadHTML: function (ele, url) {
            //時間戳用來解決加載頁面緩存的問題
            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來捕獲返回狀態判斷和處理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) {
                                    //因為加載的src路徑是之前相對加載HTML頁面的，需要修改為當前頁
                                    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標簽，以此來激活script代
                                ele.replaceChild(scriptElement, scriptElements[i]);
                            }
                            }
                        }
                        else {
                            console.log("【ajax.get(" + url + ")請求出錯】");
                        }
                    }
                }
                catch (ex) {
                    console.log("【ajax.get(" + url + ")異常】" + ex.message);
                }
            };
            httpRequest.send();
        }
    };
})();

（三）調用文檔

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

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

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

3、在Scripts文件夾同級目錄，首先新建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>

最后

以上內容只是hxsfx.ajax庫的開始，后續的內容更新小伙伴可以通過訪問Github項目地址進行獲取。

JAX 是一種與服務器交換數據的技術，可以在補充在整個頁面的情況下更新網頁的一部分。接下來通過本文給大家介紹ajax一些常用方法，大家有需要可以一起學習。

1.url:

要求為String類型的參數，(默認為當前頁地址)發送請求的地址。

2.type:

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

3.timeout:

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

4.async:

要求為Boolean類型的參數，默認設置為true，所有請求均為異步請求。如果需要發送同步請求，請將此選項設置為false。注意，同步請求將鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行。

5.cache:

要求為Boolean類型的參數，默認為true(當dataType為script時，默認為false)，設置為false將不會從瀏覽器緩存中加載請求信息。

6.data:

要求為Object或String類型的參數，發送到服務器的數據。如果已經不是字符串，將自動轉換為字符串格式。get請求中將附加在url后。防止這種自動轉換，可以查看 processData選項。對象必須為key/value格式，例如{foo1:"bar1",foo2:"bar2"}轉換為&foo1=bar1&foo2=bar2。如果是數組，JQuery將自動為不同值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換為&foo=bar1&foo=bar2。

7.dataType:

要求為String類型的參數，預期服務器返回的數據類型。如果不指定，JQuery將自動根據http包mime信息返回responseXML或responseText，并作為回調函數參數傳遞。可用的類型如下：

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

html：返回純文本HTML信息;包含的script標簽會在插入DOM時執行。

script：返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下)，所有post請求都將轉為get請求。

json：返回JSON數據。

jsonp：JSONP格式。使用SONP形式調用函數時，例如myurl?callback=?，JQuery將自動替換后一個“?”為正確的函數名，以執行回調函數。

text：返回純文本字符串。

8.beforeSend：

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

function(XMLHttpRequest){

this; //調用本次ajax請求時傳遞的options參數

}

9.complete：

要求為Function類型的參數，請求完成后調用的回調函數(請求成功或失敗時均調用)。參數：XMLHttpRequest對象和一個描述成功請求類型的字符串。

function(XMLHttpRequest, textStatus){

this; //調用本次ajax請求時傳遞的options參數

}

10.success：

要求為Function類型的參數，請求成功后調用的回調函數，有兩個參數。

(1)由服務器返回，并根據dataType參數進行處理后的數據。

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

function(data, textStatus){

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

this; //調用本次ajax請求時傳遞的options參數

}

11.error:

要求為Function類型的參數，請求失敗時被調用的函數。該函數有3個參數，即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數如下：

function(XMLHttpRequest, textStatus, errorThrown){

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

this; //調用本次ajax請求時傳遞的options參數

}

12.contentType：

要求為String類型的參數，當發送信息至服務器時，內容編碼類型默認為"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

13.dataFilter：

要求為Function類型的參數，給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據，type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function(data, type){

//返回處理后的數據

return data;

}

14.dataFilter：

function(data, type){

//返回處理后的數據

return data;

}

15.global：

要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

16.ifModified：

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

17.jsonp：

要求為String類型的參數，在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數里的"callback"部分，例如{jsonp:'onJsonPLoad'}會導致將"onJsonPLoad=?"傳給服務器。

18.username：

要求為String類型的參數，用于響應HTTP訪問認證請求的用戶名。

19.password：

要求為String類型的參數，用于響應HTTP訪問認證請求的密碼。

20.processData：

要求為Boolean類型的參數，默認為true。默認情況下，發送的數據將被轉換為對象(從技術角度來講并非字符串)以配合默認內容類型"application/x-www-form-urlencoded"。如果要發送DOM樹信息或者其他不希望轉換的信息，請設置為false。

21.scriptCharset：

要求為String類型的參數，只有當請求時dataType為"jsonp"或者"script"，并且type是GET時才會用于強制修改字符集(charset)。通常在本地和遠程的內容編碼不同時使用。

案例代碼：

$(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里面的所有內容

var html = '';

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

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

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

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

});

習大綱

基礎學習路徑

1.什么是AJAX

1.1概念

AJAX是Asynchronous javascript and xml 的縮寫，表示異步javascript 和 xml ,是一種交互式網頁應用開發技術。

AJAX是一些老技術的新應用，應用到了html css javascript dom , 以XMLHttpRequest為技術核心實現網頁異步數據傳輸。

1.2特點

最大特點就是：網頁不用刷新進行數據傳輸

1.3應用場景

用戶注冊

AJAX分頁效果

圖片加載瀑布流效果

2.AJAX工作流程

傳統的數據提交方式

AJAX數據提交方式

通過上述對比，客戶端用戶部分減少了2個流程，交給了ajax去處理，那么就減少了用戶的等待時間，用戶體驗大大的提升

3.AJAX的優點

? 減少服務器帶寬，按需獲得數據

注意：在一些有列表展示功能的地方優勢特別突出

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

注：用戶注冊，用戶登錄。多數據信息的展示

? 更好的用戶體驗，傳統數據提交會刷新頁面，易丟失用戶填寫數據

? 主瀏覽器都支持

二、AJAX使用

1.創建ajax對象

XHR = new XMLHttpRequest();

2.建立鏈接

1.1語法

創建請求頭使用OPEN,主要實現（請求類型，請求地址）

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

默認：同步 True

1.2代碼

//創建AJAX對象
   var XHRObj = new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');

3.發送請求

1.1語法

主要實現請求服務器操作

對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);

1.2代碼

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

腳下留心：

一定要在服務器目錄下面運行AJAX-發送請求.html,不能直接用瀏覽器瀏覽該文件

4.響應請求（接受服務器返回的信息）

1.1語法

對象.responseText (獲取服務器響應的字符串數據)

對象.responseXML(獲取服務器響應的xml數據)

1.2代碼

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

案例運行結果

腳下留心：無法響應數據

原因：在AJAX沒有完成請求這個時候是沒有返回值的，所以獲取數據是沒有結果的。

解決方法：通過判斷reaystate == 4 是否AJAX請求完成

1.3判斷服務器是否響應成功

Onreadystatechange 作用：ajax在請求的過程中發生任何狀態的變化都會調用該方法

Readystate 作用：返回ajax的請求狀態

狀態說明：

最終代碼：以及結果

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

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj = new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','demo.php');
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   console.log(XHRObj.readyState);
   //發送請求
   XHRObj.send();
   //當請求狀態發送變化時ajax會自動調用該方法onreadystatechange
   XHRObj.onreadystatechange=function(){
       console.log(XHRObj.readyState);
       if(XHRObj.readyState==4){
            console.log(XHRObj.responseText);
       }
       
   }
   console.log(XHRObj.readyState+'sdf');  
</script>

說明：

程序是從上往下進行的，里面的代碼是等發送異步請求完了才去執行的。

狀態0是無法獲取的，因為實例化AJAX的對象，然而監聽需要對象對象里面的屬性來完成，所以0裝就是實例化對象的時候。

思考：避免接口寫錯

例如：

在實際使用中，我們為了只有在請求的接口正確的時候獲取相應的數據，一般我們要判斷返回的HTTP狀態是否正確，

使用：

對象.status == 200

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

5.案例聯系-檢查用戶名是否存在

1.1案例需求

判斷用戶名admin是否存在，當存在的時候返回【不可用】，當不存在的時候返回【可用】

1.2完成思路

明確需求：

第一步：給按鈕增加點擊事件

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

第三步：使用AJAX將內容發送給服務器端PHP文件

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

第五步：將PHP返回的結果彈出來

1.3HTML代碼

<!--

第一步：給按鈕增加點擊事件

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

第三步：使用AJAX將內容發送給服務器端PHP文件

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

第五步：將PHP返回的結果彈出來

-->

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

1.4PHP代碼

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

進化版本

1)進化要求

當用戶名可用的時候后面增加√說可用，當用戶名不可用的時候出現一個×提示當前用戶名太火，請換一個

HTML代碼

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

三、發送GET/POST請求

1.POST和GET的區別

數據方面：GET受瀏覽器的影響

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

安全方面：POST比GET要安全

文件上傳：GET不能進行文件上傳

2.Ajax之GET請求（加參數）

1.1實現方式

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

1.2代碼

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

3.AJAX之POST請求

1.1實現方式

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

設置發送的數據格式，采用URL編碼格式

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

對象.send(發送的數據);

1.2代碼

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

【PHP代碼】

<?php

var_dump($_POST);

效果

4.練習：表單無刷新數據錄入

四、AJAX同步異步請求

1.概念

同步：等待服務器響應完成在執行下一段JS代碼（阻塞模式）

異步：不等服務器響應完成直接執行下一段JS代碼（非阻塞模式）

2.驗證同步

設置open(方式，請求地址,false/同步);

HTML【代碼】

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

【PHP代碼】

為了增加延遲效果使用sleep

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

3.驗證異步

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

【PHP代碼】

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

五、解決緩存問題

1.緩存分析

我們再瀏覽一些網站的時候瀏覽器為了方便用戶再次訪問的時候增加用戶訪問體驗會將一些靜態資源文件緩存到本地

緩存的位置在：

選中IE瀏覽器右鍵

打開

靜態緩存目錄就出現再這里面了

說明：IE存在緩存

2.解決方案

1.1隨機數

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

缺點：

1.不能保證URL絕對唯一

2.產生大量緩存文件

1.2時間

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

優點：保證URL絕對唯一

缺點：依然產生大量緩存文件

1.3設置請求頭

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

原理分析：

If-Modified-Since是標準的HTTP請求頭標簽，在發送HTTP請求時，把瀏覽器端緩存頁面的最后修改時間一起發到服務器去，服務器會把這個時間與服務器上實際文件的最后修改時間進行比較。

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

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

1.4設置相應頭

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

原理分析：

利用php的header函數向響應頭中寫數據，寫的是告訴客戶端：不要對本次的結果進行緩存。

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

六、返回數據格式

1.數據格式分類

普通字符串文本格式：responseText

XML數據格式:responseXML

JSON 字符串數據格式：responseText (在實際工作中用到最多，最廣泛的格式)

2.返回Text數據處理

1.1HTML代碼

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

1.2PHP代碼

<?php

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

最終效果

3.返回XML數據處理

1.1HTML代碼

<script type="text/javascript">
   //創建AJAX對象
   var XHRObj = new XMLHttpRequest();
   //創建請求頭
   XHRObj.open('GET','xml.php');
   //時時監控
   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++){
//獲取第二級的值我們使用childen 方法
               for(j=0;j<books[i].children.length;j++){
                   
                   console.log(books[i].children[j].innerHTML);
               }
           }
       }
   }
   //發送請求  對象.send(POST請求則填寫POST的數據/GET請求可以不用寫);
   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數據處理

1.1什么是JSON數據

JSON(javascript Object Notation js 對象標記) 是一種輕量級的數據交換格式。

1.2JSON數據優勢

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

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

因為JSON格式能夠直接為服務器端代碼使用, 大大簡化了服務器端和客戶端的代碼開發量, 但是完成的任務不變, 且易于維護

1.3服務器端JSON生成和解析

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

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

說明：false 解碼出來的數據是一個對象，true,解碼出來的是一個數組

1.4客戶端解析JSON數據

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

? JSON.parse()

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

作用：從一個字符串中解析出json數據對象

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

? Eval

七、綜合案例-用戶注冊

1.需求

用戶會員注冊功能，用戶填寫好根據規則進行驗證，如果驗證成功提示用戶注冊成功。

驗證規則：

1.用戶名不能為空

2.用戶名必須是由數字和字母組成，而且是在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-用戶注冊</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="注冊"></dd>
      </dl>
  </div>
   
</body>
<script type="text/javascript">
   
   //給注冊按鈕增加click事件
   
   var regbtn = document.getElementById('regbtn');
   
   regbtn.onclick = function(){
       
       //獲取用戶輸入的值
       var username = document.getElementById('username').value;
       
        //創建AJAX對象
       var XHRObj = new XMLHttpRequest();
       //打開對象
       XHRObj.open('get','reg.php?username='+username);
       //實時監控AJAX運行狀態
       XHRObj.onreadystatechange = function(){
           //判斷服務器是否響應成功
           if(XHRObj.readyState==4 && XHRObj.status == 200){
               //將json數據轉換成對象
               jsonObj = JSON.parse(XHRObj.responseText);
               //判斷用戶是否操作成功進行頁面跳轉
               if(jsonObj.state ==1){
                   location.href='success.html';
                   
               }else{
                   alert(jsonObj.msg);
               }
           }
       }
       //發送請求
       XHRObj.send();
       
   }
   
 
   
   
</script>
</html>

3.PHP代碼

在線咨詢

上一篇：在html5頁面中如何使用vue3
下一篇：Jsoup解析Html標簽(Java后臺解析）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript庫hxsfx.ajax之解決動態加載HTML

言

hxsfx.ajax庫

（一）介紹

（二）代碼

1、在window對象上新建一個hxsfx對象，本系列的所有庫基本都會在hxsfx對象之中：

2、在hxsfx對象的基礎上新建一個ajax對象：

3、在ajax對象中新建loadHTML方法，設置兩個參數，分別是ele準備加載HTML的容器元素和url加載HTML的地址：

4、在loadHTML方法中新建XMLHttpRequest對象：

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

6、【重點】在這處理返回的HTML時，如果直接將HTML加載到容器中，會出現HTML中Javascript代碼不執行的問題。解決這個問題，需要將加載的script標簽替換為script元素：

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

（三）調用文檔

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

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

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

最后

習大綱

1.什么是AJAX

1.1概念

1.2特點

1.3應用場景

2.AJAX工作流程

3.AJAX的優點

二、AJAX使用

1.創建ajax對象

2.建立鏈接

1.1語法

1.2代碼

3.發送請求

1.1語法

1.2代碼

4.響應請求（接受服務器返回的信息）

1.1語法

1.2代碼

1.3判斷服務器是否響應成功

5.案例聯系-檢查用戶名是否存在

1.1案例需求

1.2完成思路

1.3HTML代碼

1.4PHP代碼

三、發送GET/POST請求

1.POST和GET的區別

2.Ajax之GET請求（加參數）

1.1實現方式

1.2代碼

3.AJAX之POST請求

1.1實現方式

1.2代碼

四、AJAX同步異步請求

1.概念

2.驗證同步

3.驗證異步

五、解決緩存問題

1.緩存分析

2.解決方案

1.1隨機數

1.2時間

1.3設置請求頭

1.4設置相應頭

六、返回數據格式

1.數據格式分類

2.返回Text數據處理

1.1HTML代碼

1.2PHP代碼

3.返回XML數據處理

1.1HTML代碼

4.返回JSON數據處理

1.1什么是JSON數據

1.2JSON數據優勢

1.3服務器端JSON生成和解析

1.4客戶端解析JSON數據

? JSON.parse()

? Eval

七、綜合案例-用戶注冊

1.需求

2.HTML代碼

3.PHP代碼

您的項目需求