jquery中ajax學(xué)習(xí)筆記一
AJAX簡(jiǎn)單介紹：
AJAX 指異步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一種創(chuàng)建交互式網(wǎng)頁(yè)應(yīng)用的網(wǎng)頁(yè)開發(fā)技術(shù)。通過 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。通過這個(gè)對(duì)象，您JavaScript 可在不重載頁(yè)面的情況與 Web 服務(wù)器交換數(shù)據(jù)。
jQuery是一種javascript框架，是對(duì)javascript的一種輕量級(jí)的封裝，容易理解。
Ajax是一種由xml+javascript組合起來(lái)的一種異步請(qǐng)求技術(shù).可實(shí)現(xiàn)動(dòng)態(tài)刷新。
ajax準(zhǔn)備工作：
1.jquery下載：
官網(wǎng)最新的下載地址：http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/
下載時(shí)選中jQuery 1.6.3 Minified或jQuery 1.6.3 Uncompressed右鍵單擊選擇“使用迅雷下載”
2.主要知識(shí)介紹
2.1.ajax異步傳輸?shù)牟襟E：
1.采用dom的方式獲取文本框中屬性的值
document.getElementById("id名稱").value
2.創(chuàng)建XMLHttpRequest對(duì)象
根據(jù)瀏覽器的不同有XMLHttpRequest、ActiveXObject兩種對(duì)象
3.注冊(cè)回調(diào)函數(shù) 注冊(cè)回調(diào)函數(shù)時(shí),只需要函數(shù)名,不要加括號(hào)
注冊(cè)回調(diào)函數(shù)時(shí)會(huì)獲取服務(wù)器端返回的數(shù)據(jù):
第一種方式：獲取服務(wù)器端輸出的純文本數(shù)據(jù)
第二種方式：使用responseXML的方式來(lái)接受XML數(shù)據(jù)對(duì)象的DOM對(duì)象
4.設(shè)置連接信息
5.發(fā)送數(shù)據(jù)，開始和服務(wù)器端進(jìn)行交互
post方式/get方式
2.2.ajax主要方法：
(1).getElementById(“id屬性值”):
根據(jù)指定的 id 屬性值得到對(duì)象
(2).getElementsByTagName(tagname):
通過查找整個(gè) HTML 文檔中的任何 HTML 元素，傳回指定名稱的元素集合
(3).選擇器：
選擇器有基本選擇器、層級(jí)選擇器、屬性選擇器等。本程序只有到基本選擇器#id，如：
$("#myDiv"):查找 ID 為"myDiv"的元素
2.3.XMLHttpRequest對(duì)象：
XMLHttpRequest可以提供不重新加載頁(yè)面的情況下更新網(wǎng)頁(yè)，在頁(yè)面加載后在客戶端向服務(wù)器請(qǐng)求數(shù)據(jù)，在頁(yè)面加載后在服務(wù)器端接受數(shù)據(jù)，在后臺(tái)向客戶端發(fā)送數(shù)據(jù)。
2.3.1.方法：
(1)overrideMimeType(“text/html”):
將覆蓋發(fā)送給服務(wù)器的頭部，強(qiáng)制text/xml 作為mime-type
(2)open(method, url, async, username, password):
初始化 HTTP 請(qǐng)求參數(shù)，例如 URL 和 HTTP 方法，但是并不發(fā)送請(qǐng)求。
method參數(shù)是用于請(qǐng)求的HTTP方法，包括GET、POST和HEAD;
url參數(shù)是請(qǐng)求的主體
async參數(shù)指示請(qǐng)求使用同步還是異步，false請(qǐng)求是同步的，true請(qǐng)求是異步的
username 和 password 參數(shù)是可選的，為 url 所需的授權(quán)提供認(rèn)證資格。如果指定了，它們會(huì)覆蓋 url 自己指定的任何資格。
(3)send(body):
發(fā)送 HTTP 請(qǐng)求，使用傳遞給 open() 方法的參數(shù)，以及傳遞給該方法的可選請(qǐng)求體
send(body)如果通過調(diào)用 open() 指定的 HTTP 方法是 POST 或 PUT，body 參數(shù)指定了請(qǐng)求體，作為一個(gè)字符串或者 Document 對(duì)象。如果請(qǐng)求體不是必須的話，這個(gè)參數(shù)就為 null。
如果之前調(diào)用的 open() 參數(shù) async 為 false，這個(gè)方法會(huì)阻塞并不會(huì)返回，直到 readyState 為 4 并且服務(wù)器的響應(yīng)被完全接收。
如果 async 參數(shù)為 true，或者這個(gè)參數(shù)省略了，send() 立即返回，并且正如后面所介紹的，服務(wù)器響應(yīng)將在一個(gè)后臺(tái)線程中處理
(4)setRequestHeader(name, value):
向一個(gè)打開但未發(fā)送的請(qǐng)求設(shè)置或添加一個(gè) HTTP 請(qǐng)求
name 參數(shù)是要設(shè)置的頭部的名稱。這個(gè)參數(shù)不應(yīng)該包括空白、冒號(hào)或換行。
value 參數(shù)是頭部的值。這個(gè)參數(shù)不應(yīng)該包括換行
2.3.2.屬性：
(1)onreadystatechange:
每次 readyState 屬性改變的時(shí)候調(diào)用的事件句柄函數(shù)。當(dāng) readyState 為 3 時(shí)，它也可能調(diào)用多次。
(2)readyState:
HTTP 請(qǐng)求的狀態(tài).當(dāng)一個(gè) XMLHttpRequest 初次創(chuàng)建時(shí)，這個(gè)屬性的值從 0 開始，直到接收到完整的 HTTP 響應(yīng)，這個(gè)值增加到 4。
5 個(gè)狀態(tài)中每一個(gè)都有一個(gè)相關(guān)聯(lián)的非正式的名稱，下表列出了狀態(tài)、名稱和含義：
readyState 的值不會(huì)遞減，除非當(dāng)一個(gè)請(qǐng)求在處理過程中的時(shí)候調(diào)用了 abort() 或 open() 方法。每次這個(gè)屬性的值增加的時(shí)候，都會(huì)觸發(fā) onreadystatechange 事件句柄。
(3)status:
由服務(wù)器返回的 HTTP 狀態(tài)代碼，如200表示成功，而404表示 "Not Found" 錯(cuò)誤。 當(dāng)readyState小于3的時(shí)候讀取這一屬性會(huì)導(dǎo)致一個(gè)異常。
(4)responseText:
目前為止從服務(wù)器接收到的響應(yīng)體（不包括頭部），或者如果還沒有接收到數(shù)據(jù)的話，就是空字符串。
如果 readyState 小于 3，這個(gè)屬性就是一個(gè)空字符串。當(dāng) readyState 為 3，這個(gè)屬性返回目前已經(jīng)接收的響應(yīng)部分。如果 readyState 為 4，這個(gè)屬性保存了完整的響應(yīng)體。
如果響應(yīng)包含了為響應(yīng)體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8
(5)responseXML:對(duì)請(qǐng)求的響應(yīng)，解析為XML并作為Document對(duì)象返回
代碼示例：
說(shuō)明：本示例有前臺(tái)和后臺(tái)組成，后臺(tái)采用的是servlet實(shí)現(xiàn)，只是沒有去數(shù)據(jù)庫(kù)校驗(yàn)數(shù)據(jù)。前臺(tái)有html和javascript組成，前臺(tái)驗(yàn)證采用了兩種方式，一是采用jquery封裝的ajax來(lái)實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證，二是采用XMLHttpRequest對(duì)象來(lái)實(shí)現(xiàn)表單動(dòng)態(tài)驗(yàn)證，兩種驗(yàn)證方式的不同只是javascript腳本不一樣，前臺(tái)頁(yè)面和后臺(tái)的servlet都一樣。
前臺(tái)ajax.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ajax</title>
<!--導(dǎo)入js，注意src的路徑-->
<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>
<!-- ajax不需要表單進(jìn)行數(shù)據(jù)提交，因此不用寫表單標(biāo)簽-->
<!-- ajax不需要name屬性，需要一個(gè)id的屬性-->
<!--onblur 事件會(huì)在對(duì)象失去焦點(diǎn)時(shí)發(fā)生-->
用戶名:<input type="text" id="username" onblur="verify3()"/><div id="result"></div>
</br></br>
<input type="submit" value="登錄" onclick="login()"/>
</body>
</html>
后臺(tái)AJAXServer.java：
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;
public class AJAXServer extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
//1.取參數(shù)
String old=request.getParameter("name");
//2.檢查是否有問題
if(old==null||old.length()==0){
out.println("用戶名不能為空");
}else{
//3.校驗(yàn)操作
String name=old;
if(name.equals("pan")){
//4.和傳統(tǒng)應(yīng)用不同之處。這一步需要將用戶感興趣的數(shù)據(jù)返回給頁(yè)面端，而不是到新的頁(yè)面
out.println("用戶名["+name+"]已經(jīng)存在");
}else{
out.println("用戶名["+name+"]可以使用");
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}
javascript：verify.js
<!--（1）用戶名稱的校驗(yàn)，采用jquery封裝的ajax動(dòng)態(tài)校驗(yàn)表單數(shù)據(jù)-->
function verify1(){
//1.獲取文本框中的內(nèi)容
//document.getElementById("username");
var jqueryObj= $("#username");
//獲取節(jié)點(diǎn)的值
var userName=jqueryObj.val();
//2.將文本框中的數(shù)據(jù)發(fā)送給服務(wù)器的servlet
$.get("AJAXServer?name=" +username,null,callback);
}
function callback(data){
//3.接收服務(wù)器返回的數(shù)據(jù)
//4.把服務(wù)器端返回的數(shù)據(jù)動(dòng)態(tài)的顯示在頁(yè)面上
//找到保存信息的節(jié)點(diǎn)
var resultObj=$("#result");
resultObj.html(data);
}
//驗(yàn)證方法2是把驗(yàn)證方式1寫在了一個(gè)方法中，效果是一樣的，都是采用jquery封裝的ajax動(dòng)態(tài)校驗(yàn)表單數(shù)據(jù)
function verify2(){
$.get("AJAXServer?name="+$("#username").val(),null,function(data){
$("#result").html(data);
});
}
<!--（2）用戶名稱的校驗(yàn)，使用XMLHTTPRequest對(duì)象來(lái)進(jìn)行ajax的異步數(shù)據(jù)驗(yàn)證-->
var xmlhttp;//定義一個(gè)全局變量
function verify3(){
//1.采用dom的方式獲取文本框中屬性的值
var username=document.getElementById("username").value;
//2.創(chuàng)建XMLHttpRequest對(duì)象
//需要針對(duì)IE和其他類型的瀏覽器的差異建立這個(gè)對(duì)象的不同方式寫不同的代碼
if(window.XMLHttpRequest){
//針對(duì)FireFox，IE7，IE8，Safari，Opera，Mozillar
xmlhttp=new XMLHttpRequest();
//針對(duì)某些特定的版本的mozillar瀏覽器的BUG進(jìn)行修正
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}
} else if(window.ActiveXObject){
//針對(duì)IE6，IE5.5，IE5
//兩個(gè)用于可以創(chuàng)建XMLHttpRequest對(duì)象的控件名稱，保存在一個(gè)js數(shù)組中，排在前面的版本較新
var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
// 取出一個(gè)控件名稱進(jìn)行創(chuàng)建，如果創(chuàng)建成功就終止循環(huán)
//如果創(chuàng)建失敗，會(huì)拋出異常，然后可以繼續(xù)循環(huán)，繼續(xù)嘗試創(chuàng)建
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
if(!xmlhttp){
alert("XMLHttpRequest對(duì)象創(chuàng)建失?。?！");
return;
}
//3.注冊(cè)回調(diào)函數(shù) 注冊(cè)回調(diào)函數(shù)時(shí)，只需要函數(shù)名，不要加括號(hào)
//我們需要將函數(shù)名注冊(cè)，如果加上括號(hào)，就會(huì)把函數(shù)的返回值注冊(cè)上，這個(gè)是錯(cuò)誤的
xmlhttp.onreadystatechange=callback3;
//4.設(shè)置連接信息
xmlhttp.open("GET","AJAXServer?name="+username,true);
//5.發(fā)送數(shù)據(jù)，開始和服務(wù)器端進(jìn)行交互
xmlhttp.send(null);//GET方式url中封裝了用戶名，故發(fā)送只用發(fā)一個(gè)null
//POST方式請(qǐng)求和發(fā)送數(shù)據(jù)
<!--
xmlhttp.open("POST","AJAXServer",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("name="+username);
-->
}
//回調(diào)函數(shù)
function callback3(){
//判斷對(duì)象的狀態(tài)是否交互完成
if(xmlhttp.readyState==4){
//判斷http的交互是否成功
if(xmlhttp.status==200) {
//獲取服務(wù)器端返回的數(shù)據(jù)
//第一種方式：獲取服務(wù)器端輸出的純文本數(shù)據(jù)
var responseText=xmlhttp.responseText;
//將數(shù)據(jù)顯示在頁(yè)面上 通過dom的方式找到div標(biāo)簽對(duì)應(yīng)的元素節(jié)點(diǎn)
var divNode=document.getElementById("result");
//設(shè)置元素節(jié)點(diǎn)中的html的內(nèi)容
divNode.innerHTML=responseText;
}
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
</web-app>
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>AJAXServer</servlet-name>
<servlet-class>AJAXServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXServer</servlet-name>
<url-pattern>/AJAXServer</url-pattern>
</servlet-mapping>
</web-app>
1.web.xml servlet的配置
2.AJAXServer.java 包名相關(guān)
截圖1：
截圖2：
截圖3：
截圖4：
截圖說(shuō)明:以上四個(gè)截圖url顯示的都是一樣的，只是為了便于顯示我沒有把它截下來(lái)。
- 揭開AJAX神秘的面紗(AJAX個(gè)人學(xué)習(xí)筆記)
- AJax 學(xué)習(xí)筆記二(onreadystatechange的作用)
- JavaScript高級(jí)程序設(shè)計(jì) XML、Ajax 學(xué)習(xí)筆記
- jquery ajax學(xué)習(xí)筆記2 使用XMLHttpRequest對(duì)象的responseXML
- jquery中ajax學(xué)習(xí)筆記3
- jquery中ajax學(xué)習(xí)筆記4
- jQuery學(xué)習(xí)筆記之 Ajax操作篇（一） - 數(shù)據(jù)加載
- jQuery學(xué)習(xí)筆記之 Ajax操作篇（二） - 數(shù)據(jù)傳遞
- jQuery學(xué)習(xí)筆記之 Ajax操作篇（三） - 過程處理
- Ajax學(xué)習(xí)筆記整理
相關(guān)文章
這篇文章主要介紹了jQuery中隱藏元素的hide方法及說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
快速移動(dòng)鼠標(biāo)觸發(fā)問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleav
這篇文章主要介紹了快速移動(dòng)鼠標(biāo)所觸發(fā)的問題及解決方法(ECharts外部調(diào)用保存為圖片操作及工作流接線mouseenter和mouseleave),非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-08-08
使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能
這篇文章主要為大家詳細(xì)介紹了使用ajaxfileupload.js實(shí)現(xiàn)上傳文件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
jQuery實(shí)現(xiàn)ajax的疊加和停止(終止ajax請(qǐng)求)
這篇文章主要介紹了jQuery實(shí)現(xiàn)ajax的疊加和停止的關(guān)鍵代碼，代碼簡(jiǎn)單易懂，需要的朋友可以參考下2016-08-08
jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫效果無(wú)刷新柱狀圖投票代碼
這篇文章主要介紹了jQuery基于ajax實(shí)現(xiàn)帶動(dòng)畫效果無(wú)刷新柱狀圖投票代碼,通過使用jquery動(dòng)態(tài)操作頁(yè)面元素樣式屬性實(shí)現(xiàn)柱狀圖投票效果,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
JQuery實(shí)現(xiàn)簡(jiǎn)單時(shí)尚快捷的氣泡提示插件
在程序提交后，為了提高用戶體驗(yàn)我們需要驗(yàn)證并提示出錯(cuò)的位置，利用JQuery我們可以輕松實(shí)現(xiàn)氣泡提示，需要的朋友可以了解下2012-12-12
jQuery實(shí)現(xiàn)基本動(dòng)畫效果的方法詳解
這篇文章主要介紹了jQuery實(shí)現(xiàn)基本動(dòng)畫效果的方法,結(jié)合實(shí)例形式分析了jQuery animate()方法實(shí)現(xiàn)動(dòng)畫效果相關(guān)操作技巧,需要的朋友可以參考下2018-09-09
JQuery實(shí)現(xiàn)Table的tr上移下移功能
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)Table的tr上移下移功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
使用 jQuery 實(shí)現(xiàn)表單驗(yàn)證功能
表單作為 HTML 最重要的一個(gè)組成部分，幾乎在每個(gè)網(wǎng)頁(yè)上都有體現(xiàn)，例如用戶提交信息、用戶反饋信息和用戶查詢信息等，因此它是網(wǎng)站管理者與瀏覽者之間溝通的橋梁。下面通過實(shí)例代碼給大家介紹jQuery 實(shí)現(xiàn)表單驗(yàn)證功能2017-07-07
jQuery中使用each處理json數(shù)據(jù)
這篇文章主要介紹了jQuery中使用each處理json數(shù)據(jù),非常簡(jiǎn)單實(shí)用，需要的朋友可以參考下2015-04-04