3请求参数作为XML发送
2016-07-12 16:17
141 查看
1完成验证
这个例子的html很简单，其中有一个标准的输入框，响应的onchange()事件会触发验证方法。
我们在validation.jsp中有一个输入框，需要输入MM/dd/yyyy格式的字符串，才可以被转换为在服务端的Action类中被转换为日期。则提示输入的格式valid，否则提示输入的格式invalid。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title> using ajax for validation</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if (window.XMLHttpRequest) { // Mozilla, Safari,...
xmlHttp= new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!xmlHttp) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
}
function validate(){
createXMLHttpRequest();
var date=document.getElementById("birthDate");
var url="ValidationTest.do?birthDate="+escape(date.value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//通过responseXML获得Dom对象，解析从服务器返回的xml串中的<message>节点的内容。
var mes=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes,val);
}
}
}
function setMessage(message,isValid){
var messageArea=document.getElementById("dateMessage");
var fontColor="red";
if(isValid=="true"){
fontColor="green";
}
messageArea.innerHTML="<font color="+fontColor+">"+message+"</font>";
}
</script>
</head>
<body>
<h1>Ajax Validation Example</h1>
Birth date:<input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>
</body>
</html>
ValidationAction.java用于处理客户端输入的日期格式，如果可以被parse为日期，则返回的xml串为：
客户端的xmlHttp.responseXML获取这个xml串，并解析其中的内容。
<response>
<passed>true</passed>
<message>You have entered a valid date</message>
</response>
如果不可用被parse为日期，则返回的xml串为：
<response>
<passed>false</passed>
<message>You have entered a invalid date</message>
</response>
package mypack;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import java.io.*;
import java.text.SimpleDateFormat;
import java.text.ParseException;
public class ValidationAction extends Action{
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception{
PrintWriter out=response.getWriter();
boolean passed=validateDate(request.getParameter("birthDate"));
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
String message="You have entered an invalid date.";
if(passed){
message="You have entered a valid date";
}
out.println("<response>");
out.println("<passed>"+Boolean.toString(passed)+"</passed>");
out.println("<message>"+message+"</message>");
out.println("</response>");
out.close();
return null;
}
private boolean validateDate(String date){
boolean isValid=true;
if(date!=null){
SimpleDateFormat formatter=new SimpleDateFormat("MM/dd/yyyy");
try{
formatter.parse(date);
}catch(ParseException pe){
System.out.println(pe.toString());
isValid=false;
}
}else{
isValid=false;
}
return isValid;
}
}
2读取响应首部
有时可能需要从服务器获取一些内容。可能想ping一下服务器，验证服务器是否正常运行。此时你也许只想读取服务器发出的响应首部。通过读取响应首部，可以得出Content-type(内容类型)，Content-Length(内容长度)甚至Last-Modified(最后一次修改)的日期。
如果只关注响应首部，完成这样的一个请求的标准做法是使用HEAD请求(xmlHttp.open("HEAD",url,true);)，而不是前面讨论的GET或POST请求。当服务器对HEAD请求作出响应时，它只发送响应首部而忽略内容。即使可以向浏览器返回所请求的内容，也不会真的把内容返回。
下例在readingResponseHeaders.jsp中，我们发送一个HEAD请求，然后通过getAllResponseHeader()获取服务器响应的首部。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Reading Response Headers</title>
<script type="text/javascript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
//创建XMLHttpRequest对象xmlHttp,这里省略。
}
,
function doHeadRequest(request,url){
requestType=request;
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
//发送一个HEAD请求,请求服务器上的innerHTML.xml,服务器会返回关于innerHTML.xml的长度，最后修改时间等信息。
xmlHttp.open("HEAD",url,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(requestType=="allResponseHeaders"){
getAllResponseHeaders();
}
}
}
//通过getAllResponseHeader()获取服务器响应的首部信息
function getAllResponseHeaders(){
alert(xmlHttp.getAllResponseHeaders());
}
</script>
</head>
<body>
<h1>Reading Response Headers</h1>
<a href="javascript:doHeadRequest('allResponseHeaders','innerHTML.xml');">Read All Response headers</a>
</body>
</html>
3动态加载列表框
下例中通过在车型年份modelYear和品牌make的<select>中选在不同的年份和品牌，服务器根据不同的年份和品牌返回相应的车型(xml格式)，客户端读取响应并将车型更新显示在models的<select>元素中。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Dynamically Filling Lists</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
//创建XMLHttpRequest对象
}
function refreshModelList(){
//向服务器传递所选择的车型年份和品牌
var make=document.getElementById("make").value;
var modleYear=document.getElementById("modelYear").value;
if(make==""||modelYear==""){
clearModelsList();
return;
}
var url="RefreshModelList.do?"+createQueryString(make,modelYear)+"&ts="+new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange("GET",url,true);
xmlHttp.send(null);
}
function createQueryString(mak,modelYear){
var queryString="make="+make+"&modelYear="+modelYear;
return queryString;
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//当服务器正常返回响应后，更新Models元素
updateModelsList();
}
}
}
function updateModelsList(){
//更新<select>元素的内容。
clearModelsList();
var models=document.getElementById("models");
var results=xmlHttp.responseXML.getElementsByTagName("model");
var option=null;
for(var i=0;i<results.length;i++){
option=document.createElement("option");
option.appendChild(document.createTextNode(result[i].firstChild.nodeValue));
models.appendChild(option);
}
}
function clearModelsList(){
//清除Models中的所有option元素
var models=document.getElementById("models");
while(models.childNodes.length>0){
models.removeChild(models.childNodes[0]);
}
}
</script>
</head>
<body>
<h1>select Model Year and Make</h1>
<form>
<span style="font-weight:bold;">Model Year:</span>
<select id="modelYear" onchange="refreshModelList()">
<option value="">Select One</option>
<option value="2006">2006</option>
<option value="1995">1995</option>
<option value="1985">1985</option>
<option value="1985">1985</option>
</select>
<br/><br/>
<span style="font-weight:bold;">make:</span>
<select id="make" onchange="refreshModelList();">
<option value="">Select One</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Pontiac">Pontiac</option>
</select>
<br/><br/>
<span style="font-weight:bold;">Models:</span>
<br/>
<select id="models" size="6" style="width:300px;">
</select>
</form>
</body>
</html>
4创建自动刷新页面
股票行情，天气数据，标题新闻....这些都是经常改变的数据，但是不值得为这些数据的修改手工地完全刷新页面。
下例dynamicUpdate.jsp使用setTimeout每个5秒向服务器请求并将响应添加到表格中。
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
//创建XMLHttpRequest对象
}
function pollServer(){
createXMLHttpRequest();
var url="DynamicUpdate.do";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=pollCallback;
xmlHttp.send(null);
}
//刷新时间显示。
function refreshTime(){
var time_span=document.getElementById("time");
var time_val=time_span.innerHTML;
var int_val=parseInt(time_val);
var new_int_val=int_val-1;
if(new_int_val> -1){
setTimeout("refreshTime()",1000);
time_span.innerHTML=new_int_val;
}else{
time_span.innerHTML=5;
}
}
//将服务器的响应添加的表格行中。如果服务器响应done就结束。
function pollCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
if(message!="done"){
var new_row=createRow(message);
var table=document.getElementById("dynamicUpdateArea");
var table_body=document.getElementById("tb");
var first_row=document.getElementById("row0");
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",5000);
refreshTime();
}
}}}
//创建一个表格行。
function createRow(message){
var row=document.createElement("tr");
var cell=document.createElement("td");
var cell_data=document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Lauch" id="go" onclick="pollServer();"/>
<p>
Page will refresh in <span id="time">5</span> seconds
</p>
//将服务器的响应添加的表格的每一行
<table id="dynamicUpdateAra" align="left">
<tbody id="tb">
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
5进度条
progressBar.jsp将每个2秒从服务器获取当前的进度值。
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color="gray";
var span_id="block";
var clear=" ";
function createXMLHttpRequest(){
//创建XMLHttpRequest对象
}
function pollServer(){
createXMLHttpRequest();
checkDiv();
var url="ProgressBar.do";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=pollCallback;
xmlHttp.send(null);
}
function pollCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var percent_complete=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var index=processResult(percent_complete);
//根据进度值大小，同过将背景色置为灰色显示进度，
for(var i=1;i<=index;i++){
var elem=document.getElementById("block"+i);
elem.innerHTML=clear;
elem.style.backgroundColor=bar_color;
var next_cell=i+1;
if(next_cell>index&&next_cell<=10){
document.getElementById("block"+next_cell).innerHTML=percent_complete+"%";
}
}
//每个2秒从服务器端获取进度值，当index=10说明进度为100%。
if(index<=9){
setTimeout("pollServer()",2000);
}else{
document.getElementById("complete").innerHTML="Complete!";
document.getElementById("go").disabled=false;
}
}}}
//当percent_complete为长度大于2，则其值为100。
function processResult(percent_complete){
var ind;
if(percent_complete.length==1){
ind=1;
}else if(percent_complete.length==2){
ind=percent_complete.substring(0,1);
}else{
ind=10;
}
return ind;
}
function checkDiv(){
var progress_bar=document.getElementById("progressBar");
if(progress_bar.style.visibility=="visible"){
clearBar();
document.getElementById("complete").innerHTML="";
}else{
progress_bar.style.visibility="visible";
}
}
//进度条背景为白色，相当于隐藏了。
function clearBar(){
for(var i=1;i<=10;i++){
var elem=document.getElementById("block"+i);
elem.innerHTML=clear;
elem.style.backgroundColor="white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Lauch long-running process;
<input type="button" value="Lauch" id="go" onclick="pollServer();"/>
<br>
//进度条，默认为hidden
<table align="center">
<tbody id="tb">
<tr><td><div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
<span id="block10"> </span>
</div></td></tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
服务器端返回进度值：
package mypack;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import java.io.*;
public class ProgressBarAction extends Action{
private int counter=1;
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception{
String res="";
String percent="";
//每次客户端调用counter回自加1，然后服务端返回10，20,...表示当前进度。
switch(counter){
case 1:percent="10";break;
case 2:percent="20";break;
case 3:percent="30";break;
case 4:percent="40";break;
case 5:percent="50";break;
case 6:percent="60";break;
case 7:percent="70";break;
case 8:percent="80";break;
case 9:percent="90";break;
case 10:percent="100";break;
}
counter++;
res="<message>"+percent+"</message>";
PrintWriter out=response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
return null;
}
}
6创建工具提示
下例中的ToolTip.jsp中，主要实现当鼠标划过某元素时，元素的右端显示服务端的有关该元素的信息。
这里主要用到javascript的定位。如何将元素信息的div，定位在发生事件的元素右端。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Ajax Tool Tip</title>
<script type="text/javascript">
var xmlHttp;
var dataDiv;
var dataTable;
var dataTableBody;
var eventE;
function createXMLHttpRequest(){
if (window.XMLHttpRequest) { // Mozilla, Safari,...
//创建XMLHttpRquest
}
function initVars(){
dataTableBody=document.getElementById("courseDataBody");
dataTable=document.getElementById("courseData");
dataDiv=document.getElementById("popup");
}
function getCourseData(element){
createXMLHttpRequest();
eventE=element;
//无论我们是否使用escape方法，服务端都可以通过getParameter("key")获得key的值
var url="ToolTip.do?key="+escape(element.id);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
initVars();
var par=xmlHttp.responseXML.getElementsByTagName("par")[0].firstChild.data;
//从服务端读取信息
var row;
var parData="Par:"+par;
row=createRow(parData);
dataTableBody.appendChild(row);
var left = 0;
var top = 0;
//获取发生mouseover事件单元格的宽度(offsetWidth)。
var w=eventE.offsetWidth;
//通过while遍历，我们将得到元素在body中的坐标。
while (eventE.offsetParent){
left +=eventE.offsetLeft;
top +=eventE.offsetTop;
eventE=eventE.offsetParent;
}
//重新定义div(popup)的位置并显示它在元素的右端。
dataDiv.style.left=left+w+"px";
dataDiv.style.top=top+"px";
dataDiv.style.display="block";
}
}
}
//创建表格行
function createRow(data){
var row,cell,txtNode;
row=document.createElement("tr");
cell=document.createElement("td");
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border","0");
txtNode=document.createTextNode(data);
cell.appendChild(txtNode);
row.appendChild(cell);
return row;
}
//清除表格中的数据并在鼠标移走时取消显示信息的div
function clearData(){
initVars();
while(dataTableBody.childNodes.length>0){
dataTableBody.removeChild(dataTableBody.childNodes[0]);
}
dataDiv.style.display="none";
}
</script>
</head>
<body>
<h1>Ajax Tool tip Example</h1>
<h3>Golf Courses</h3>
<table id="courses" bgcolor="#FFFAFA" border="1" cellpadding="0" cellpadding="2"/>
<tr><td id="1" onmouseover="getCourseData(this);" onmouseout="clearData();">Augusta Natinal</td></tr>
<tr><td id="2" onmouseover="getCourseData(this);" onmouseout="clearData();">Pinehurset No.2</td></tr>
<tr><td id="3" onmouseover="getCourseData(this);" onmouseout="clearData();">St. Andrews Links</td></tr>
<tr><td id="4" onmouseover="getCourseData(this);" onmouseout="clearData();">Baltusrol Golf Club</td></tr>
</tbody>
</table>
<div style="position:absolute;display:none;background-color:#cccccc;width:60px;height:60px" id="popup">
<table id="courseData" cellspacing="2" cellpadding="2"/>
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>
这个例子的html很简单，其中有一个标准的输入框，响应的onchange()事件会触发验证方法。
我们在validation.jsp中有一个输入框，需要输入MM/dd/yyyy格式的字符串，才可以被转换为在服务端的Action类中被转换为日期。则提示输入的格式valid，否则提示输入的格式invalid。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title> using ajax for validation</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if (window.XMLHttpRequest) { // Mozilla, Safari,...
xmlHttp= new XMLHttpRequest();
if (xmlHttp.overrideMimeType) {
xmlHttp.overrideMimeType('text/xml');
}
} else if (window.ActiveXObject) { // IE
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!xmlHttp) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
}
function validate(){
createXMLHttpRequest();
var date=document.getElementById("birthDate");
var url="ValidationTest.do?birthDate="+escape(date.value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//通过responseXML获得Dom对象，解析从服务器返回的xml串中的<message>节点的内容。
var mes=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var val=xmlHttp.responseXML.getElementsByTagName("passed")[0].firstChild.data;
setMessage(mes,val);
}
}
}
function setMessage(message,isValid){
var messageArea=document.getElementById("dateMessage");
var fontColor="red";
if(isValid=="true"){
fontColor="green";
}
messageArea.innerHTML="<font color="+fontColor+">"+message+"</font>";
}
</script>
</head>
<body>
<h1>Ajax Validation Example</h1>
Birth date:<input type="text" size="10" id="birthDate" onchange="validate();"/>
<div id="dateMessage"></div>
</body>
</html>
ValidationAction.java用于处理客户端输入的日期格式，如果可以被parse为日期，则返回的xml串为：
客户端的xmlHttp.responseXML获取这个xml串，并解析其中的内容。
<response>
<passed>true</passed>
<message>You have entered a valid date</message>
</response>
如果不可用被parse为日期，则返回的xml串为：
<response>
<passed>false</passed>
<message>You have entered a invalid date</message>
</response>
package mypack;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import java.io.*;
import java.text.SimpleDateFormat;
import java.text.ParseException;
public class ValidationAction extends Action{
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception{
PrintWriter out=response.getWriter();
boolean passed=validateDate(request.getParameter("birthDate"));
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
String message="You have entered an invalid date.";
if(passed){
message="You have entered a valid date";
}
out.println("<response>");
out.println("<passed>"+Boolean.toString(passed)+"</passed>");
out.println("<message>"+message+"</message>");
out.println("</response>");
out.close();
return null;
}
private boolean validateDate(String date){
boolean isValid=true;
if(date!=null){
SimpleDateFormat formatter=new SimpleDateFormat("MM/dd/yyyy");
try{
formatter.parse(date);
}catch(ParseException pe){
System.out.println(pe.toString());
isValid=false;
}
}else{
isValid=false;
}
return isValid;
}
}
2读取响应首部
有时可能需要从服务器获取一些内容。可能想ping一下服务器，验证服务器是否正常运行。此时你也许只想读取服务器发出的响应首部。通过读取响应首部，可以得出Content-type(内容类型)，Content-Length(内容长度)甚至Last-Modified(最后一次修改)的日期。
如果只关注响应首部，完成这样的一个请求的标准做法是使用HEAD请求(xmlHttp.open("HEAD",url,true);)，而不是前面讨论的GET或POST请求。当服务器对HEAD请求作出响应时，它只发送响应首部而忽略内容。即使可以向浏览器返回所请求的内容，也不会真的把内容返回。
下例在readingResponseHeaders.jsp中，我们发送一个HEAD请求，然后通过getAllResponseHeader()获取服务器响应的首部。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Reading Response Headers</title>
<script type="text/javascript">
var xmlHttp;
var requestType="";
function createXMLHttpRequest(){
//创建XMLHttpRequest对象xmlHttp,这里省略。
}
,
function doHeadRequest(request,url){
requestType=request;
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange;
//发送一个HEAD请求,请求服务器上的innerHTML.xml,服务器会返回关于innerHTML.xml的长度，最后修改时间等信息。
xmlHttp.open("HEAD",url,true);
xmlHttp.send(null);
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(requestType=="allResponseHeaders"){
getAllResponseHeaders();
}
}
}
//通过getAllResponseHeader()获取服务器响应的首部信息
function getAllResponseHeaders(){
alert(xmlHttp.getAllResponseHeaders());
}
</script>
</head>
<body>
<h1>Reading Response Headers</h1>
<a href="javascript:doHeadRequest('allResponseHeaders','innerHTML.xml');">Read All Response headers</a>
</body>
</html>
3动态加载列表框
下例中通过在车型年份modelYear和品牌make的<select>中选在不同的年份和品牌，服务器根据不同的年份和品牌返回相应的车型(xml格式)，客户端读取响应并将车型更新显示在models的<select>元素中。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Dynamically Filling Lists</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
//创建XMLHttpRequest对象
}
function refreshModelList(){
//向服务器传递所选择的车型年份和品牌
var make=document.getElementById("make").value;
var modleYear=document.getElementById("modelYear").value;
if(make==""||modelYear==""){
clearModelsList();
return;
}
var url="RefreshModelList.do?"+createQueryString(make,modelYear)+"&ts="+new Date().getTime();
createXMLHttpRequest();
xmlHttp.onreadystatechange=handleStateChange("GET",url,true);
xmlHttp.send(null);
}
function createQueryString(mak,modelYear){
var queryString="make="+make+"&modelYear="+modelYear;
return queryString;
}
function handleStateChange(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//当服务器正常返回响应后，更新Models元素
updateModelsList();
}
}
}
function updateModelsList(){
//更新<select>元素的内容。
clearModelsList();
var models=document.getElementById("models");
var results=xmlHttp.responseXML.getElementsByTagName("model");
var option=null;
for(var i=0;i<results.length;i++){
option=document.createElement("option");
option.appendChild(document.createTextNode(result[i].firstChild.nodeValue));
models.appendChild(option);
}
}
function clearModelsList(){
//清除Models中的所有option元素
var models=document.getElementById("models");
while(models.childNodes.length>0){
models.removeChild(models.childNodes[0]);
}
}
</script>
</head>
<body>
<h1>select Model Year and Make</h1>
<form>
<span style="font-weight:bold;">Model Year:</span>
<select id="modelYear" onchange="refreshModelList()">
<option value="">Select One</option>
<option value="2006">2006</option>
<option value="1995">1995</option>
<option value="1985">1985</option>
<option value="1985">1985</option>
</select>
<br/><br/>
<span style="font-weight:bold;">make:</span>
<select id="make" onchange="refreshModelList();">
<option value="">Select One</option>
<option value="Chevrolet">Chevrolet</option>
<option value="Dodge">Dodge</option>
<option value="Pontiac">Pontiac</option>
</select>
<br/><br/>
<span style="font-weight:bold;">Models:</span>
<br/>
<select id="models" size="6" style="width:300px;">
</select>
</form>
</body>
</html>
4创建自动刷新页面
股票行情，天气数据，标题新闻....这些都是经常改变的数据，但是不值得为这些数据的修改手工地完全刷新页面。
下例dynamicUpdate.jsp使用setTimeout每个5秒向服务器请求并将响应添加到表格中。
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
//创建XMLHttpRequest对象
}
function pollServer(){
createXMLHttpRequest();
var url="DynamicUpdate.do";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=pollCallback;
xmlHttp.send(null);
}
//刷新时间显示。
function refreshTime(){
var time_span=document.getElementById("time");
var time_val=time_span.innerHTML;
var int_val=parseInt(time_val);
var new_int_val=int_val-1;
if(new_int_val> -1){
setTimeout("refreshTime()",1000);
time_span.innerHTML=new_int_val;
}else{
time_span.innerHTML=5;
}
}
//将服务器的响应添加的表格行中。如果服务器响应done就结束。
function pollCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var message=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
if(message!="done"){
var new_row=createRow(message);
var table=document.getElementById("dynamicUpdateArea");
var table_body=document.getElementById("tb");
var first_row=document.getElementById("row0");
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",5000);
refreshTime();
}
}}}
//创建一个表格行。
function createRow(message){
var row=document.createElement("tr");
var cell=document.createElement("td");
var cell_data=document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
return row;
}
</script>
</head>
<body>
<h1>Ajax Dynamic Update Example</h1>
This page will automatically update itself:
<input type="button" value="Lauch" id="go" onclick="pollServer();"/>
<p>
Page will refresh in <span id="time">5</span> seconds
</p>
//将服务器的响应添加的表格的每一行
<table id="dynamicUpdateAra" align="left">
<tbody id="tb">
<tr id="row0"><td></td></tr>
</tbody>
</table>
</body>
</html>
5进度条
progressBar.jsp将每个2秒从服务器获取当前的进度值。
<html>
<head>
<title>Ajax Dynamic Update</title>
<script type="text/javascript">
var xmlHttp;
var key;
var bar_color="gray";
var span_id="block";
var clear=" ";
function createXMLHttpRequest(){
//创建XMLHttpRequest对象
}
function pollServer(){
createXMLHttpRequest();
checkDiv();
var url="ProgressBar.do";
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=pollCallback;
xmlHttp.send(null);
}
function pollCallback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
var percent_complete=xmlHttp.responseXML.getElementsByTagName("message")[0].firstChild.data;
var index=processResult(percent_complete);
//根据进度值大小，同过将背景色置为灰色显示进度，
for(var i=1;i<=index;i++){
var elem=document.getElementById("block"+i);
elem.innerHTML=clear;
elem.style.backgroundColor=bar_color;
var next_cell=i+1;
if(next_cell>index&&next_cell<=10){
document.getElementById("block"+next_cell).innerHTML=percent_complete+"%";
}
}
//每个2秒从服务器端获取进度值，当index=10说明进度为100%。
if(index<=9){
setTimeout("pollServer()",2000);
}else{
document.getElementById("complete").innerHTML="Complete!";
document.getElementById("go").disabled=false;
}
}}}
//当percent_complete为长度大于2，则其值为100。
function processResult(percent_complete){
var ind;
if(percent_complete.length==1){
ind=1;
}else if(percent_complete.length==2){
ind=percent_complete.substring(0,1);
}else{
ind=10;
}
return ind;
}
function checkDiv(){
var progress_bar=document.getElementById("progressBar");
if(progress_bar.style.visibility=="visible"){
clearBar();
document.getElementById("complete").innerHTML="";
}else{
progress_bar.style.visibility="visible";
}
}
//进度条背景为白色，相当于隐藏了。
function clearBar(){
for(var i=1;i<=10;i++){
var elem=document.getElementById("block"+i);
elem.innerHTML=clear;
elem.style.backgroundColor="white";
}
}
</script>
</head>
<body>
<h1>Ajax Progress Bar Example</h1>
Lauch long-running process;
<input type="button" value="Lauch" id="go" onclick="pollServer();"/>
<br>
//进度条，默认为hidden
<table align="center">
<tbody id="tb">
<tr><td><div id="progressBar" style="padding:2px;border:solid black 2px;visibility:hidden">
<span id="block1"> </span>
<span id="block2"> </span>
<span id="block3"> </span>
<span id="block4"> </span>
<span id="block5"> </span>
<span id="block6"> </span>
<span id="block7"> </span>
<span id="block8"> </span>
<span id="block9"> </span>
<span id="block10"> </span>
</div></td></tr>
<tr><td align="center" id="complete"></td></tr>
</tbody>
</table>
</body>
</html>
服务器端返回进度值：
package mypack;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.struts.action.ActionForm;
import org.apache.struts.action.Action;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.ActionMapping;
import java.io.*;
public class ProgressBarAction extends Action{
private int counter=1;
public ActionForward execute(
ActionMapping mapping,
ActionForm form,
HttpServletRequest request,
HttpServletResponse response)
throws Exception{
String res="";
String percent="";
//每次客户端调用counter回自加1，然后服务端返回10，20,...表示当前进度。
switch(counter){
case 1:percent="10";break;
case 2:percent="20";break;
case 3:percent="30";break;
case 4:percent="40";break;
case 5:percent="50";break;
case 6:percent="60";break;
case 7:percent="70";break;
case 8:percent="80";break;
case 9:percent="90";break;
case 10:percent="100";break;
}
counter++;
res="<message>"+percent+"</message>";
PrintWriter out=response.getWriter();
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
out.println(res);
out.println("</response>");
out.close();
return null;
}
}
6创建工具提示
下例中的ToolTip.jsp中，主要实现当鼠标划过某元素时，元素的右端显示服务端的有关该元素的信息。
这里主要用到javascript的定位。如何将元素信息的div，定位在发生事件的元素右端。
<%@ page language="java" contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Ajax Tool Tip</title>
<script type="text/javascript">
var xmlHttp;
var dataDiv;
var dataTable;
var dataTableBody;
var eventE;
function createXMLHttpRequest(){
if (window.XMLHttpRequest) { // Mozilla, Safari,...
//创建XMLHttpRquest
}
function initVars(){
dataTableBody=document.getElementById("courseDataBody");
dataTable=document.getElementById("courseData");
dataDiv=document.getElementById("popup");
}
function getCourseData(element){
createXMLHttpRequest();
eventE=element;
//无论我们是否使用escape方法，服务端都可以通过getParameter("key")获得key的值
var url="ToolTip.do?key="+escape(element.id);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
initVars();
var par=xmlHttp.responseXML.getElementsByTagName("par")[0].firstChild.data;
//从服务端读取信息
var row;
var parData="Par:"+par;
row=createRow(parData);
dataTableBody.appendChild(row);
var left = 0;
var top = 0;
//获取发生mouseover事件单元格的宽度(offsetWidth)。
var w=eventE.offsetWidth;
//通过while遍历，我们将得到元素在body中的坐标。
while (eventE.offsetParent){
left +=eventE.offsetLeft;
top +=eventE.offsetTop;
eventE=eventE.offsetParent;
}
//重新定义div(popup)的位置并显示它在元素的右端。
dataDiv.style.left=left+w+"px";
dataDiv.style.top=top+"px";
dataDiv.style.display="block";
}
}
}
//创建表格行
function createRow(data){
var row,cell,txtNode;
row=document.createElement("tr");
cell=document.createElement("td");
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border","0");
txtNode=document.createTextNode(data);
cell.appendChild(txtNode);
row.appendChild(cell);
return row;
}
//清除表格中的数据并在鼠标移走时取消显示信息的div
function clearData(){
initVars();
while(dataTableBody.childNodes.length>0){
dataTableBody.removeChild(dataTableBody.childNodes[0]);
}
dataDiv.style.display="none";
}
</script>
</head>
<body>
<h1>Ajax Tool tip Example</h1>
<h3>Golf Courses</h3>
<table id="courses" bgcolor="#FFFAFA" border="1" cellpadding="0" cellpadding="2"/>
<tr><td id="1" onmouseover="getCourseData(this);" onmouseout="clearData();">Augusta Natinal</td></tr>
<tr><td id="2" onmouseover="getCourseData(this);" onmouseout="clearData();">Pinehurset No.2</td></tr>
<tr><td id="3" onmouseover="getCourseData(this);" onmouseout="clearData();">St. Andrews Links</td></tr>
<tr><td id="4" onmouseover="getCourseData(this);" onmouseout="clearData();">Baltusrol Golf Club</td></tr>
</tbody>
</table>
<div style="position:absolute;display:none;background-color:#cccccc;width:60px;height:60px" id="popup">
<table id="courseData" cellspacing="2" cellpadding="2"/>
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- XHTML 是以 XML 格式编写的 HTML
- 初步学习JS中的闭包
- Jquery与CSS选择器参考手册
- 压缩一个文件夹
- Linux驱动子系统之I2C(3)
- Python特殊语法：filter、map、reduce、lambda
- 用Python求A+B+C
- JPA学习笔记（4）——使用Table策略来生成主键
- 1Ajax的简单
- 2使用XMLHttpRequest对象
- 3请求参数作为XML发送
- 升级OS X 10.11后CocoaPods的安装（问题与解决方法）
- SpringMVC+Spring4+Mybatis3整合实例
- 从应用到平台 – 云服务架构的演进过程
- Yii隐藏URL中index.php的方法
- SqlServer设置
- Centos7 安装Oracle 11g R2完整手册及问题解决方法
- hdu_5555_Immortality of Frog(状压DP)
- 在visual box上安装ubuntu
- JPA学习笔记（3）——JPA注解