前端設計-Ajax技術及實例展示

jax指的是異步JavaScript和XML，是一套綜合了多項技術的瀏覽器端網頁開發技術。也是目前網頁前端設計較為流行使用的技術。Ajax能夠真正實現網頁前端與業務后臺的分離，體現出網頁設計大前端的設計思想。所有的前端設計只需要通過Ajax將消息傳遞給業務邏輯，運算完直接發送前端。其實現原理如下：

工作原理及過程

一般情況下，在處理具體業務是網頁通常采用發送HTTP請求中帶有參數形式傳遞命令與數據，處理頁面接收到數據之后進行處理。這種情況需要頁面跳轉或者頁面刷新，增加了服務器與客戶端通信的開銷。而使用Ajax技術進行業務處理時只需要通過Ajax與Json實現在不刷新頁面前提下完成業務功能，在滿足前后端分離的基礎上進一步降低網絡通信量。本文針對初學者以實例形式對Ajax應用進行說明，希望對初學者有所幫助。

設計案例

案例描述：前端為用戶信息查詢頁面login.html,提供文本框用于接收用戶姓名，業務邏輯處理頁面為query.php,模擬接收用戶姓名，執行查詢，返回用戶基本信息，前端login.html通過Ajax回調函數讀取信息并以table形式進行輸出顯示。其前端頁面設計如下：

前端測試頁面

基本語法

(1) XMLHttpRequest對象

XMLHttpRequest是 AJAX 的基礎。用于向服務器發送request請求實現數據交換。由于是對象XMLHttpRequest在使用的時候需要用new進行對象的實例化。如：var xmlhttp = new XMLHttpRequest();

(2) 發送請求open()與send()

通過使用open與send方法將客戶端Ajax請求發送到服務器端，其中open請求帶有請求類型等參數，send可以帶傳遞的參數值。兩函數基本語法如下：

open(method,url,async)//方法、處理URL，異步/同步
send(string)//post類型時傳遞參數

(3) onreadystatechange 事件

通過使用該事件用于響應服務器端狀態的改變，readyState與status，其中readyState=4表示服務器請求已完成，響應已就緒。status=200表示已就緒。因此可以在該事件響應函數中去接收服務端傳遞數據。

(4) 服務器返回值類型responseText與responseXML,其中responseText表示接收服務器發送過來的字符串。

案例實現

（1）獲取表單用戶名值 var uname=document.getElementById('name').value;

（2）發送Ajax POST請求

Ajax Post請求

（3）（服務器請求處理）業務邏輯處理

php處理業務邏輯

（4）前端獲取服務器值并輸出顯示表格

前端顯示服務器發送數據（在不刷新頁面情況下）

以上給出使用JavaScript原生態Ajax進行服務器與客戶端瀏覽器進行數據交互的簡單例題，重點為XMLHttpRequest對象的使用，業務邏輯處理使用了PHP。整體實現效果GIF動圖描述如下：

Ajax實現效果

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可以聯系作者，共同探討。期待大家關注！如需案例完整代碼請關注并私信，往期前端設計文章鏈接如下：

前端設計-響應式頁面開發基礎
Web開發前端、后端與全棧的區別是什么？

jax提交含有html數據時的處理方法，當請求參數中含有html便簽內容，系統無法進行提交，可以在前臺加密，后臺解密即可。具體操作如下：

前臺（js）

function ajax_encode(str)
{
    str = str.replace(/%/g,"{@bai@}");
    str = str.replace(/ /g,"{@kong@}");
    str = str.replace(/</g,"{@zuojian@}");
    str = str.replace(/>/g,"{@youjian@}");
    str = str.replace(/&/g,"{@and@}");
    str = str.replace(/\"/g,"{@shuang@}");
    str = str.replace(/\'/g,"{@dan@}");
    str = str.replace(/\t/g,"{@tab@}");
    str = str.replace(/\+/g,"{@jia@}");
    return str;
}12345678910111213復制代碼類型：[html]

后臺（java）

public static String ajax_decode(String str, Boolean bsql)
  {
      str = str.replace("{@bai@}", "%");
      str = str.replace("{@dan@}", "'");
      str = str.replace("{@shuang@}", "\"");
      str = str.replace("{@kong@}", " ");
      str = str.replace("{@zuojian@}", "<");
      str = str.replace("{@youjian@}", ">");
      str = str.replace("{@and@}", "&");
      str = str.replace("{@tab@}", "\t");
      str = str.replace("{@jia@}", "+");
      if(bsql) str = str.replace("'", "''");
      return str;
  }1234567891011121314復制代碼類型：[html]

這樣請求可以正常發送！

「鏈接」

JAX上傳的用戶體驗更好，HTML上傳用戶使用更方便一點，直接在網頁里面就能夠操作了。示例在下面提供了，是完整的源代碼，有教程，有視頻教程，基本上使用非常簡單，開發也非常簡單，有技術支持，

網上搜了一下，基本上講這塊的文章還是很多，但是就是一個字亂，講的很混亂。也沒有提供完整的前后端示例。

用戶上傳的文件比較大，有20G左右，直接用HTML傳的話容易失敗，服務器也容易出錯，需要分片，分塊，分割上傳。也就是將一個大的文件分成若干個小文件塊來上傳，另外就是需要實現秒傳功能和防重復功能，秒傳就是用戶如果上傳過這個文件，那么直接在數據庫中查找記錄就行了，不用再上傳一次，節省時間，實現的思路是對文件做MD5計算，將MD5值保存到數據庫，算法可以用MD5，或者CRC，或者SHA1，這個隨便哪個算法都行。

分片還需要支持斷點續傳，現在HTML5雖然提供了信息記錄功能，但是只支持到了會話級，也就是用戶不能關閉瀏覽器，也不能清空緩存。但是有的政府單位上傳大文件，傳了一半下班了，明天繼續傳，電腦一關結果進度信息就丟失了，這個是他們的一個痛點。

切片的話還有一點就是在服務器上合并，一個文件的所有分片數據上傳完后需要在服務器端進行合并操作。

1.下載示例

https://gitee.com/xproer/up6-vue-cli

將up6組件復制到項目中

示例中已經包含此目錄

1.引入up6組件

2.配置接口地址

接口地址分別對應：文件初始化，文件數據上傳，文件進度，文件上傳完畢，文件刪除，文件夾初始化，文件夾刪除，文件列表

參考：http://www.ncmem.com/doc/view.aspx?id=e1f49f3e1d4742e19135e00bd41fa3de

3.處理事件

啟動測試

啟動成功

效果

數據庫

在線咨詢

上一篇：七光源標準光源對色燈箱配置
下一篇：html中如何寫“返回頂部按鈕”？

您的項目需求

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