java配合ajax加快发展_配合JAVA的AJAX使用
概要
Ajax是“Asynchronous JavaScript and XML”的簡稱，即異步的JavaScript和XML。
readyState屬性用來返回當前的請求狀態，有五個可選值。分別是0到4，每個值的含義如下描述。 0：“未初始化”狀態， 表示已經創建一個XMLHttpRequest對象，但是還沒有初始化請求對象。 1：“打開”狀態，表示已經調用了XMLHttpRequest對象的open()方法，已經準備好向服務器端發送請求。 2：“發送”狀態，表示已經調用了XMLHttpRequest對象的send()方法把一個請求發送到服務器端，但是還沒有收到服務器的響應。 3：“正在接收”狀態，表示已經接收到HTTP響應頭的信息，但是消息體部分還沒有完全接收。 4：“已加載”狀態，表示響應已經被完全接收。
status屬性用來返回服務器的響應狀態碼，例如200表示OK，一切正常；404表示請求的文件沒有找到；500表示內部服務器發生錯誤等。
statusText屬性的含義與status屬性非常類似，不過statusText用文本的形式表示服務器的響應狀態，而status以狀態碼的形式表示。例如，statusText值為OK時，表示一切正常，對應status為200；值為Not Found表示文件沒有找到，對應status為404。
onreadystatechange是一個事件觸發器，其值往往是一個JavaScript的函數名。任何一個狀態的變化，不管是readyState還是status的變化，都會觸發該事件，并調用指定的JavaScript函數。
responseText屬性用來接收服務器端返回的文本內容，以一個字符串的形式存在。使用responseText屬性可以直接將返回的內容賦值給某一個域的innerHTML值，顯示到客戶端。
responseXML用來接收服務器的響應，以XML的形式存在，這個對象可以解析為一個DOM對象，進一步使用DOM的API更新客戶端頁面。
GET方式解析XML的AJAX
js代碼：
varxmlHttp;//創建XMLHttpRequest對象
functioncreateXMLHttpRequest() {if (window.ActiveXObject) {//Microsoft
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest) {
xmlHttp= newXMLHttpRequest();
}
}functionvalidate() {//創建xmlHttp對象
createXMLHttpRequest();//使用DOM，得到id值是username的域
var username = document.getElementById("username");var url = "ValidateUsernameServlet?username=" +escape(username.value);//向服務器端的 ValidateUsernameServlet發送異步請求
xmlHttp.open("GET", url, true);//當狀態有變化的時候，調用callback方法
xmlHttp.onreadystatechange =callback;
xmlHttp.send(null);
}functioncallback() {//當客戶端完全接收完服務器的響應后，并且狀態為200，也就是正常
if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//使用responseXML屬性，接收服務器端返回的的XML文件 ，使用DOM解析XML
//用以下二種方式都可以得到頁面上的值
//var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var message = xmlHttp.responseXML.getElementsByTagName("message")[0].childNodes[0].nodeValuevar passed = xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(message, passed);
}
}
}functionsetMessage(message, passed) {//使用DOM得到id值為usernamemsg的域，用來顯示提示信息
var validateMessage = document.getElementById("usernamemsg");var fontColor = "red";if (passed == "true") {
fontColor= "green";
}
validateMessage.innerHTML= "" +message+ " ";
}
servlet代碼：
public class ValidateUsernameServlet extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
doPost(request,response);
}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");boolean flag=true;
String message="";//用戶名可以使用
boolean e=true;if(e == true){
message="用戶名可以使用";
}else{
flag=false;
message="用戶名已經存在，請選擇使用其他用戶名";
}//將校驗的結果，以XML格式返回給客戶端
response.setContentType("text/xml;charset=utf-8");
PrintWriter out=response.getWriter();//禁止緩存 HTTP1.0中通過Pragma 控制頁面緩存,HTTP1.1中啟用Cache-Control 來控制頁面的緩存與否//參數：no-cache，瀏覽器和緩存服務器都不應該緩存頁面信息；
response.setHeader("Cache-Control","no-cache");
out.println("<?xml version=‘1.0‘ encoding=‘"+"utf-8"+"‘ ?>");
out.println("");
out.println("" + flag + "");
out.println("" + message + "");
out.println("");
out.close();
}
}
html代碼根據實際需求編寫，這里不做演示。
POST方式解析XML的AJAX
js代碼：
var xmlHttp;//創建XMLHttpRequest對象
function createXMLHttpRequest() {if(window.ActiveXObject) {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest) {
xmlHttp= newXMLHttpRequest();
}
}
function validate() {//創建xmlHttp對象
createXMLHttpRequest();//使用DOM，得到id值是username的域
var username = document.getElementById("username");
var url= "ValidateUsernameServlet";//向服務器端的 ValidateUsernameServlet發送異步請求
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//當狀態有變化的時候，調用callback方法
xmlHttp.onreadystatechange =callback;
xmlHttp.send("username="+encodeURI(username));
}
function callback() {//當客戶端完全接收完服務器的響應后，并且狀態為200，也就是正常
if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//使用responseXML屬性，接收服務器端返回的的XML文件 ，使用DOM解析XML
var message = xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var passed= xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(message, passed);
}
}
}
function setMessage(message, passed) {//使用DOM得到id值為usernamemsg的域，用來顯示提示信息
var validateMessage = document.getElementById("usernamemsg");
var fontColor= "red";if (passed == "true") {
fontColor= "green";
}
validateMessage.innerHTML= "" + message + " ";
}
servlet代碼與GET方式相同。
POST方式解析文本的AJAX
js代碼：
varxmlHttp;//創建XMLHttpRequest對象
functioncreateXMLHttpRequest() {if(window.ActiveXObject) {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest) {
xmlHttp= newXMLHttpRequest();
}
}functionvalidate() {//創建xmlHttp對象
createXMLHttpRequest();//使用DOM，得到id值是username的域
var username = document.getElementById("username");var url = "ValidateUsernameServlet2";//向服務器端的 ValidateUsernameServlet發送異步請求
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//當狀態有變化的時候，調用callback方法
xmlHttp.onreadystatechange =callback;
xmlHttp.send("username="+encodeURI(username));
}functioncallback() {//當客戶端完全接收完服務器的響應后，并且狀態為200，也就是正常
if (xmlHttp.readyState == 4) {if (xmlHttp.status == 200) {//使用responseXML屬性，接收服務器端返回的的XML文件 ，使用DOM解析XML
var responseText=xmlHttp.responseText;
document.getElementById("usernamemsg").innerHTML=responseText;
}
}
}
servlet代碼：
public class ValidateUsernameServlet2 extendsHttpServlet {public voiddoGet(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
doPost(request, response);
}public voiddoPost(HttpServletRequest request, HttpServletResponse response)throwsServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");boolean flag = true;
String message= "";//用戶名可以使用
boolean e = true;if (e == true) {
message= "用戶名可以使用";
}else{
flag= false;
message= "用戶名已經存在，請選擇使用其他用戶名";
}//將校驗的結果，以XML格式返回給客戶端
response.setContentType("text/xml;charset=utf-8");
PrintWriter out=response.getWriter();//禁止緩存 HTTP1.0中通過Pragma 控制頁面緩存,HTTP1.1中啟用Cache-Control 來控制頁面的緩存與否//參數：no-cache，瀏覽器和緩存服務器都不應該緩存頁面信息；
response.setHeader("Cache-Control", "no-cache");
out.println("" + message + "");
out.flush();
out.close();
}
}
原文：http://www.cnblogs.com/lm970585581/p/7220382.html
總結
以上是生活随笔為你收集整理的java配合ajax加快发展_配合JAVA的AJAX使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： linux中sed命令用例,Linux中
- 下一篇： fiddler如何filter_Fidd