Ajxs技術(異步的JavaScript與XML)已有多種技術的組合
Ajax的優點是什么?
1.可以實現客戶端的異步請求操作2.進而在不需要刷新頁面的情況下與服務器進行通信,減少用戶的等待時間3.減輕服務器和帶寬的負擔,提供更好的服務響應。4.可以調用XML等外部數據,進而促進頁面顯示和數據的分離。5.基於標准化的並被廣泛支持技術,不需要下載插件或者小程序。
其中最核心的技術就是XMLHttpRequest。它是一個具有應用程序的JavaScript對象,能夠使用HTTP連接一個服務器。
Ajax的工作流程
1.發送請求
Ajax可以通過XMLHttpRequest對象實現采用異步方式在后台發送請求。發送請求:(1)發送GET請求(2)發送POST請求
兩種請求都是需要經過四個步驟:
(1)初始化XMLHttpRequest對象:提高程序的兼容性;
http_request=new XMLHttpRequest();
(2)為XMLHttpRequest對象指定一個回調函數,用於返回結果進行處理;
http_request.onreadystatechange= getResult; //調用回調函數
如果需要指定傳遞參數,可以使用:
http_request.onreadystatechange=function(){ getResult( param) }
(3)創建一個與服務器的連接。(GET / POST)(是否采用異步發送 ture)
a) http_request.open(‘GET’,url,true); 采用異步方式發送GET請求
b) http_request.open(‘POST’,url,true); 采用異步方式發送POST請求
其中open()方法中的url參數可以是一個JSP的url地址,也可以是Servlet的映射地址。
指定URL參數時,最好加個時間,為了防止因瀏覽器緩存結果而不能實時得到最新的結果:
String url=“GG.jsp?n=”+new Date().getTime();
(4)向服務器發送請求。利用XHR對象的send()方法可以實現;
a) 向服務器發送GET請求,參數可以設置為NULL
http_request.send( null );
b) POST 參數可以是組合參數
Var param=“user”+***.value+...;
http_request.send( param );
發送POST請求前需要設置正確的請求頭:
http_request.setRequestHeader(“”,“”); 需要放在send前
2.處理服務器的響應
XHR對象提供了兩個用來訪問服務器響應的屬性:1.responseText屬性,返回字符串響應;2.responseXML屬性,返回XML響應。
---------分割線-------------------------------------------------------------------------------------------------------
Last.jQuery
由於Ajax的工作流程比較繁瑣,每次需要編寫大量的JavaScript代碼,jQuery便是可以簡化之實現Ajax;
1.簡介
jQuery是一套簡潔、快速、靈活的JavaScript腳本庫。類似java的類庫,將工具方法和對象方法封裝在自己的類庫里,方便用戶使用
從“$”“()”開始
下載后放入js文件夾中:
<script src=”JS/文件名.js” type=“text/JavaScript”></JavaScript>
2.JQ的工廠函數
a) 在參數中使用標記名
- $(“div”):用於獲取文檔中全部的<div>
b) 在參數中使用ID
- $(“#username”):用於獲取文檔中ID屬性為username的一個元素
c) 在參數中使用CSS類名
- $(“.btn_grey”):用於獲取文檔中使用CSS類名為btn_grey的所有元素
3.實例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="JS/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
alert("我是一個jQuery腳本!");
});
});
</script>
</head>
<body>
<a href="#">彈出對話框</a>
</body>
</html>
結果出有一個鏈接,點擊后會彈出一個對話框
以上介紹,詳細以后慢慢羅列。