AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
客户端
function invitePlayer(){
//Ajax发送邀请
inviting=true;
canBeInvited=false;
var xmlhttp;
if(window.ActiveXObject){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{
// code for IE6, IE5
xmlhttp=new XMLHttpRequest();
}
document.getElementById("show").innerHTML="at the begin";
//当xmlhttp.send();调用此方法 ,分别调用4次 就是readyState有4个状态
xmlhttp.onreadystatechange=sendXMLHttp;
document.getElementById("show").innerHTML="setfunc";
xmlhttp.open("GET","http://localhost:8080/ch02/invite_player.jsp?account=c"+"&id=g",true); //需要修改
document.getElementById("show").innerHTML="open";
xmlhttp.send();
document.getElementById("show").innerHTML="send";
alert("At the end");
}
function sendXMLHttp(){
alert("getResponese");
if(xmlhttp.readyState==4&&xmlhttp.status==200){
// xmlhttp.readyState=0 未初始化 : 1 读取中; 2 已读取; 3 交互中; 4完成;
//xmlhttp.status: 404 表示文件没有找到;200 服务器数据返回成功; 0 表示本地数据返回成功;
//xmlDoc=xmlhttp.responseXML;
var response=xmlhttp.responseText;
if(response=="OK"){
startGame();
}
}
}
服务器端(仅仅作为测试):
<%@page contentType="text/html;charset=gbk" %>
<%@page language="java" import="java.sql.*" %>
<%
//设置提交表单的中文编码
request.setCharacterEncoding("GBK");
String account,invite_id;
account=request.getParameter("account");
invite_id=request.getParameter("id");
Connection conn=null;
Statement stmt=null;
ResultSet rs=null;
out.print("OK");
%>
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
在Ajax的返回值中总会莫名其妙地带着几个换行,可以使用以下方法,进行处理
在jsp页面中每一个回车换行都会产生一个空行,
在你要输出你想要的内容之前调用out.clear();
这样还不行,就:
xmlHttp.responseText.replace(/\r\n/g,"");