Ajax的學習(最原始的寫法+最常用的寫法+最簡便的寫法)
AJAX:Asynchronous JavaScript AND XML
定義:瀏覽器向伺服器傳送的非同步請求(不改變頁面的情況下,傳送的變化)
核心:瀏覽器向伺服器傳送非同步請求,javascript中提供xmlHttpRequest物件,這個是核心物件,來發送非同步請求
最簡寫法: jQuery
書寫ajax的步驟:
1,建立物件: new xmlHttpRequest();
2,初始化引數 open("get/post","url","true")
3, 傳送請求 send(data)
get/post
xmlHttpRequest存在不同的狀態碼
0-----4
0:建立(new)之後
1:連線初始化之後 open之後
2:傳送請求之後
3,伺服器正在處理
4,當伺服器將結果響應到瀏覽器中
直接看例子
我們實現功能:註冊賬號時,檢查賬號在資料庫中是否存在,並非同步刷新出提示資訊。(因為只是展示下Ajax,為了簡便,直接在Servlet中寫死賬號為“aaa”,若註冊賬號為aaa,不能註冊,其餘情況可以註冊)
一、最原始的寫法:
jsp程式碼:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>註冊賬號(Ajax)</title> <script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> 賬號(get):<input type="text" name="username" id="username"/><span id="uinfo"> </span> <br/><br/> 賬號(post):<input type="text" name="username" id="username1"/><span id="uinfo1"> </span> <br/><br/> <input type="button" value="同步提交" id="button" /> <script type="text/javascript"> //同步提交 $("#button").click(function(){ window.location.href="ajax.do"; }); //get提交 $("#username").blur(function(){ //取到文字框裡面的值(賬號) var username = $("#username").val(); //建立非同步提交物件 var xhr= new XMLHttpRequest(); //初始化連線 xhr.open("GET","ajax.do?username="+username,true); //傳送請求 xhr.send(null); //狀態的改變事件 xhr.onreadystatechange=function(){ //處理響應結果 if(xhr.readyState==4){ //得到響應的結果 var result = xhr.responseText; if (result=="0") { //找到id=uinfo---加內容進去 $("#uinfo").html("該賬號已經存在!") //找到id=uinfo---改掉字型的顏色 $("#uinfo").css("color","red"); } else{ $("#uinfo").html("可以註冊!") $("#uinfo").css("color","green"); } } } }); //post $("#username1").blur(function(){ //取到文字框裡面的值(賬號) var username1=$("#username1").val(); //建立非同步提交物件 var xhr= new XMLHttpRequest(); //初始化連線 xhr.open("post","ajax.do",true); //post提交,要新增請求頭 xhr.setRequestHeader("CONTENT-TYPE", "application/x-www-form-urlencoded"); //傳送請求 xhr.send("username="+username1); //狀態的改變事件 xhr.onreadystatechange=function(){ //處理響應結果 if(xhr.readyState==4){ //得到響應的結果 var result= xhr.responseText; if (result=="0") { $("#uinfo1").html("該賬號已經存在!") $("#uinfo1").css("color","red"); } else{ $("#uinfo1").html("可以註冊!") $("#uinfo1").css("color","green"); } } } }); </script> </body> </html>
java程式碼:
package com.ajia.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/ajax.do")
public class AjaxServlet02 extends HttpServlet{
@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String username=request.getParameter("username");
//響應到頁面中去
PrintWriter out=response.getWriter();
if ("aaa".equals(username)) {
out.print(0);
}else {
out.print(1);
}
}
}
Servlet中,賬號存在返回0,否則返回1。jsp中根據返回值進行非同步重新整理。
jsp中使用的是blur事件,即輸入後,用滑鼠點選一下該輸入框外(輸入框失去焦點),資訊立即刷新出來。
若是同步提交,則會直接跳轉到Servlet的地址;非同步提交的話地址不會變。
結果如下:
同步提交:
非同步提交:
二、最常用的寫法
jsp程式碼:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>註冊賬號(Ajax)</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
賬號(get):<input type="text" name="username" id="username"/><span id="uinfo"> </span>
<br/><br/>
賬號(post):<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
<br/><br/>
<script type="text/javascript">
//get方式
$("#username").blur(function(){
//取到文字框裡面的值(賬號)
var username = $("#username").val();
$.ajax({
type: 'GET',
url: 'ajax.do?username='+username,
success: function(data){
if (data=="0") {
//找到id=uinfo---加內容進去
$("#uinfo").html("該賬號已經存在!")
//找到id=uinfo---改掉字型的顏色
$("#uinfo").css("color","red");
} else{
$("#uinfo").html("可以註冊!")
$("#uinfo").css("color","green");
}
},
error: function(msg){
alert("提交失敗!");
}
});
});
//post方式
$("#username1").blur(function(){
//取到文字框裡面的值(賬號)
var username = $("#username1").val();
$.ajax({
type: 'POST',
url: 'ajax.do',
data: {'username':username},
dataType:'json',
success: function(data){
if (data=="0") {
//找到id=uinfo---加內容進去
$("#uinfo1").html("該賬號已經存在!")
//找到id=uinfo---改掉字型的顏色
$("#uinfo1").css("color","red");
} else{
$("#uinfo1").html("可以註冊!")
$("#uinfo1").css("color","green");
}
},
error: function(msg){
alert("提交失敗!");
}
});
});
</script>
</body>
</html>
java程式碼不變,還是之前那個。
執行結果:
這樣的寫法是不是簡潔了很多呢,也很直觀易懂。
多說一點,json的寫法:
{key:value,key:value} (需要打引號)
可以看到,Ajax方法內就使用的json寫法,同時data後面也是用的json。
如果要用到json陣列,直接在最外面加中括號[]
三、最簡單的寫法
jsp程式碼:
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>註冊賬號(Ajax)</title>
<script src="js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
賬號(get):<input type="text" name="username" id="username"/><span id="uinfo"> </span>
<br/><br/>
賬號(post):<input type="text" name="username" id="username1"/><span id="uinfo1"> </span>
<br/><br/>
<script type="text/javascript">
//get提交
$("#username").blur(function(){
//取到文字框裡面的值(賬號)
var username = $("#username").val();
$.get("ajax.do?username="+username, function(data) {
if (data=="0") {
//找到id=uinfo---加內容進去
$("#uinfo").html("該賬號已經存在!")
//找到id=uinfo---改掉字型的顏色
$("#uinfo").css("color","red");
} else{
$("#uinfo").html("可以註冊!")
$("#uinfo").css("color","green");
}
});
});
//post提交
$("#username1").blur(function(){
//取到文字框裡面的值(賬號)
var username = $("#username1").val();
$.post("ajax.do",{'username':username}, function(data) {
if (data=="0") {
//找到id=uinfo---加內容進去
$("#uinfo1").html("該賬號已經存在!")
//找到id=uinfo---改掉字型的顏色
$("#uinfo1").css("color","red");
} else{
$("#uinfo1").html("可以註冊!")
$("#uinfo1").css("color","green");
}
});
});
</script>
</body>
</html>
執行結果:
第三種寫法實際上就是用$post或者$get,然後直接寫入內容。
比較:第二種寫法是以鍵值對方式寫入引數,第三種就是直接寫引數,語法如下:
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
總結:
最後總結一下,我們一般用第二種寫法,看起來更直白易懂。
另外,後面兩種要記得引入jQuery庫哦
在jQuery裡,如果不寫type,預設均以get方式提交;dataType可以不用寫,因為它預設執行智慧判斷(xml、json、script 或 html)。
還有,我們這裡的Servlet寫得比較簡單,只是用PrintWriter的例項直接向前臺輸出,前臺獲取返回值進行處理。後續如果要從資料庫讀資料並進行處理的話,直接在Servlet中編寫相應程式碼就行,前臺需要進行一些處理的話也可以直接在回撥函式success()中寫入相應程式碼就行,整個Ajax的大體流程就是這樣,非常簡單,又十分好用。
注:jQuery提供的函式非常好用,但不要忘記Ajax的本源哦,它是使用xmlHttpRequest物件來發送請求的;
還有,後續可能會遇到跨域問題,jQuery中可以這樣解決: dataType:"jsonp"
但是注意,解決跨域問題的是jsonp,不是Ajax,只是jQuery將其封裝到了Ajax裡。