核心提示：初学AJAX，简单的实现了一个小案例：web界面提供两个文本输入框，两个按钮和一个DIV盒子，将文本输入框输入的内容显示到DIV中。这里使用两种提交方式：一种GET提交方式，一种POST提交方式。AJ...
初学AJAX，简单的实现了一个小案例：web界面提供两个文本输入框，两个按钮和一个DIV盒子，将文本输入框输入的内容显示到DIV中。这里使用两种提交方式：一种GET提交方式，一种POST提交方式。
AJAX = Asynchronous JavaScript and XML(异步的 javascript 和 XML)。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许javascript在浏览器上执行。
这个案例我们使用Myeclipse编写，首先创建一个index.jsp页面，在head里面写入下面这段代码：
<script type="text/javascript">
//获得AJAX的XMLHttpRequest对象
var xmlHttp;
function createXHR(){
if(window.ActiveXObject){
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{
xmlHttp=new XMLHttpRequest();
}
}
//创建回调函数将服务器返回的值显示到DIV当中（也就是处理服务器端响应的内容）
function requestCallBack(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var content=xmlHttp.responseText;
document.getElementById("content").innerHTML=content;
}
}
}
//按钮的GET提交方法（GET提交方法是将内容通过url发送出去的）
function setGET(){
//获取XMLHttpRequest对象
createXHR();
//根据document对象的getElementById方法获取第一个文本输入框的内容
var username=document.getElementById("username").value;
//根据document对象的getElementById方法获取第二个文本输入框的内容
var age=document.getElementById("age").value;
//将两个文本输入框的内容拼接为一个字符串
var queryStr="username="+username+"&age="+age;
//提供发送的url
var url="login.jsp?"+queryStr+"&stampTime:"+new Date().getTime();
//使用XMLHttpRequest对象的open方法初始化参数（提交方式，url,是否异步）
xmlHttp.open("GET", url,true)
//将初始化的参数发送出去
xmlHttp.send(null);
//调用回调函数
xmlHttp.onreadystatechange=requestCallBack;
}
//按钮的POST提交方法
function setPOST(){
//获取XMLHttpRequest对象
createXHR();
//根据document对象的getElementById方法获取第一个文本输入框的内容
var username=document.getElementById("username").value;
//根据document对象的getElementById方法获取第二个文本输入框的内容
var age=document.getElementById("age").value;
//将两个文本输入框的内容拼接为一个字符串
var queryStr="username="+username+"&age="+age;
//提供发送的url
var url="login.jsp?"+"stampTime:"+new Date().getTime();
//使用XMLHttpRequest对象的open方法初始化参数（提交方式，url,是否异步）
xmlHttp.open("POST", url,true)
//设置请求头来设置以表单的形式来提交内容信息
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//将要发送的信息发送出去
xmlHttp.send(queryStr);
//调用回调函数
xmlHttp.onreadystatechange=requestCallBack;
}
</script>
在body里面提供两个文本输入框、两个按钮和一个DIV盒子。代码如下：
<body>
<!-- 姓名输入框 -->
姓名：<input type="text" name="username" id="username"><br>
<!-- 年龄输入框 -->
年龄：<input type="text" name="age" id="age"><br>
<!-- 按钮的两种提交方式 -->
<input type="button" value="GET" onclick="setGET()"><input type="button" value="PSOT" onclick="setPOST()">
<!-- 将局部刷新的内容显示到DIV当中 -->
<p id="content"></p>
</body>
然后新建一个login.jsp(名字可以自己取)页面当作服务器，为了简便在jsp界面中直接写入Java代码。代码如下：
<% //服务器获取文本框输入的内容
String username=request.getParameter("username");
String age=request.getParameter("age");
//判断提交方式
if(request.getMethod().equals("GET")){
out.println("GET:"+"username:"+username+",age:"+age);
}else{
out.println("POST:"+"username:"+username+",age:"+age);
}
%>
