Ajax技術在就業(yè)網站用戶信息管理中的應用

朱克武

摘要：前后端分離技術是目前網站開發(fā)的一個趨勢，Ajax作為前后端通訊的一個接口，使用GET和POST方法，在前后端之間傳遞JSON格式的數據，是網站開發(fā)一個重要的開發(fā)工具。在網站的開發(fā)過程中，結合Chrome的F12的開發(fā)者工具，能夠掌握數據在網絡中傳遞的情況，通過對網絡數據的分析，解決開發(fā)過程中，遇到的各類問題，加快網站開發(fā)的效率。

關鍵詞：Ajax;JSON;調試工具;網絡

中圖分類號：TP311? ? ? 文獻標識碼：A

文章編號：1009-3044（2021）33-0009-03

開放科學（資源服務）標識碼（OSID）：

1 引言

經過三十多年的發(fā)展，網站技術已經非常成熟。上網已經成為人們日常生活的一部分，例如淘寶、京東等購物網站，在雙十一購物節(jié)，上億人次的訪問量，也不會影響購物體驗。常用的網站編程工具有php、jsp、asp.net這三種。網站前端開發(fā)工具、后端開發(fā)工具、網站測試工具等，與網站開發(fā)相關的各類軟件非常多。網站開發(fā)技術不斷發(fā)展，新技術不斷涌現，現在網站開發(fā)多使用前后端分離技術，前端工程師專注網頁的UI界面設計，后端工程師處理前端提交的數據，將數據處理結果返回給前端。這里一個主要的問題就是前后端數據交互涉及的協(xié)議問題。本網站前端頁面設計使用 VS Code 工具，后端使用 VS2019，數據庫使用MySQL。

2 用戶登錄

2.1用戶登錄界面的設計

上網瀏覽的各類網站，基本上都是動態(tài)網站。動態(tài)網站就是與數據庫打交道，上網在網站上瀏覽網站信息，這些信息是網站管理人員將信息提交到后臺數據庫，數據是存放在數據庫里面的。在網站上瀏覽的時候，網站將數據庫的信息提取出來，顯示在前端頁面上。

網站開發(fā)第一步，設計數據表。數據表需要根據網站的需求來設計。就業(yè)網站的用戶表涉及三類人員，一類是學生，一類是企業(yè)，一類是學校的管理人員。涉及一個權限的問題，例如，學生能夠瀏覽各類企業(yè)信息，但是，不能修改企業(yè)信息。在涉及添加、修改等頁面，需要對用戶權限進行判斷，有權限的才能夠提交，否則拒絕。用戶表主要由用戶名、密碼、用戶類型等組成。登錄界面如圖1所示。

登錄頁面涉及的技術包括：正則表達式、Ajax、驗證碼的顯示。正則表達式要判斷用戶名、密碼是否符合要求，如長度必須多少位，字符類型等。登錄是html網頁，沒有使用form表單格式提交數據，使用Ajax提交數據。頁面加載的時候，使用Ajax向后端服務器發(fā)出請求，獲取驗證碼。獲取到的驗證碼是數字，同樣，驗證碼可以是大小寫字母、字母加數字，也可以是圖像。在驗證碼文本框中，輸入完驗證碼后，需要判斷驗證碼是否與顯示的驗證碼一致。三個文本框的內容都需要進行驗證，輸入的數據符合要求，登錄按鈕才能夠提交數據。否則，在對應的文本框后面，顯示錯誤提示信息。

網頁前端技術的發(fā)展非常迅速，HTML5提供了 Canvas，使用Canvas能夠繪制各類圖形，也可以繪制圖片。驗證碼的繪制包括三個部分：繪制驗證碼字符串，繪制雜亂點，繪制線條。繪制一些雜亂點和線條，目的是增加識別的難度，雜亂點、線條的多少根據需要，太多，影響驗證碼的識別，太少，起不到識別的效果。

前后端不分離的網站，前端的HTML文件、后端的ashx、php、jsp等文件都在同一個項目里面，所有的網站相關的文件、資源都在同一個項目里面，都由后端服務器負責。通過服務器的內置對象、超鏈接等實現各個頁面之間的跳轉、數據的處理等各類操作。

