Ajax技術(shù)在就業(yè)網(wǎng)站用戶信息管理中的應(yīng)用

朱克武

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

關(guān)鍵詞：Ajax;JSON;調(diào)試工具;網(wǎng)絡(luò)

中圖分類號：TP311? ? ? 文獻(xiàn)標(biāo)識碼：A

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

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID）：

1 引言

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

2 用戶登錄

2.1用戶登錄界面的設(shè)計

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

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

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

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

前后端不分離的網(wǎng)站，前端的HTML文件、后端的ashx、php、jsp等文件都在同一個項(xiàng)目里面，所有的網(wǎng)站相關(guān)的文件、資源都在同一個項(xiàng)目里面，都由后端服務(wù)器負(fù)責(zé)。通過服務(wù)器的內(nèi)置對象、超鏈接等實(shí)現(xiàn)各個頁面之間的跳轉(zhuǎn)、數(shù)據(jù)的處理等各類操作。

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

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

2.2用戶登錄服務(wù)器端設(shè)計

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

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

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

3 用戶注冊

3.1用戶登錄界面

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

3.2用戶注冊服務(wù)器端設(shè)計

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

4用戶信息處理

用戶信息的處理只能由管理員處理，其他用戶沒有權(quán)限管理。網(wǎng)站必須對密碼進(jìn)行加密和解密處理，對涉及用戶信息修改的頁面進(jìn)行驗(yàn)證，有管理員權(quán)限的才能夠?qū)撁孢M(jìn)行處理。用戶信息處理包含用戶信息的添加、查找、分頁瀏覽、更新、刪除操作。用戶信息的添加就是注冊操作，添加界面就不需要進(jìn)行權(quán)限設(shè)置，任何人都可以注冊。

4.1用戶查找的界面設(shè)計

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

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

" + obj.Name + '

'） 。如圖2所示，左邊顯示的是根據(jù)用戶名查詢到的結(jié)果，右邊是F12開發(fā)者工具獲取的接收數(shù)據(jù)。

4.2用戶查找服務(wù)器設(shè)計

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

4.3用戶信息顯示界面設(shè)計

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

4.4用戶顯示服務(wù)器設(shè)計

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

4.5用戶更新界面設(shè)計

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

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

4.6用戶更新服務(wù)器設(shè)計

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

4.7用戶刪除界面設(shè)計

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

4.8用戶刪除服務(wù)器設(shè)計

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

5結(jié)束語

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

參考文獻(xiàn)：

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

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

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

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

[5] 馬漢達(dá)，方偉，洪華劍.實(shí)驗(yàn)教學(xué)過程管理平臺設(shè)計與實(shí)現(xiàn)[J].軟件導(dǎo)刊，2021，20（5）：114-117.

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

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