當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

Ajax异步（7）前端

發布時間：2024/3/7 HTML 51 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax异步（7）前端小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1 Ajax概述

??AJAX 即“Asynchronous Javascript And XML”（異步 JavaScript和 XML），是指一種創建交互式、快速動態網頁應用的網頁開發技術，無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。通過在后臺與服務器進行少量數據交換，AJAX 可以使網頁實現異步更新。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。

AJAX關鍵技術
（1）使用CSS構建用戶界面樣式,負責頁面排版和美工
（2）使用DOM進行動態顯示和交互,對頁面進行局部修改
（3）使用XMLHttpRequest異步獲取數據
（4）使用JavaScript將所有的元素綁定在一起
特點：異步訪問，局部刷新

2 同步和異步交互（前置知識）

2.1 什么是同步交互

??舉個同步的例子，用戶在使用瀏覽器訪問某個頁面的時候，首先用戶會向HTTP服務器提交一個處理請求。接著服務器端接收到請求后，按照預先編寫好的程序中的業務邏輯進行處理（比如和數據庫服務器進行數據信息交換）。最后，服務器對請求進行響應，將結果返回給客戶端，返回一個HTML等文件在瀏覽器中解析顯示。
??為什么說是同步呢？因為在服務器返回結果之前，用戶不能進行其他操作，必須要等到服務器返回了結果才能進行其他操作。這就是同步。

優點：
??可以保留瀏覽器后退按鈕的正常功能。在動態更新頁面的情況下，用戶可以回到前一個頁面狀態，瀏覽器能記下歷史記錄中的靜態頁面,用戶通常都希望單擊后退按鈕時，就能夠取消他們的前一次操作，同步交互可以實現這個需求.
缺點：
（1）同步交互的不足之處，會給用戶一種不連貫的體驗，當服務器處理請求時，用戶只能等待狀態，頁面中的顯示內容只能是空白。
（2）因為已經跳轉到新的頁面,原本在頁面上的信息無法保存,好多信息需要重新填寫。

2.2 什么是異步交互

??指發送一個請求,不需要等待返回,隨時可以再發送下一個請求，即不需要等待。在部分情況下，我們的項目開發中都會優先選擇不需要等待的異步交互方式。將用戶請求放入消息隊列，并反饋給用戶，系統遷移程序已經啟動，你可以關閉瀏覽器了。然后程序再慢慢地去寫入數據庫去。這就是異步。異步不用等所有操作等做完，就響應用戶請求。即先響應用戶請求，然后慢慢去寫數據庫，用戶體驗較好。

優點：
（1）前端用戶操作和后臺服務器運算可以同時進行,可以充分利用用戶操作的間隔時間完成運算
（2）頁面沒有跳轉,響應回來的數據直接就在原頁面上,頁面原有信息得以保留
缺點：
??可能破壞瀏覽器后退按鈕的正常行為。在動態更新頁面的情況下，用戶無法回到前一個頁面狀態，這是因為瀏覽器僅能記錄的始終是當前一個的靜態頁面。用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在AJAX這樣異步的程序，卻無法這樣做。

3 案例1：異步驗證用戶名是否被占用

案例內容：驗證用戶名是否被占用。JS表單驗證只能校驗格式是否正確，但是無法驗證用戶名是否已經存在，這個就需要后臺程序接受到數據后通過查詢才能夠完成的，那么這里就非常適用于使用異步方式校驗，保證用于數據提交后，業務完成的成功率，提升用于體驗感。