由于前端框架的發(fā)展，出現了前后端分離的思想，隨著Ajax的出現，前后端分離才開始有了實現的基礎[1]。前后端分離的網站，前端的HTML文件、樣式文件、腳本文件、圖片等存放在一個單獨的項目里面。后端服務器項目，是獨立的項目，后端的各類服務器文件，如數據表對應的實體類、數據庫處理類、JSON類、數據表現層、數據操作層等各類文件，存放在項目里面。

Ajax的異步Get/Post請求，瀏覽器通過Ajax向服務器的URL地址提交數據，在Ajax的回調函數里面，接收服務器傳遞回來的數據[2]。由于前后端分離，遇到的第一個問題就是跨域問題。客戶端的數據能夠提交到服務器，服務器對提交的數據進行處理，處理完成以后，不管是成功還是失敗，都必須給客戶端一個反饋信息。在返回數據的時候，就報錯了，客戶端遇到跨域的問題。客戶端能夠將數據提交給服務器，但是，客戶端接收不到服務器的回傳信息。跨域就是通訊雙方協(xié)議要一致，如都是http協(xié)議，IP地址、端口都要一致，有一個不同，就涉及跨域。Ajax不能跨域，瀏覽器的安全限制，不允許訪問其他服務器上的JSON數據[3]。解決跨域問題有多種方式，方式一在服務器端響應對象的頭部設置為“*”，放行所有的請求。

2.2用戶登錄服務器端設計

ASP.NET基于.NET框架，可以創(chuàng)建功能強大、靈活和可靠的數據驅動應用程序，實現對SQL Server、Oracle等關系數據庫的訪問[4]。ASP.NET使用一般處理程序處理登錄界面提交的數據，后端處理程序一般都和數據庫打交道，按照B/S三層架構式設計思路，將前后端完全分離，前端與后端通過接口進行數據通信[5]。本程序使用三層架構設計。首先，設計數據庫類，用于處理數據表的添加、查找、更新、刪除等操作，這個類是網站服務器開發(fā)的基礎。其次，設計表現層UI、業(yè)務邏輯層BLL和數據訪問層DAL。三層架構中，是層層調用的關系，表現層調用業(yè)務邏輯層，業(yè)務邏輯層調用數據訪問層，數據訪問層DAL與數據庫類打交道。

網站是前后端分離的，前端數據的渲染，由前端負責，不用服務器后端處理。服務器端的三層架構中，表現層一般是HTML或ASP.NET文件，是用來展示信息的，屬于前端的范圍，既然服務器端不需要展示信息，就不用表現層，直接使用業(yè)務邏輯層，將前端的用戶名、密碼、用戶類型通過業(yè)務邏輯層，往下一層傳遞，由數據訪問層進行處理，將返回結果通過業(yè)務邏輯層帶回來。

前后端使用JSON格式的數據，服務器取出前端提交的用戶名、密碼等數據，通過sql查詢語句，在數據表里面，查詢是否有這樣的數據，有，查詢成功，返回1;沒有這條記錄，查詢失敗，返回-1。服務器端將返回數據包裝成JSON數據格式，返回給客戶端。JSON格式由三部分組成：code、data、msg。code =1，表示成功。= -1，表示失敗。data是返回的JSON格式的數據。msg是返回的信息，編程過程中，會遇到各種問題，后端開發(fā)人員需要將各種信息反饋給前端開發(fā)人員，由一個溝通的渠道，通過msg，告訴前端開發(fā)人員，遇到這些問題，該如何處理，如何在前端渲染。

3 用戶注冊

3.1用戶登錄界面

徐秋榕[6]通過對省級網上辦事系統(tǒng)的需求進行劃分，分為總體需求、公共服務需求等9個需求，通過需求分析，為項目開發(fā)提供理論依據和支持。本項目同樣采用需求分析的方法，對用戶注冊進行需求分析，以及后續(xù)的開發(fā)。用戶注冊界面，屬于添加頁面，注冊界面設計與數據表相關，一般數據表有什么字段，前端有對應的輸入框，用于錄入數據。在提交數據到服務器之前，需要對提交的數據進行正則表達式驗證。驗證成功，才能夠提交。使用Ajax的post方法，提交數據，在Ajax中取得返回的數據，如果注冊成功，跳轉到主頁面，如果注冊不成功，提示注冊不成功的錯誤信息，用戶根據提示信息，進行檢查，做后一步的處理。

