- 1.此實例主要通過JQuery將提交到servlet,處理後將數據返回
AjaxServlet.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 AjaxServlet extends HttpServlet{
- protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- doGet(request, response);
- }
- protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
- try{
- response.setContentType("text/html;charset=GB2312");
- PrintWriter out=response.getWriter();
- String old = request.getParameter("name");
- if(old == null || old.length()==0){
- out.println("用戶名不能爲空!");
- }else{
- String name = old;
- if(name.equals("unicorn")){
- //4.和傳統應用不同之處,這步需要將用戶感興趣的數據返回,而不是將一個新的頁面發送給用戶
- //寫法沒有變化,本質發生了改變
- out.println("用戶名:"+name+"已經存在");
- }else{
- out.println("用戶名:"+name+"尚未存在");
- }
- }
- }catch(Exception e){
- e.printStackTrace();
- }
- }
- }
- <!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="js/jquery-1.2.6.js"></script>
- <script type="text/javascript" src="js/unicorn.js"></script>
- </head>
- <body>
- 請輸入用戶名:<br/>
- <!-- ajax方式下不需要用form來提交數據-->
- <!-- ajax方式不需要name屬性,但是要有id屬性-->
- <input type="text" id="userName"/>
- <input type="button" value="校驗" onclick="verify()" />
- <!-- 此div用於存放服務器返回信息,初始爲空 -->
- <!-- id屬性定義爲了用dom方式找到某節點,進行操作-->
- <div id="result"></div>
- </body>
- </html>
unicorn.js
- //JQuery方式傳送數據
- function verify(){
- $.get("AjaxServer?name="+$("#userName").val(),null,function (data){
- $("#result").html(data);
- });
- }
- //這個方法將使用XMLHTTPRequest對象來進行AJAX的異步數據交換
- var xmlhttp;
- function verify1(){
- //1.使用dom的方式獲取文本框中的值
- alert("haha");
- var userName = document.getElementById("userName").value;
- //2.創建XMLHTTPRequest對象
- //這是XMLHTTPRequest對象使用中最複雜的一步
- //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼
- if(window.XmlHttpRequest){
- //針對FireFox,Mozillar,Opera,Safari,IE7,IE8
- xmlhttp = new XMLHttpRequest();
- //針對某些特定版本的mozillar瀏覽器到BUG進行修正
- if(xmlhttp.overrideMimeType){
- xmlhttp.overrideMimeType("text/xml");
- }
- }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){
- }
- }
- }
- //確認XMLHTTPRequst對象創建成功
- if(!xmlhttp){
- alert("XMLHttpRequest對象創建失敗!!");
- return;
- }else{
- alert(xmlhttp);
- }
- //2.註冊回調函數
- //註冊回調函數時,只需要函數名,不要加括號
- //我們需要將函數名註冊,如果加上括號,就會把函數的返回值註冊上,這是錯誤的
- xmlhttp.onreadystatechange = callback;
- //3.設置連接信息
- //第一個參數表示http的請求方式,支持所有的http請求方式,主要是get和post
- //第二個參數表示請求的url地址,get方式請求的參數也在url中
- //第三個參數表示採用異步還是同步方式交互,true表示異步
- xmlhttp.open("GET","AjaxServer?name="+userName,true);
- //4.發送數據,開始和服務器端進行交互
- //同步方式下,send這句話會在服務器端數據回來後才執行完
- //異步方式下,send這句話會立即完成執行
- xmlhttp.send(null);
- }
- //回調函數
- function callback(){
- //判斷對象的狀態是否交互完成
- if(xmlhttp.readyState==4){
- //判斷http的交互是否成功
- if(xmlhttp.status==200){
- //獲取服務器端返回的數據
- //獲取服務器端輸出的純文本數據
- var responseText = xmlhttp.responseText;
- //將數據顯示在頁面上
- var divNode = document.getElementById("result");
- //設置元素節點中的html內容
- divNode.innerHTML = responseText;
- }
- }
- }
以上是傳智的部分筆記