AJAX 是一個比較莫名的縮寫單詞：Asynchronous javaScript + xml
AJAX包含以下五個部分：
統一創建方法：
//創建XMLHttpRequest對象function createXmlHttpRequest(){ if(window.XMLHttpRequest){//判斷瀏覽器版本是不是IE7以上和其它瀏覽器 return new XMLHttpRequest(); }else if(window.ActiveXObject){//判斷瀏覽器版本是不是IE5，IE6瀏覽器 return new ActiveXObject("Microsoft.XMLHTTP"); }}工作原理
servlet
package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class LoginServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); String uname=request.getParameter("uname"); boolean flag=false; if("accp".equalsIgnoreCase(uname)){ flag=true; out.println(flag); System.out.println(flag+" "+uname); }else{ out.println(flag); System.out.println(flag+" "+uname); } out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>用戶注冊</title><script type="text/javascript">//判斷用戶名function checkuname(ouser){ //取用戶名的值 var uname=ouser.value; //判斷是否為空 if(!uname){ alert("用戶名不能為空!"); //ouser.focus(); return false; }/* get方式 //創建發送請求的url var url="LoginServlet?uname="+uname; //接收返回的XMLHttpRequest對象創建對象 xmlHttpRequest=createXmlHttpRequest(); //設置回調函數 xmlHttpRequest.onreadystatechange=haoLeJiaoWo; //初始化xmlHttpRequest xmlHttpRequest.open("GET",url,true); //發送請求,因為是get方式，所以參數為null xmlHttpRequest.send(null);*///post方式//請求的urlvar url="LoginServlet";//創建xmlHttpRequest對象xmlHttpRequest=createXmlHttpRequest();//創建回調函數xmlHttpRequest.onreadystatechange=haoLeJiaoWo;//初始化xmlHttpRequest.open("POST",url,true);//設置請求頭類型xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttpRequest.send("uname="+uname);}//回調函數function haoLeJiaoWo(){ //表示數據接收完成，并正確返回 if(xmlHttpRequest.readstate=4 && xmlHttpRequest.status==200){ //接收服務器返回的值這里為文本 var result=xmlHttpRequest.responseText; //去掉字符串前后的空格 result=result.replace(/(^/s*)|(/s*$)/g,""); //判斷值 if(result=="true"){ alert("用戶已經存在"); return false; }else{ alert("用戶可以使用"); return true; } }}//創建XMLHttpRequest對象function createXmlHttpRequest(){ if(window.XMLHttpRequest){//判斷瀏覽器版本是不是IE7以上和其它瀏覽器 return new XMLHttpRequest(); }else if(window.ActiveXObject){//判斷瀏覽器版本是不是IE5，IE6瀏覽器 return new ActiveXObject("Microsoft.XMLHTTP"); }}</script></head><body><form action="LoginServlet" method="get"><table align="center"><tr><td><p>用戶賬戶:<input type="text" name="uname" onblur="checkuname(this);"/></p></td></tr><tr><td><p>用戶密碼:<input type="passWord" name="passwd"/></p></td></tr><tr><td><p>確認密碼:<input type="password" name="repasswd"/></p></td></tr><tr><td><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr></table></form></body></html>八、處理XML
package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class doGetU extends HttpServlet { private static final long serialVersionUID = 1L; public doGetU() { } public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //設置響應為xml字符編碼為UTF-8 String uname=request.getParameter("uname"); response.setContentType("text/xml;charset=utf-8"); PrintWriter out = response.getWriter(); StringBuilder bd=new StringBuilder(); bd.append("<userinfo>"); bd.append("<username>"); if(uname==null || uname.length()==0 ){ bd.append("請選擇用戶"); }else{ bd.append(uname); } bd.append("</username>"); bd.append("</userinfo>"); out.println(bd.toString()); out.flush(); out.close(); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); }}頁面
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Ajax中xml處理</title><script type="text/javascript">function checkUser(ouser){ //獲取下拉框的值 var uname=ouser.value; //提交的URL get方式 var url="doGetU?uname="+uname; //創建xmlHttpRequest對象 xmlHttpRequest=createXmlHttpRequest(); //設置回調函數 xmlHttpRequest.onreadystatechange=haoLeJiaoWo; //初始化 xmlHttpRequest.open("GET",url,true); //post方式 //xmlHttpRequest.open("post",url,true); //xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //發送數據get方式，可以沒有參數 xmlHttpRequest.send(); //post發送參數 //xmlHttpRequest.send("uname="+uname) }function haoLeJiaoWo(){ //接收完成，正確返回 if(xmlHttpRequest.readyState==4&&xmlHttpRequest.status==200){ var xml=xmlHttpRequest.responseXML; //判斷是否為空 if(xml){ //獲取useranem的子節點數組 var userNodes=xml.getElementsByTagName("username"); if(userNodes.length>0){ var uname=userNodes[0].firstChild.nodeValue; document.getElementById("username").value=uname; } } } }function createXmlHttpRequest(){ if(window.XMLHttpRequest){//判斷瀏覽器版本IE7.0以上，或者其它的瀏覽器 return new XMLHttpRequest(); }else{//IE5.0，6.0 return new ActiveXObject("Microsoft.XMLHTTP"); }}</script></head><body> <form action="doGetU" method="get"> <table> <tr> <td>請選擇用戶:</td> <td style="width:150px"><select name="user" onchange="checkUser(this);"> <option value="accp">accp</option> <option value="test">test</option> </select></td> </tr> <tr> <td>用戶名:</td> <td><input type="text" id="username" style="width: 150px" /> </td> </tr> </table> </form></body></html>新聞熱點
疑難解答