3.2用戶注冊服務器端設計

每一個數據表都對應一個實體類，后端一般處理程序取得前端提交的數據，將數據打包為用戶實體類的變量，通過業(yè)務邏輯層，傳遞給數據訪問層，最后，接收數據訪問層返回處理的結果，組裝成JSON格式數據，返回給前端。在數據訪問層需要判斷數據表里是否有相同的用戶名，數據符合要求，添加到用戶表。在添加數據的時候，需要注意日期格式的數據。

4用戶信息處理

用戶信息的處理只能由管理員處理，其他用戶沒有權限管理。網站必須對密碼進行加密和解密處理，對涉及用戶信息修改的頁面進行驗證，有管理員權限的才能夠對頁面進行處理。用戶信息處理包含用戶信息的添加、查找、分頁瀏覽、更新、刪除操作。用戶信息的添加就是注冊操作，添加界面就不需要進行權限設置，任何人都可以注冊。

4.1用戶查找的界面設計

根據項目需求，設計用戶信息的查找，可以按照數據表的多個字段進行查詢。用得最多的查找，按照用戶名查找，本用戶信息表的查詢是按照用戶名查找的。使用Ajax的get方法，需要向服務器提交參數，參數的內容是用戶名變量，已經用戶名變量對應的數值。提交的參數格式可以是JSON格式。

有兩種方式，可以顯示從服務器接收的數據表里面的多條數據，一種方法是ul列表，一種是表格。網絡傳輸默認都使用JSON格式，因此，在Ajax的接收回調函數里面，接到的數據是JSON對象，直接就可以使用這個對象，例如：var obj = data.Data，通過該對象，就能夠獲取對象中的數值。操作DOM元素，顯示外部數據，使用jQuery相對簡單方便。先找到ul對象，例如：var? show= $（"#show2"），找到id=show2的ul。其次，使用append方法，在ul對象中，添加li列表項，show.append（"

4.2用戶查找服務器設計

用戶信息的查找一般根據用戶名查找，復雜一點，使用多字段查找。查找的SQL關鍵語句是 “select * from user where name=？name”。也可以使用like進行模糊查詢。調用MySqlCommand對象執(zhí)行ExecuteReader方法，使用MySqlDataReader對象，讀取數據表里面的數據。或使用MySqlDataAdapter數據適配器對象，使用DataSet數據集對象讀取數據表里面的數據。兩種方式都可以讀取數據表里面的數據。數據取出來以后，需要包裝成JSON格式，方便前端開發(fā)人員使用。

4.3用戶信息顯示界面設計

用戶信息是從服務器提取用戶數據表里面的所有數據，在前端顯示。和用戶查找的方式是相同的。唯一不同的地方是查找用戶表只是一條記錄，而用戶查找的結果是所有的記錄，是多條記錄。如圖3所示。多條記錄，使用JSON數組的形式接收。有11條記錄，展開，顯示每條記錄的數據，和數據表里面的數據是一致的。

4.4用戶顯示服務器設計

用戶信息是查詢用戶表的所有數據，查詢的結果，存放在List集合里面，最后將集合的數據打包成JSON數組的格式，傳回給客戶端。返回的數據如圖3所示。分頁功能比較復雜，需要從客戶端取出當前的頁數、每頁記錄數。客戶端使用post表單的方式提交，則服務器端使用context.Request[“currentPage”]的方式，取出提交的數據。如果使用get參數的方式提交，則服務器使用context.Request.QueryString[“currentPage”]。需要注意是get方式還是post方式，在服務器端，一定要取出當前頁數、每頁記錄數，這兩個重要的參數。分頁查詢使用limit 關鍵字，含義是從偏移量位置開始，取出多少條記錄，因此，偏移量=（當前頁數-1）*pageSize，得到偏移位置。執(zhí)行sql 查詢語句，select? *? from? user order by id limit 偏移量，pageSize。執(zhí)行sql語句后，得到查詢的結果，存放到list集合中，使用JSON工具，打包成JSON格式的數據，發(fā)送各客戶端。

4.5用戶更新界面設計

