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