Java之AJAX概念和實現方式

開發工具與關鍵技術：MyEclipse 10,java

作者：劉東標

撰寫時間：2019-06-12

1．概念：

Asynchronous JavaScript And XML 異步的JavaScript和XML

1.異步和同步：客戶端和服務端相互通信的基礎上

同步: *客戶端必須等待服務端的響應。在等待的期間客戶端不能做其他操作。

異步: *客戶端不需要等待服務端的響應。在服務器處理請求的過程中，客戶端可以做其他操作。

Ajax是一種在無需重新加載整個網頁的情況下，能夠更新部分網頁的技術。

通過在后臺與服務器進行少量數據交換，Ajax可以使網頁實現異步更新。這意味著可以不重新加載整個網頁的情況下，

對網頁的某部分進行更新。傳統的網頁(不使用Ajax)如果需要更新內容，必須需重新整個網頁頁面。

提升用戶的體驗

2、實現方式：

1.原生的js實現方式

//定義方法

function fun() {

//發送異步請求

//1.創建核心對象

var xmlhttp;

//為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。

//如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject

if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp = new XMLHttpRequest();

} else {// code for IE6, IE5

xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

//2.建立連接

/*

參數： 1.請求方法：GET、POST

* get方式，請求參數在URL后邊拼接。send方式為空參

* post方式，請求參數在send方法中定義

2.請求的URL:

3.同步或異步請求:true(異步)或false(同步)

*/

xmlhttp.open("GET","/BorrowAndInvest/servlet/LoginServlet?username=tom", true);

//3.發送請求

xmlhttp.send();

//4.接受并處理來自服務器的響應結果

//獲取方式：xmlhttp.responseText;

//什么時候獲取？當服務器響應成功后再獲取

//當xmlhttp對象就緒狀態改變時,觸發事件onreadystatechange.

xmlhttp.onreadystatechange = function() {

//判斷readyState就緒狀態是否為4，判斷status響應狀態碼是否為200

if (xmlhttp.readyState == 4 && xmlhttp.status==200) {

//獲取服務器的響應結果

var responseText= xmlhttp.responseText;

alert(responseText);

}

}

}

2.Jquery實現方式

1.$.ajax()

*語法:$.ajax({鍵值對})；

//定義方法

function fun() {

//使用$.ajax()發送異步請求

$.ajax({

url:"/BorrowAndInvest/servlet/LoginServlet",//請求路徑

type:"POST",//請求方式

//data:"username=hello&age=25",//請求參數

data:{"username":"hello","age":25},

success:function(data){

alert(data);

},//響應成功后的回調函數

error:function(){

alert("出錯啦");

},//表示如果請求響應出現錯誤，會執行的回調函數

dataType:"text"//設置接收到的響應數據的格式

});

}

2.$.get()：發送get請求

*語法:$.get(url,[data],[callback],[type])

*參數：1.url:請求路徑2.data:請求參數3.callback回調函數4.type:響應結果的類型

function fun() {

$.get("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){

alert(data);

},"text");

}

3.$.post()發送post請求*

function fun() {

$.post("/BorrowAndInvest/servlet/LoginServlet",{username:"大雄"},function(data){

alert(data);

},"text");

}

總結

以上是生活随笔為你收集整理的java中ajax概念_Java之AJAX概念和实现方式的全部內容，希望文章能夠幫你解決所遇到的問題。

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