jquery中ajax學習筆記一

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

AJAX簡單介紹：
AJAX 指非同步 JavaScript 及 XML（Asynchronous JavaScript And XML），是指一種建立互動式網頁應用的網頁開發技術。通過 AJAX，JavaScript 可使用 JavaScript 的 XMLHttpRequest 對象來直接與伺服器進行通訊。通過這個對象，您JavaScript 可在不重載頁面的情況與 Web 服務器交換資料。
jQuery是一種javascript架構，是對javascript的一種輕量級的封裝，容易理解。
Ajax是一種由xml+javascript組合起來的一種非同步請求技術.可實現動態重新整理。
ajax準備工作：
1.jquery下載：
官網最新的：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非同步傳輸的步驟：
1.採用dom的方式擷取文字框中屬性的值
document.getElementById("id名稱").value
2.建立XMLHttpRequest對象
根據瀏覽器的不同有XMLHttpRequest、ActiveXObject兩種對象
3.註冊回呼函數註冊回呼函數時,只需要函數名,不要加括弧
註冊回呼函數時會擷取伺服器端返回的資料:
第一種方式：擷取伺服器端輸出的純文字資料
第二種方式：使用responseXML的方式來接受XML資料對象的DOM對象
4.設定串連資訊
5.發送資料，開始和伺服器端進行互動
post方式/get方式

2.2.ajax主要方法：
(1).getElementById(“id屬性值”):
根據指定的 id 屬性值得到對象
(2).getElementsByTagName(tagname):
通過尋找整個 HTML 文檔中的任何 HTML 元素，傳回指定名稱的元素集合
(3).選取器：
選取器有基本選取器、層級選取器、屬性選取器等。本程式只有到基本選取器#id，如：
$("#myDiv"):尋找 ID 為"myDiv"的元素
2.3.XMLHttpRequest對象：
XMLHttpRequest可以提供不重新載入頁面的情況下更新網頁，在頁面載入後在用戶端向伺服器請求資料，在頁面載入後在伺服器端接受資料，在後台向用戶端發送資料。
2.3.1.方法：
(1)overrideMimeType(“text/html”):
將覆蓋發送給伺服器的頭部，強制text/xml 作為mime-type
(2)open(method, url, async, username, password):
初始化 HTTP 要求參數，例如 URL 和 HTTP 方法，但是並不發送請求。
method參數是用於請求的HTTP方法，包括GET、POST和HEAD;
url參數是請求的主體
async參數指示請求使用同步還是非同步，false請求是同步的，true請求是非同步
username 和 password 參數是可選的，為 url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。
(3)send(body):
發送 HTTP 要求，使用傳遞給 open() 方法的參數，以及傳遞給該方法的可選請求體
send(body)如果通過調用 open() 指定的 HTTP 方法是 POST 或 PUT，body 參數指定了請求體，作為一個字串或者 Document 對象。如果請求體不是必須的話，這個參數就為 null。
如果之前調用的 open() 參數 async 為 false，這個方法會阻塞並不會返回，直到 readyState 為 4 並且伺服器的響應被完全接收。
如果 async 參數為 true，或者這個參數省略了，send() 立即返回，並且正如後面所介紹的，伺服器響應將在一個後台線程中處理
(4)setRequestHeader(name, value):
向一個開啟但未發送的請求設定或添加一個 HTTP 要求
name 參數是要設定的頭部的名稱。這個參數不應該包括空白、冒號或換行。
value 參數是頭部的值。這個參數不應該包括換行
2.3.2.屬性：
(1)onreadystatechange:
每次 readyState 屬性改變的時候調用的事件控制代碼函數。當 readyState 為 3 時，它也可能調用多次。
(2)readyState:
HTTP 要求的狀態.當一個 XMLHttpRequest 初次建立時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應，這個值增加到 4。
5 個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義：

readyState 的值不會遞減，除非當一個請求在處理過程中的時候調用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange 事件控制代碼。
(3)status:
由伺服器返回的 HTTP 狀態碼，如200表示成功，而404表示 "Not Found" 錯誤。當readyState小於3的時候讀取這一屬性會導致一個異常。
(4)responseText:
目前為止從伺服器接收到的響應體（不包括頭部），或者如果還沒有接收到資料的話，就是Null 字元串。
如果 readyState 小於 3，這個屬性就是一個Null 字元串。當 readyState 為 3，這個屬性返回目前已經接收的響應部分。如果 readyState 為 4，這個屬性儲存了完整的響應體。
如果響應包含了為響應體指定字元編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8
(5)responseXML:對請求的響應，解析為XML並作為Document對象返回

程式碼範例：
說明：本樣本有前台和後台組成，後台採用的是servlet實現，只是沒有去資料庫校正資料。前台有html和javascript組成，前台驗證採用了兩種方式，一是採用jquery封裝的ajax來實現表單動態驗證，二是採用XMLHttpRequest對象來實現表單動態驗證，兩種驗證方式的不同只是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>

<script type="text/javascript" src="jslib/jquery.js"></script>
<script type="text/javascript" src="jslib/verify.js"></script>
</head>
<body>



使用者名稱:<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.取參數
String old=request.getParameter("name");
//2.檢查是否有問題
if(old==null||old.length()==0){
out.println("使用者名稱不可為空");
}else{
//3.校正操作
String name=old;
if(name.equals("pan")){
//4.和傳統應用不同之處。這一步需要將使用者感興趣的資料返回給頁面端，而不是到新的頁面
out.println("使用者名稱["+name+"]已經存在");
}else{
out.println("使用者名稱["+name+"]可以使用");
}
}
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}

javascript：verify.js 複製代碼代碼如下:
function verify1(){
//1.擷取文字框中的內容
//document.getElementById("username");
var jqueryObj= $("#username");
//擷取節點的值
var userName=jqueryObj.val();
//2.將文字框中的資料發送給伺服器的servlet
$.get("AJAXServer?name=" +username,null,callback);
}
function callback(data){
//3.接收伺服器返回的資料
//4.把伺服器端返回的資料動態顯示在頁面上
//找到儲存資訊的節點
var resultObj=$("#result");
resultObj.html(data);
}
//驗證方法2是把驗證方式1寫在了一個方法中，效果是一樣的，都是採用jquery封裝的ajax動態校正表單資料
function verify2(){
$.get("AJAXServer?name="+$("#username").val(),null,function(data){
$("#result").html(data);
});
}

var xmlhttp;//定義一個全域變數
function verify3(){
//1.採用dom的方式擷取文字框中屬性的值
var username=document.getElementById("username").value;
//2.建立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
//兩個用於可以建立XMLHttpRequest對象的控制項名稱，儲存在一個js數組中，排在前面的版本較新
var activexName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activexName.length;i++){
// 取出一個控制項名稱進行建立，如果建立成功就終止迴圈
//如果建立失敗，會拋出異常，然後可以繼續迴圈，繼續嘗試建立
try{
xmlhttp=new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
if(!xmlhttp){
alert("XMLHttpRequest對象建立失敗！！");
return;
}
//3.註冊回呼函數註冊回呼函數時，只需要函數名，不要加括弧
//我們需要將函數名註冊，如果加上括弧，就會把函數的傳回值註冊上，這個是錯誤的
xmlhttp.onreadystatechange=callback3;
//4.設定串連資訊
xmlhttp.open("GET","AJAXServer?name="+username,true);
//5.發送資料，開始和伺服器端進行互動
xmlhttp.send(null);//GET方式url中封裝了使用者名稱，故發送只用發一個null
//POST方式請求和發送資料

}
//回呼函數
function callback3(){
//判斷對象的狀態是否互動完成
if(xmlhttp.readyState==4){
//判斷http的互動是否成功
if(xmlhttp.status==200) {
//擷取伺服器端返回的資料
//第一種方式：擷取伺服器端輸出的純文字資料
var responseText=xmlhttp.responseText;
//將資料顯示在頁面上通過dom的方式找到div標籤對應的元素節點
var divNode=document.getElementById("result");
//設定元素節點中的html的內容
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>

1.web.xml servlet的配置

2.AJAXServer.java 包名相關

1：

2：

3：

4：

說明:以上四個url顯示的都是一樣的，只是為了便於顯示我沒有把它截下來。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More