3.1 頁面代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>$Title%sSourceCode%lt;</title><script>var xhr ;function checkUname(){// 獲取輸入框中的內容var unameDOM=document.getElementById("unameI");var unameText =unameDOM.value;var unameInfoDom =document.getElementById("unameInfo");if(null == unameText || unameText == ''){unameInfoDom.innerText="用戶名不能為空";return;}unameInfoDom.innerText="";// 發送異步請求// 獲取一個 XMLHttpRequest對象 ,對象可以幫助我們發送異步請求xhr =new XMLHttpRequest();// 使用xhr對象設置打開鏈接,設置請求方式和參數xhr.open("請求方式","請求的URL",是否使用異步方式);xhr.open("GET","unameCheckServlet.do?uname="+unameText,true);// 設置回調函數xhr.onreadystatechange=showReturnInfo;// 正式發送請求xhr.send(null);}function showReturnInfo(){if(xhr.readyState==4 && xhr.status==200){var returnInfo =xhr.responseText;var unameInfoDom =document.getElementById("unameInfo");unameInfoDom.innerText=returnInfo;}}</script> </head> <body> <form action="myServlet1.do" >用戶名:<input id="unameI" type="text" name="uname" onblur="checkUname()"><span id="unameInfo" style="color: red"></span><br/>密碼:<input type="password" name="pwd"><br/><input type="submit"> </form> </body> </html>

3.2 servlet代碼

import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;@WebServlet("/unameCheckServlet.do") public class NameCheckServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uname = req.getParameter("uname");String info = "";if ("jayden".equals(uname)){info = "用戶名已被注冊";}else{info = "用戶名可以用";}//想瀏覽器返回結果resp.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");resp.getWriter().print(info);} }

3.3 總結

AJAX異步提交請求的步驟為
（1）獲取XMLHTTPRequest對象xhr=new XMLHttpRequest();
（2）打開鏈接xhr.open(“GET”,“loginServlet?uname=”+uname,true);
（3）設置回調函數xhr.onreadystatechange=showRnturnInfo;
（4）提交數據 xhr.send(data)
目前存在的問題：
??原生js提交AJAX異步請求代碼比較繁瑣,處理復雜數據比較麻煩,后續可以使用jQuery解決

4 JSON格式

4.1 JSON介紹

??如果服務器給我們響應的數據非常簡答,那么直接使用字符串就好了。但是，AJAX異步返回的數據如果有很多，那么就不好處理了，所以我們使用一個名叫JSON的文件格式來封裝多個數據。
??JSON(JavaScript Object Notation, JS 對象簡譜) 是一種輕量級的數據交換格式。它基于ECMAScript (歐洲計算機協會制定的js規范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示數據。簡潔和清晰的層次結構使得JSON 成為理想的數據交換語言。易于人閱讀和編寫，同時也易于機器解析和生成，并有效地提升網絡傳輸效率。

優點
（1）輕量級,在這里用它不是為了厲害的功能代碼,而是為了實現數據轉換
（2）Json 格式既能考慮到前端對象的特點同時也能兼顧后臺對象信息的特點
（3）Json 格式可以被前端直接識別并解析成對象
（4）jQuery形式實現AJAX默認前后端傳遞數據的格式就是JSON

例子：

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>Title</title><script>/** JSON格式創建對象* {"屬性名":"屬性值","屬性名":屬性值 ... ... }* */var person ={"name":"zhangsan","age":10}alert(person.name)alert(person.age)var persons =[{"name":"zhangsan","age":10},{"name":"lisi","age":10},{"name":"wangwu","age":10}];for (var i = 0; i <persons.length ; i++) {var person =persons[i];console.log(person.name)console.log(person.age)}var personStr='{"name":"zhangsan","age":10}';// 是一個字符串// 可以直接把上面這種格式的字符串直接轉換成對象var p =JSON.parse(personStr);console.log(p.name)console.log(p.age)</script> </head> <body> </body> </html>

4.2 JSON 與 JS 對象的關系

??很多人搞不清楚 JSON 和 JS 對象的關系，甚至連誰是誰都不清楚。其實，可以這么理解：JSON 是 JS 對象的字符串表示法，它使用文本表示一個 JS 對象的信息，本質是一個字符串。

var obj = {a: 'Hello', b: 'World'}; //這是一個對象，注意鍵名也是可以使用引號包裹的 var json = '{"a": "Hello", "b": "World"}'; //這是一個 JSON 字符串，本質是一個字符串

4.3 JSON 和 JS 對象轉化方法

??要實現從JSON字符串轉換為JS對象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //結果是 {a: 'Hello', b: 'World'}

??要實現從JS對象轉換為JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //結果是 '{"a": "Hello", "b": "World"}'

4.4 GSON工具類的使用

??JSON格式字符串,拼接比較麻煩,可以修改toString方法但是就破壞了toString原有的格式,而且一旦字段如果太多修改工作量大,所以后續可以使用JSON工具類來轉換。
??gson工具類中已經給我們封裝好了json格式和java對象之間轉換的API,我們直接使用即可,再也不用手動去轉換項目中。

需要添加gson-2.2.4.jar（在web項目的web目錄下，用一個自定義lib然后把包復制進去，然后右鍵加入到庫即可）

例子：

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html><head><title>$Title%sSourceCode%lt;/title><script>var xhr ;function testData(){xhr =new XMLHttpRequest();xhr.open("GET","testServlet.do",true);xhr.onreadystatechange=showReturnInfo;xhr.send(null);}function showReturnInfo(){if(xhr.readyState==4 && xhr.status==200){var info =xhr.responseText;var users=JSON.parse(info)for (var i = 0; i <users.length ; i++) {var user =users[i];console.log(user.uname)console.log(user.age)console.log(user.gender)console.log(user.birthday)}}}</script></head><body><input type="button" value="測試" onclick="testData()"></body> </html>

后臺代碼：

import com.google.gson.Gson; import com.google.gson.GsonBuilder; import com.msb.pojo.User; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.Collections; import java.util.Date; /*** @Author: Ma HaiYang* @Description: MircoMessage:Mark_7001*/ @WebServlet("/testServlet.do") public class TestServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {User user1 =new User("jayden",11,"男",new Date());User user2 =new User("11",12,"男",new Date());User user3 =new User("kim",22,"男",new Date());User user4 =new User("曉明4",125,"男",new Date());User user5 =new User("曉明5",10,"男",new Date());ArrayList<User> list =new ArrayList<>();Collections.addAll(list,user1,user2,user3,user4,user5);// 響應普通文本數據resp.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");GsonBuilder gsonBuilder = new GsonBuilder().setDateFormat("yyyy-MM-dd HH:mm:ss");Gson gson = gsonBuilder.create();String str = gson.toJson(list);System.out.println(str);resp.getWriter().print(str);} }

5 AJAX結合JQuery實現

5.1 JQuery.ajax()的簡單使用

??每次書寫AJAX代碼比較繁瑣，步驟都是一樣的，數據回顯使用原生js代碼也比較繁瑣，所以可以使用jQuery對上述問題進行優化，jQuery不僅僅對dom操作進行了封裝，同時也對AJAX提交和回顯已經進行了封裝，可大大簡化AJAX的操作步驟。

案例1：
（1）首先創建一個javaWeb項目，然后將需要的JQuery包導入進去。（注意：一定要放在web目錄包下，這樣編譯時才能把這個包集成到服務器項目中，另外服務器端的包要放在web目錄的WEB-INF目錄下。）
（2）編寫html代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script><script>function checkName(){// 獲取輸入框中的內容if(null == $("#name").val() || '' == $("#name").val()){$("#nameInfo").text("用戶名不能為空");return;}$("#nameInfo").text("");// 通過jQuery.ajax() 發送異步請求$.ajax({type:"GET",// 請求的方式 GET POSTurl:"nameCheckServlet.do?", // 請求的后臺服務的路徑data:"name="+$("#name").val(),// 提交的參數success:function(info){ // 響應成功執行的函數$("#nameInfo").text(info)}})}</script> </head> <body> <form action="myServlet.do" >用戶名:<input id="name" type="text" name="name" onblur="checkName()"><span id="nameInfo" style="color: red"></span><br/>密碼:<input type="password" name="pwd"><br/><input type="submit" value="提交按鈕"> </form> </body> </html>

（3）后端Servlet代碼

import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;/*** @Auther: jayden* @Date: 2022-05-05 - 05 - 05 - 9:11* @Description: demo* @version: 1.0*/ @WebServlet("/nameCheckServlet.do") public class nameCheckServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uname = req.getParameter("name");String info="";if("jayden".equals(uname)){info="用戶名已經占用";}else{info="用戶名可用";}// 向瀏覽器響應數據resp.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");resp.getWriter().print(info);} }

案例2
（1）導包。（注意：一定要放在web目錄包下，這樣編譯時才能把這個包集成到服務器項目中，另外服務器端的包要放在web目錄的WEB-INF目錄下。）
（2）編寫html前端代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script><script>function testAjax(){// 向后臺發送一個ajax異步請求// 接收響應的數據$.ajax({type:"GET",url:"jsonServlet.do",data:{"username":"zhangsan","password":"123456"},// key=value&key=value {"屬性名":"屬性值"}dataType:"json",//以什么格式接收后端響應給我們的信息success:function(list){$.each(list,function(i,e){console.log(e)})}})}</script> </head> <body><input type="button" value="測試" onclick="testAjax()"> </body> </html>

（3）編寫Servlet后端代碼

import com.google.gson.Gson; import com.google.gson.GsonBuilder;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.Collections; import java.util.Date;/*** @Auther: jayden* @Date: 2022-05-05 - 05 - 05 - 9:19* @Description: demo* @version: 1.0*/ @WebServlet("/jsonServlet.do") public class JsonServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String password = req.getParameter("password");System.out.println(username);System.out.println(password);Student stu1=new Student("小黑","男",10,new Date());Student stu2=new Student("小白","男",10,new Date());Student stu3=new Student("小黃","男",10,new Date());Student stu4=new Student("小花","男",10,new Date());ArrayList<Student> list =new ArrayList<>();Collections.addAll(list,stu1,stu2,stu3,stu4);GsonBuilder gb =new GsonBuilder();gb.setDateFormat("yyyy-MM-dd");Gson gson = gb.create();String json = gson.toJson(list);resp.setContentType("text/html;charset=UTF-8");resp.setCharacterEncoding("UTF-8");resp.getWriter().print(json);} }

5.2 JQuery.ajax()屬性介紹

??$.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格式。使用JSONP形式調用函數時，例如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.global：
??要求為Boolean類型的參數，默認為true。表示是否觸發全局ajax事件。設置為false將不會觸發全局ajax事件，ajaxStart或ajaxStop可用于控制各種ajax事件。

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

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

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

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

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

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

一個ajax方法中,可用的屬性和方法大致如下

注意:
??ajax異步提交的可選屬性和方法較多，實際研發我們沒必要寫這么多，一般可以使用默認值的屬性就可以省略不寫，一些業務邏輯或者功能上不需要的方法也可以省略不寫，由于屬性太多，針對于一些特殊情況，jQuery也給我們提供了一些專用的方法，這樣可以簡化$.ajax的寫法,每一種簡化寫法都相當于已經指定了$.ajax一些屬性的值.

5.3 JQuery實現ajax的其他寫法

1.$.load()
??jQuery load() 方法是簡單但強大的 AJAX 方法，load() 方法從服務器加載數據，并把返回的數據放入被選元素中。默認使用 GET 方式 - 傳遞附加參數時自動轉換為 POST 方式,
語法為:$(selector).load(URL,data,callback);
參數的含義為:
url: URL地址
data:待發送參數。
callback:載入成功時回調函數。
案例：（準備兩個HTML頁面和一個Servlet）

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script><script>function testLoad(){//$("#d1").load("servlet2.do","username=aaa&password=bbb",function(){alert("響應結束")})$("#d1").load("loadPage.html #a")}</script> </head> <body> <div id="d1" style="width: 100px;height: 100px;border: 1px solid black"> </div> <input type="button" value="測試" onclick="testLoad()"> </body> </html> <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div id="a"><li>JAVA</li><li>HTML</li><li>CSS</li><li>Mysql</li><li>python</li> </div> </body> </html>

$.get()
??這是一個簡單的 GET 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用$.ajax。
語法為:$.get(url,[data],[callback],[type])
參數的含義為:
url: URL地址
data:待發送參數。
callback:載入成功時回調函數。
type:返回內容格式，xml, html, script, json, text, _default

該函數是簡寫的 Ajax 函數，等價于：

$.ajax({type: 'GET',url: url,data: data,success: success,dataType: dataType });

$.getJSON()
??JSON是一種較為理想的數據傳輸格式，它能夠很好的融合與JavaScript或其他宿主語言，并且可以被JS直接使用。使用JSON相比傳統的通過 GET、POST直接發送“裸體”數據，在結構上更為合理，也更為安全。至于jQuery的getJSON()函數，只是設置了JSON參數的ajax()函數的一個簡化版本。
語法為:

$.getJSON(url, //請求URL[data], //傳參，可選參數[callback] //回調函數，可選參數);

該函數是簡寫的 Ajax 函數，等價于：

$.ajax({url: url,data: data,success: callback,dataType: json });

僅僅是等效于上述函數,但是除此之外這個函數也是可以跨域使用的，相比get()、post()有一定優勢。另外這個函數可以通過把請求url寫成"myurl?callback=X"這種格式，讓程序執行回調函數X。

4.$.post()
注意:$.getJSON是以GET方式提交數據，如果需要提交很大的數據量，可選$.post。
這是一個簡單的 POST 請求功能以取代復雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用$.ajax。
語法為:$.post(url,[data],[callback],[type])
參數的含義為:
url: URL地址
data:待發送參數。
callback:載入成功時回調函數。
type:返回內容格式，xml, html, script, json, text, _default

該函數是簡寫的 Ajax 函數，等價于：

$.ajax({type: 'POST',url: url,data: data,success: success,dataType: dataType });

案例：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="js/jquery.min.js"></script><script>function testAjax(){$.get("servlet1.do",{"username":"zhangsan","password":"123456"},function(list){$.each(list,function(i,e){console.log(e)})},"json")console.log("------------------------------")$.getJSON("servlet1.do",{"username":"zhangsan","password":"123456"},function(list){$.each(list,function(i,e){console.log(e)})})console.log("------------------------------")$.post("servlet1.do",{"username":"zhangsan","password":"123456"},function(list){$.each(list,function(i,e){console.log(e)})},"json")}</script> </head> <body> <input type="button" value="測試" onclick="testAjax()"> </body> </html> import com.google.gson.Gson; import com.google.gson.GsonBuilder;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.ArrayList; import java.util.Collections; import java.util.Date;/*** @Auther: jayden* @Date: 2022-05-05 - 05 - 05 - 10:42* @Description: demo* @version: 1.0*/ @WebServlet("/servlet1.do") public class Servlet3 extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String username = req.getParameter("username");String password = req.getParameter("password");System.out.println(username);System.out.println(password);Student stu1=new Student("小黑","男",10,new Date());Student stu2=new Student("小白","男",10,new Date());Student stu3=new Student("小黃","男",10,new Date());Student stu4=new Student("小花","男",10,new Date());ArrayList<Student> list =new ArrayList<>();Collections.addAll(list,stu1,stu2,stu3,stu4);GsonBuilder gb =new GsonBuilder();gb.setDateFormat("yyyy-MM-dd");Gson gson = gb.create();String json = gson.toJson(list);resp.setContentType("text/html;charset=UTF-8");resp.setCharacterEncoding("UTF-8");resp.getWriter().print(json);} }

5.4 jsonp跨域處理

什么是跨域？
??跨域問題是出于瀏覽器的同源策略限制。同源策略（Sameoriginpolicy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現。同源策略會阻止一個域的javascript腳本和另外一個域的內容進行交互。所謂同源（即指在同一個域）就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port）。
以下是不同源的一些例子：
本地路徑地址：http://127.0.0.1:8080/msb/index.jsp
https://127.0.0.1:8080/msb/index.jsp 協議不一樣
http://192.168.24.11:8080/msb/index.jsp IP不一致
http://127.0.0.1:8888/msb/index.jsp 端口不一致
http://localhost:8080/msb/index.jsp IP不一致
實現跨域的原理是什么？
??我們發現Web頁面上調用js文件時則不受是否跨域的影響，擁有”src”這個屬性的標簽都卻擁有跨域的能力，比如<\script>、<\img>、<\iframe>。那么跨域訪問數據就有了一種可能，那就是在遠程服務器上設法把數據裝進js格式的文件里，供客戶端調用和進一步處理。就好比使用一個<script>，讓其src屬性指向我們要訪問的跨域資源,然后以接收js文件的形式接收數據。
通過:dataType:'jsonp'屬性實現跨域請求。
通過 jsonp:'callback'屬性簡化回調函數處理。
??通過 jsonp:’callback’，實現自動處理回調函數名，相當于在url地址欄最后后拼接一個callback=函數名，后臺自動根據這個函數名處理JS腳本,jQuery也會根據這函數名自動在前端處理回調函數，這樣我們直接在success方法中接收返回的數據即可，可以不用自己去自己定義回調函數.后臺獲取參數時，參數名要要和jsonp:后面的函數名保持一致。
案例：
（1）HTML代碼

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><script src="http://localhost:8080/Ajax_test_war_exploded/js/jquery.min.js"></script><script>function checkUname(){// 獲取輸入框中的內容if(null == $("#unameI").val() || '' == $("#unameI").val()){$("#unameInfo").text("用戶名不能為空");return;}$("#unameInfo").text("");// 通過jQuery.ajax() 發送異步請求$.ajax({type:"GET",// 請求的方式 GET POSTurl:"http://localhost:8080/Ajax_test_war_exploded/unameCheckServlet.do?", // 請求的后臺服務的路徑data:{uname:$("#unameI").val()},// 提交的參數dataType:"jsonp",jsonp:"aaa",success:function(info){$("#unameInfo").text(info)}})}</script> </head> <body> <form action="myServlet1.do" >用戶名:<input id="unameI" type="text" name="uname" onblur="checkUname()"><span id="unameInfo" style="color: red"></span><br/>密碼:<input type="password" name="pwd"><br/><input type="submit" value="提交按鈕"> </form> </body> </html>

（2）Servlet后端代碼

import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;@WebServlet("/unameCheckServlet.do") public class UnameCheckServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uname = req.getParameter("uname");String callBack = req.getParameter("aaa");System.out.println(uname);String info="";if("jayden".equals(uname)){info="用戶名已經占用";}else{info="用戶名可用";}// 向瀏覽器響應數據resp.setCharacterEncoding("UTF-8");resp.setContentType("text/javaScript;charset=UTF-8");resp.getWriter().print(callBack+"('"+info+"')");} }

通過getJson方實現跨域請求
??getJSON方法是可以實現跨域請求的，在用該方法實現跨域請求時，在傳遞參數上應該注意在url后拼接一個jsoncallback=?，jQuery會自動替換?為正確的回調函數名，我們就可以不用單獨定義回調函數了

<html> <head><title>$Title%sSourceCode%lt;/title><meta charset="UTF-8"/><script src="http://localhost:8080/ajaxDemo3_war_exploded/js/jquery.min.js"></script><script>function checkUname(){// 獲取輸入框中的內容if(null == $("#unameI").val() || '' == $("#unameI").val()){$("#unameInfo").text("用戶名不能為空");return;}$("#unameInfo").text("");$.getJSON("http://localhost:8080/ajaxDemo3_war_exploded/unameCheckServlet.do?jsoncallback=?",{uname:$("#unameI").val()},function(info){$("#unameInfo").text(info)})}</script> </head> <body> <form action="myServlet1.do" >用戶名:<input id="unameI" type="text" name="uname" onblur="checkUname()"><span id="unameInfo" style="color: red"></span><br/>密碼:<input type="password" name="pwd"><br/><input type="submit" value="提交按鈕"> </form> </body> </html> import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException;@WebServlet("/unameCheckServlet.do") public class UnameCheckServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uname = req.getParameter("uname");String callBack = req.getParameter("jsoncallback");System.out.println(uname);String info="";if("jayden".equals(uname)){info="用戶名已經占用";}else{info="用戶名可用";}// 向瀏覽器響應數據resp.setCharacterEncoding("UTF-8");resp.setContentType("text/javaScript;charset=UTF-8");resp.getWriter().print(callBack+"('"+info+"')");} }

通過后臺代碼也可以實現跨域，一般在過濾器中添加如下代碼,那么前端在請求時就不用考慮跨域問題了

/*請求地址白名單 *代表所有 */resp.setHeader("Access-Control-Allow-Origin", "*");/*請求方式白名單 */resp.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");resp.setHeader("Access-Control-Max-Age", "3600");resp.setHeader("Access-Control-Allow-Headers", "x-requested-with");

6 案例2：三級聯動

效果：
創建一個web項目，項目結構如下
各個類的代碼
（1）JSP代碼

<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head><title>$Title%sSourceCode%lt;</title><script src="js/jquery.min.js"></script><script>$(function(){// 獲取所有的省份信息showArea(0,"#provience")})function showArea(val,selectID){$.ajax({type:"GET",url:"areaController.do",data:{parentID:val},dataType:"json",success:function(areas){// 清除上一次選擇省份時,遺留的城市$(selectID).html('<option>-請選擇-</option>');$.each(areas,function(i,e){$(selectID).append('<option value="'+e.areaid+'">'+e.areaname+'</option>')})if(selectID== "#city"){$("#qu").html('<option>-請選擇-</option>');}}})}</script></head> <body> 籍貫: <select id="provience" onchange="showArea(this.value,'#city')"><option>-請選擇-</option> </select> <select id="city" onchange="showArea(this.value,'#qu')"><option>-請選擇-</option> </select> <select id="qu"><option>-請選擇-</option> </select> </body> </html>

（2）Controller代碼

package com.jayden.controller;import com.google.gson.Gson; import com.jayden.pojo.Area; import com.jayden.service.AreaService; import com.jayden.service.impl.AreaServiceImpl;import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.util.List;@WebServlet("/areaController.do") public class AreaController extends HttpServlet {private AreaService areaService = new AreaServiceImpl();@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {Integer parentID=0;try {parentID= Integer.parseInt(req.getParameter("parentID"));} catch (NumberFormatException e) {e.printStackTrace();}List<Area> areas=areaService.findByParentID(parentID);String json = new Gson().toJson(areas);resp.setCharacterEncoding("UTF-8");resp.setContentType("text/html;charset=UTF-8");resp.getWriter().print(json);} }

（3）Service代碼

package com.jayden.service.impl;import com.jayden.dao.AreaDao; import com.jayden.dao.impl.AreaDaoImpl; import com.jayden.pojo.Area; import com.jayden.service.AreaService;import java.util.List;public class AreaServiceImpl implements AreaService {private AreaDao areaDao =new AreaDaoImpl();@Overridepublic List<Area> findByParentID(Integer parentID) {List<Area> areas = areaDao.findByParentID(parentID);return areas;} }

（4）Dao層代碼

package com.jayden.dao.impl;import com.jayden.dao.AreaDao; import com.jayden.dao.BaseDao; import com.jayden.pojo.Area;import java.util.List;public class AreaDaoImpl extends BaseDao implements AreaDao {@Overridepublic List<Area> findByParentID(int parentID) {String sql="select * from area where parentid= ?";return baseQuery(Area.class, sql, parentID);} }

（5）輔助類代碼
BaseDao

package com.jayden.dao;import java.lang.reflect.Field; import java.sql.*; import java.util.ArrayList; import java.util.List;public abstract class BaseDao {public int baseUpdate(String sql,Object ... args){// 向 Emp表中增加一條數據Connection connection = null;PreparedStatement preparedStatement=null;int rows=0;try{connection = MyConnectionPool.getConnection();preparedStatement = connection.prepareStatement(sql);//設置參數for (int i = 0; i <args.length ; i++) {preparedStatement.setObject(i+1, args[i]);}//執行CURDrows =preparedStatement.executeUpdate();// 這里不需要再傳入SQL語句}catch (Exception e){e.printStackTrace();}finally {if(null != preparedStatement){try {preparedStatement.close();} catch (SQLException e) {e.printStackTrace();}}MyConnectionPool.returnConnection(connection);}return rows;}public List baseQuery(Class clazz,String sql,Object ... args) {// 查詢名字中包含字母A的員工信息Connection connection = null;PreparedStatement preparedStatement=null;ResultSet resultSet=null;List list =null;try{connection = MyConnectionPool.getConnection();preparedStatement = connection.prepareStatement(sql);//這里已經傳入SQL語句//設置參數for (int i = 0; i <args.length ; i++) {preparedStatement.setObject(i+1, args[i]);}//執行CURDresultSet = preparedStatement.executeQuery();// 這里不需要再傳入SQL語句list=new ArrayList() ;// 根據字節碼獲取所有的屬性Field[] fields = clazz.getDeclaredFields();for (Field field : fields) {field.setAccessible(true);// 設置屬性可以訪問}while(resultSet.next()){// 通過反射創建對象Object obj = clazz.newInstance();//默認在通過反射調用對象的空參構造方法for (Field field : fields) {// 臨時用Field設置屬性String fieldName = field.getName();// empno ename job .... ...Object data = resultSet.getObject(fieldName);field.set(obj,data);}list.add(obj);}}catch (Exception e){e.printStackTrace();}finally {if(null != resultSet){try {resultSet.close();} catch (SQLException e) {e.printStackTrace();}}if(null != preparedStatement){try {preparedStatement.close();} catch (SQLException e) {e.printStackTrace();}}MyConnectionPool.returnConnection(connection);}return list;}}

MyConnectionPool

package com.jayden.dao;import com.jayden.util.PropertiesUtil; import org.apache.log4j.Logger;import java.sql.Connection; import java.sql.DriverManager; import java.sql.SQLException; import java.util.LinkedList;public class MyConnectionPool {private static String driver;private static String url;private static String user;private static String password;private static int initSize;private static int maxSize;private static Logger logger;private static LinkedList<Connection> pool;static{logger=Logger.getLogger(MyConnectionPool.class);// 初始化參數PropertiesUtil propertiesUtil=new PropertiesUtil("/jdbc.properties");driver=propertiesUtil.getProperties("driver");url=propertiesUtil.getProperties("url");user=propertiesUtil.getProperties("user");password=propertiesUtil.getProperties("password");initSize=Integer.parseInt(propertiesUtil.getProperties("initSize"));maxSize=Integer.parseInt(propertiesUtil.getProperties("maxSize"));// 加載驅動try {Class.forName(driver);} catch (ClassNotFoundException e) {logger.fatal("找不到數據庫驅動類"+driver,e);}// 初始化poolpool=new LinkedList<Connection>();// 創建5個鏈接對象for (int i = 0; i <initSize ; i++) {Connection connection = initConnection();if(null != connection){pool.add(connection);logger.info("初始化連接"+connection.hashCode()+"放入連接池");}}}// 私有的初始化一個鏈接對象的方法private static Connection initConnection(){try {return DriverManager.getConnection(url,user,password);} catch (SQLException e) {logger.fatal("初始化連接異常",e);}return null;}// 共有的向外界提供鏈接對象的public static Connection getConnection(){Connection connection =null;if(pool.size()>0){connection= pool.removeFirst();// 移除集合中的第一個元素logger.info("連接池中還有連接:"+connection.hashCode());}else{connection = initConnection();logger.info("連接池空,創建新連接:"+connection.hashCode());}return connection;}// 共有的向連接池歸還連接對象的方法public static void returnConnection(Connection connection){if(null != connection){try {if(!connection.isClosed()){if(pool.size()<maxSize){try {connection.setAutoCommit(true);// 調整事務狀態logger.debug("設置連接:"+connection.hashCode()+"自動提交為true");} catch (SQLException e) {e.printStackTrace();}pool.addLast(connection);logger.info("連接池未滿,歸還連接:"+connection.hashCode());}else{try {connection.close();logger.info("連接池滿了,關閉連接:"+connection.hashCode());} catch (SQLException e) {e.printStackTrace();}}}else{logger.info("連接:"+connection.hashCode()+"已經關閉,無需歸還");}} catch (SQLException e) {e.printStackTrace();}}else{logger.warn("傳入的連接為null,不可歸還");}}}

PropertiesUtil

package com.jayden.util;import java.io.IOException; import java.io.InputStream; import java.util.Properties;public class PropertiesUtil {private Properties properties;public PropertiesUtil(String path){properties=new Properties();InputStream inputStream = this.getClass().getResourceAsStream(path);try {properties.load(inputStream);} catch (IOException e) {e.printStackTrace();}}public String getProperties(String key){return properties.getProperty(key);}}

（6）pojo類

package com.jayden.pojo; import java.io.Serializable;public class Area implements Serializable {private Integer areaid;private String areaname;private Integer parentid;private Integer arealevel;private Integer status;public Integer getAreaid() {return areaid;}public void setAreaid(Integer areaid) {this.areaid = areaid;}public String getAreaname() {return areaname;}public void setAreaname(String areaname) {this.areaname = areaname;}public Integer getParentid() {return parentid;}public void setParentid(Integer parentid) {this.parentid = parentid;}public Integer getArealevel() {return arealevel;}public void setArealevel(Integer arealevel) {this.arealevel = arealevel;}public Integer getStatus() {return status;}public void setStatus(Integer status) {this.status = status;}public Area() {}public Area(Integer areaid, String areaname, Integer parentid, Integer arealevel, Integer status) {this.areaid = areaid;this.areaname = areaname;this.parentid = parentid;this.arealevel = arealevel;this.status = status;} }

（7）配置類XML
jdbc.properties

## key=value driver=com.mysql.cj.jdbc.Driver url=jdbc:mysql://127.0.0.1:3306/mydb?useSSL=false&useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true user=root password=root initSize=1 maxSize=1

log4j.properties

log4j.rootLogger=debug,stdoutlog4j.appender.stdout=org.apache.log4j.ConsoleAppender log4j.appender.stdout.Target=System.err log4j.appender.stdout.layout=org.apache.log4j.SimpleLayoutlog4j.appender.logfile=org.apache.log4j.FileAppender log4j.appender.logfile.File=d:/msb.log log4j.appender.logfile.layout=org.apache.log4j.PatternLayout log4j.appender.logfile.layout.ConversionPattern=%d{yyyy-MM-dd HH:mm:ss} %l %F %p %m%n

總結

以上是生活随笔為你收集整理的Ajax异步（7）前端的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

Ajax