更新比較復雜，首先，使用Ajax從服務器接收數據，在瀏覽器上顯示，在瀏覽界面上，每一條記錄的前面有一個單選框或在記錄的后面有一個按鈕，單選鈕的value保存循環(huán)的序號。其次，通過選中的單選框或按鈕，將該條記錄的詳細信息顯示出來，該界面和添加界面相似。使用循環(huán)方式，判斷那個單選鈕被選中，取出選中單選鈕的數值，取出對應接收數據的JSON數組里面的數值，將數值賦給文本框對象，在頁面上的顯示。第三步，在更新界面修改數據后，使用Ajax的post方法，將數據提交到后臺服務器。最后在Ajax的回調函數里面，處理服務器返回的更新數據，一般更新成功，返回1，失敗，返回-1。具體返回什么數據，由后端開發(fā)人員確定。但是，一定要將返回的數據格式告訴前端開發(fā)人員。前端開發(fā)人員按照后端人員提供的數據，進行處理。前后端人員一定要有一個良好的溝通。

總結一下，更新操作，首先，使用Ajax從服務器接收數據，在瀏覽器上顯示。其次，通過每一條記錄前面的單選框或按鈕，將選中的記錄，顯示在類似添加頁面的更新界面上。第三步，在更新界面上，修改數據，使用Ajax將 提交到后臺服務器。最后一步，Ajax接收服務器傳回來的數據，更加傳回來的數據，顯示更新后的數據。

4.6用戶更新服務器設計

更新后端程序的設計，首先，接收客戶端傳遞過來的id ，根據id查找該記錄，最后，將數據返回給客戶端，本次客戶端、服務器的通訊結束。服務器再次接收客戶端傳遞過來的用戶數據，執(zhí)行更新的sql語句，處理完成。更新成功，返回包含1的JSON數據。更新失敗，返回包含-1的JSON數據。更新用戶表涉及兩次通訊，第一次，查詢id對應的用戶數據，返回給客戶端。第二次，接收客戶端提交的用戶數據，執(zhí)行更新操作，更新結束，返回一個數值給客戶端。

4.7用戶刪除界面設計

刪除界面和更新界面相似，首先，使用Ajax顯示整個數據表，在每一條記錄的前面有一個復選框或后面有一個按鈕。其次，處理所有選中的復選框，將選中記錄的id打包成JSON數組格式，提交給服務器。第三，在Ajax的回調函數里面，處理服務器的返回數據，返回1，表示刪除成功，在頁面上顯示刪除以后的數據。刪除失敗，提示刪除失敗的信息。記錄仍然保持不變。

4.8用戶刪除服務器設計

刪除后端程序的設計，首先，接收客戶端提交過來的id數據，是一個數組，循環(huán)調用數組里面的id，執(zhí)行刪除操作。再次，查找用戶表，將刪除后的數據表數據取出來，返回給客戶端。

5結束語

網站開發(fā)技術發(fā)展非常迅速，前后端分離，框架設計，各做各的事情，前端人員專注界面設計，后端人員考慮網站的效率、安全等，通過這種方式，開發(fā)的網站效率更高，能夠滿足客戶需求，網站更加安全。本項目通過用戶登錄操作，使用Ajax，實現了頁面設計和后端代碼的徹底分離，結構清晰，開發(fā)過程中，前端是界面設計、數據渲染、頁面美觀等;后端是數據的管理、數據安全防護等，方便前后端調試，相互不干擾，前后端同時開發(fā)，加快網站開發(fā)的速度。在后期網站維護過程中，方便排查錯誤，便于維護。

參考文獻：

[1] 蔡澤銘，王文華.基于Vue.js 的信息管理系統(tǒng)前端架構[J].電子技術與軟件工程，2020（18）：142-144.

[2] 傳智播客高教產品研發(fā)部.ASP.NET就業(yè)實例教程[M].北京：人民郵電出版社，2015.

[3] 邵山歡.Jquery和Ajax實戰(zhàn)教程[M].北京：高等教育出版社，2019.

[4] 許平順，孫首群，嚴亮.基于ASP.NET的管道事故管理系統(tǒng)設計與實現[J].軟件導刊，2021，20（4）：150-153.

[5] 馬漢達，方偉，洪華劍.實驗教學過程管理平臺設計與實現[J].軟件導刊，2021，20（5）：114-117.

[6] 徐秋榕.省級網上辦事系統(tǒng)的需求分析[J].福建電腦，2021（37）：38-42.

【通聯(lián)編輯：謝媛媛】