介紹Ajax與jQuery技術


Ajxs技術(異步的JavaScriptXML)已有多種技術的組合

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參數可以是一個JSPurl地址,也可以是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) 在參數中使用標記名

  1. $(“div”):用於獲取文檔中全部的<div>

b) 在參數中使用ID

  1. $(“#username”):用於獲取文檔中ID屬性為username的一個元素

c) 在參數中使用CSS類名

  1. $(“.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>

結果出有一個鏈接,點擊后會彈出一個對話框

以上介紹,詳細以后慢慢羅列。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM