二十三Ajax
1.特點(diǎn)
局部刷新
異步傳輸
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-02CoeA2j-1604470936651)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464193782.png)]
2優(yōu)點(diǎn)
節(jié)省帶寬
減輕服務(wù)器壓力
加快相應(yīng)速度
3.實(shí)現(xiàn)步驟
[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-K5Po4kqi-1604470936654)(C:\Users\lgm\AppData\Roaming\Typora\typora-user-images\1604464187451.png)]
1.創(chuàng)建XMLHttpRequest對(duì)象
xmlHttpRequest = new XMLHttpRequest();
2.與服務(wù)端獲得連接
xmlHttpRequest.open(method,URL,async)
建立與服務(wù)器的連接，method參數(shù)指定請(qǐng)求的http方法，典型的值是GET(超鏈接等)/POST(表單)，URL
參數(shù)指定請(qǐng)求的地址，async參數(shù)指定是否使用異步請(qǐng)求，其值為true/false
例：xmlHttpRequest.open(“get”,“userServlet?name=”+name,true);
3.向服務(wù)器發(fā)送請(qǐng)求信息
send(content)
4.指定回調(diào)函數(shù)接收響應(yīng)信息
xmlHttpRequest.onreadystatechange=reback;
5.創(chuàng)建回調(diào)函數(shù)，根據(jù)響應(yīng)狀態(tài)動(dòng)態(tài)刷新頁(yè)面
xmlHttpRequest.readystate XMLHttpRequest的狀態(tài)信息
? 0 XMLHttpRequest對(duì)象沒(méi)有完成初始化
? 1 XMLHttpRequest對(duì)象開(kāi)始發(fā)送請(qǐng)求
? 2 XMLHttpRequest對(duì)象的請(qǐng)求發(fā)送完成
? 3 XMLHttpRequest對(duì)象開(kāi)始讀取響應(yīng)，還沒(méi)有結(jié)束
? 4 XMLHttpRequest對(duì)象讀取響應(yīng)結(jié)束
xmlHttpRequest.status HTTP的狀態(tài)碼
? 200 服務(wù)器響應(yīng)則正常
? 400 無(wú)法找到請(qǐng)求資源
? 403 沒(méi)有訪問(wèn)權(quán)限
? 404 訪問(wèn)的資源不存在
? 500 服務(wù)器內(nèi)部錯(cuò)誤
xmlHttpRequest.responseText 獲得響應(yīng)的文本內(nèi)容
xmlHttpRequest.responseXML 獲得響應(yīng)的XML文檔對(duì)象
例：
function reback(){
1jspAjax.jsp<script type="text/javascript">
//1.創(chuàng)建XMLHttpRequest對(duì)象
var xmlHttpRequest;
function doAjax(){xmlHttpRequest = new XMLHttpRequest();
}
//2.定義一個(gè)函數(shù)
function checkName(){var name=document.getElementById("um").value;//1.創(chuàng)建XMLHttpRequest對(duì)象doAjax();//2.與服務(wù)器取得連接xmlHttpRequest.open("get","userServlet?name="+name,true);//3.向服務(wù)端發(fā)送請(qǐng)求信息xmlHttpRequest.send("a=10");//以get方式請(qǐng)求提交，請(qǐng)求信息不能到達(dá)服務(wù)端//4.通過(guò)回調(diào)函數(shù)接收響應(yīng)信息xmlHttpRequest.onreadystatechange=reback;
}
//3.回調(diào)函數(shù)
function reback(){alert("xmlHttpRequest.readyState:"+xmlHttpRequest.readyState+"\txmlHttpRequest.status:"+xmlHttpRequest.status)var span=document.getElementById("sp");//找到span元素//匿名函數(shù)if(xmlHttpRequest.readyState==4){//服務(wù)器響應(yīng)結(jié)束if(xmlHttpRequest.status==200){//服務(wù)器響應(yīng)成功var res=xmlHttpRequest.responseText;//var res1=eval("("+res+")");//對(duì)JSON格式的數(shù)據(jù)解析//json是一種文本字符串，被存儲(chǔ)在responseText屬性中//js需要使用eval語(yǔ)句將responseText轉(zhuǎn)化為Json格式if(res!=null){span.innerHTML=res;}else{span.innerHTML="接收到的響應(yīng)信息為空";} }}
}
</script>
<body>
<h2>用戶注冊(cè)</h2>
<form action= "" method= "post" >
用戶名: <input type= "text" id= "um" onBlur="checkName()" name= "uname" /><span
id= "sp" ></span><br/>
密碼: <input type= "password" name= "upass1" /><br/>
確認(rèn)密碼: <input type= "password" name= "upass2" /><br/>
Email: <input type= "text" name= "uemail" /><br/>
</form>
</body>
web.xml
< servlet> < servlet-name> jspAjaxServlet
</ servlet-name> < servlet-class> S1103Ajax.S1JspAjaxServlet
</ servlet-class> </ servlet> < servlet-mapping> < servlet-name> jspAjaxServlet
</ servlet-name> < url-pattern> /1103Ajax/userServlet
</ url-pattern> </ servlet-mapping>
S1103Ajax
. S1JspAjaxServlet
. java
public class S1JspAjaxServlet extends HttpServlet { @Override protected void service ( HttpServletRequest request
, HttpServletResponse response
) throws ServletException
, IOException
{ System
. out
. println ( "進(jìn)入jspajaxservlet" ) ; request
. setCharacterEncoding ( "UTF-8" ) ; response
. setCharacterEncoding ( "UTF-8" ) ; String name
= request
. getParameter ( "name" ) ; String a
= request
. getParameter ( "a" ) ; String username
= new String ( name
. getBytes ( ) ) ; System
. out
. println ( "username:" + username
) ; if ( "li" . equals ( username
) ) { PrintWriter out
= response
. getWriter ( ) ; out
. write ( "該用戶存在" ) ; out
. close ( ) ; } else { PrintWriter out
= response
. getWriter ( ) ; out
. write ( "該用戶不存在" + username
+ "可注冊(cè)" ) ; out
. close ( ) ; out
. close ( ) ; } }
}
4.JSON數(shù)據(jù)格式
JavaScript Object Notation java對(duì)象標(biāo)記
JavaScript原生格式，一種輕量級(jí)的數(shù)據(jù)交換格式
1.JS數(shù)據(jù)格式
對(duì)象是一個(gè)無(wú)序的“鍵/值”的集合，一個(gè)對(duì)象以"{"(左括號(hào))開(kāi)始}(右括號(hào))結(jié)束，每個(gè)名稱后面跟:(冒號(hào))，名稱/值對(duì)之間使用,(逗號(hào))分割
json對(duì)象用{}(大括號(hào))表示 {名稱 1:值 1,名稱 2:值 2}
json數(shù)組用[](中括號(hào))表示 [值1,值2,值3,值4]
映射用:(冒號(hào))表示 名稱:值
并列數(shù)據(jù)之間用,(逗號(hào))分割 名稱1:值1,名稱2:值2
<script type="text/javascript">
//1.定義JSON對(duì)象
var person={"name":"李四","sex":"男","age":22,address:"江西南昌"
}
document.write(person.name+"<br/>");
//2.定義JSON數(shù)組
var arr=["lisi","zhangsan","wangwu"];
document.write(arr[1]+"<br/>");
var persons=[{"name":"李四","sex":"男","age":23,"address":"江西南昌"},{"name":"李逵","sex":"男","age":34,"address":"梁山"}];
document.write(persons[1].name+"<br/>");
//3.JSON對(duì)象數(shù)組嵌套
var objArr={"阿凡達(dá)":"左雪昌","特點(diǎn)":"吊毛","特性":["迭代","上下車(chē)",{"速度快":{"少讀":"少讀5分鐘"}}]};
document.write(objArr.特性[2].速度快.少讀);
</script>
2.Json數(shù)據(jù)嵌套
json數(shù)據(jù)格式中，key只能為字符串類型，而value可以是基本數(shù)據(jù)類型，也可以為Json數(shù)組或Json對(duì)象(則嵌套對(duì)value進(jìn)行)
<script type="text/javascript">
//3.JSON對(duì)象數(shù)組嵌套
var objArr={"阿凡達(dá)":"左雪昌","特點(diǎn)":"吊毛","特性":["迭代","上下車(chē)",{"速度快":{"少讀":"少讀5分鐘"}}]};
document.write(objArr.特性[2].速度快.少讀+"<br/>");var all=[{"name":"李連杰","sex":"男","address":[{"one":"江西南昌市紅谷灘新區(qū)23號(hào)"},{"two":"江西撫州贛東大道213號(hào)"}]},{"name":"吊毛" }]
document.write(all[0].address[1].two);
</script>
json是一種文本字符串，被存儲(chǔ)在responseText屬性中
js需要使用eval語(yǔ)句將responseText轉(zhuǎn)化為Json格式
例：var res1=eval("("+xmlHttpRequest.responseText+")");//轉(zhuǎn)化為SON格式的數(shù)據(jù)
3.特點(diǎn)
優(yōu)點(diǎn)
一種數(shù)據(jù)傳輸格式，json和XML相似，但是更加靈巧
且不需要從服務(wù)器內(nèi)部發(fā)送含有特定內(nèi)容的首部信息
缺點(diǎn)
語(yǔ)法過(guò)于嚴(yán)謹(jǐn)
5.Jquery和Ajax結(jié)合使用
1.傳統(tǒng)Ajax不足
? 方法、屬性、常用值較多不好記憶
? 步驟繁瑣
? 瀏覽器兼容問(wèn)題
2.jQuery常用Ajax方法
$.ajax()
$.get()
$.post()
? $.ajax(url,[settings]);
? 方法：
1. function beforeSend(XMLHttpRequest xmlHttpRequest) 發(fā)送請(qǐng)求前調(diào)用的函數(shù)1. xmlHttpRequest 可選2. function complete(XMLHttpRequest xmlHttpRequest,String s)請(qǐng)求完成后調(diào)用的函數(shù)1. xmlHttpRequest 可選，由服務(wù)器返回的數(shù)據(jù)2. s 可選，描述請(qǐng)求類型的字符3. function success(Object result,String s) 請(qǐng)求成功后調(diào)用的函數(shù)1. result 可選，由服務(wù)器返回的數(shù)據(jù)2. s 可選，描述請(qǐng)求類型的字符串
function error(XMLHttpRequest xmlHttpRequest,String em,Exception e) 請(qǐng)求失敗時(shí)調(diào)用的函數(shù)
xmlHttpRequest 可選 em 可選，錯(cuò)誤信息 e 可選，捕獲的異常對(duì)象 屬性：
String url 發(fā)送請(qǐng)求的地址 String type 請(qǐng)求方式 Number timeout 設(shè)置請(qǐng)求超時(shí)時(shí)間 Object data 發(fā)送到服務(wù)器的數(shù)據(jù) String dataType 預(yù)期服務(wù)器返回的數(shù)據(jù)類型，例：XML,HTML,JSON,TEXT blobal 表示是否觸發(fā)全局Ajax事件，默認(rèn)為true 2jQueryAjax.jsp<script type= "text/javascript" src= "../js/jquery-1.8.2.js" ></script>
<script type= "text/javascript" >
$( function(){$("#um").blur(function(){$.ajax({type:"get",url: "3jQueryAjaxFoeward.jsp",dataType:"json",data: "uname="+this.value,timeout:3000,success: function(msg){//表示響應(yīng)成功// alert(msg);if($.trim(msg)=="true"){$("#sp").html("該用戶名存在!");} else{$("#sp").html("該用戶名不存在，可以使用!");}},error: function() { //請(qǐng)求失敗后要執(zhí)行的代碼alert("Ajax請(qǐng)求失敗");}});});
});
</script>
<body>
用戶名: <input type= "text" name= "uname" id= "um" />
<span id= "sp" /></span>
</body> 3jQueryAjaxFoeward.jsp<%
//注意此時(shí)在該頁(yè)面中加入腳本時(shí)，html等代碼不要加入，否則服務(wù)器端響應(yīng)的數(shù)據(jù)內(nèi)容就
//不是true或false
String name=request.getParameter("uname");
//System.out.println("xingming="+name);
//注意此時(shí)在該頁(yè)面中加入腳本時(shí)，html等代碼不要加入，否則服務(wù)器端響應(yīng)的數(shù)據(jù)內(nèi)容就不是true或false
if("li".equals(name)){
out.print("true");
} else{
out.print("false");
}
%>
總結(jié)
以上是生活随笔 為你收集整理的第十九天前端jsp Ajax 的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔 網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔 推薦給好友。
