导读:
今天在各种资源的帮助下,做了一个小AJAX程序。共享出来,以备后用。其中很多都是不完善的,还望指点。
程序实现一个功能,在文本框内容变化的时候,下面显示不同的内容。
1,先做了一个返回XML文件的JSP。
data.jsp

<%...@ page language="java" contentType="text/xml; charset=UTF-8" import="java.util.*" pageEncoding="UTF-8"%><%...

//获得传入的参数值
String name = request.getParameter("name");
out.println("<?xml version="1.0" encoding="UTF-8"?>");
out.println("<results>");
if ("a".equals(name)){
out.println("<rs>my1</rs>");
}else{
if("b".equals(name)){
out.println("<rs>my2</rs>");
}else{
out.println("<rs>my3</rs>");
}}
out.println("</results>");
%>
在传入的参数值不同的情况下,返回不同的XML。
传入a情况下,返回
<?xml version="1.0" encoding="UTF-8" ?>
<results>
<rs>my1</rs>
</results>
传入b情况下,返回
<?xml version="1.0" encoding="UTF-8" ?>
<results>
<rs>my2</rs>
</results>
传入c情况下,返回
<?xml version="1.0" encoding="UTF-8" ?>
<results>
<rs>my3</rs>
</results>
2,主体部分。
先看一下整个JSP文件。
MyAjax.jsp

<%...@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<html>
<head>
<title>My JSP 'MyAjax.jsp' starting page</title>


<script type="text/javascript">...

function ajaxtest()...{

//新建XMLHttpRequest对象

//适合firefox之类
if (window.XMLHttpRequest)

...{
var myXmlhttp = new XMLHttpRequest();

}else...{

//适全IE的
var myXmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
var name = document.getElementById("text1");

//打开XMLHttpRequest对象
myXmlhttp.open("GET","http://localhost:8080/jsptest/data.jsp?name="+name.value,true);

//下面这个用法,见注1

myXmlhttp.onreadystatechange = function() ...{

if(myXmlhttp.readyState == 4&&myXmlhttp.status == 200)...{
DoMyXML(myXmlhttp);
}
}
myXmlhttp.send(null);
}

function DoMyXML(xmlObj) ...{
var rtnvalue;
var xmlDoc = xmlObj.responseXML;
rtnvalue=xmlDoc.getElementsByTagName("rs")[0].firstChild.data;
text2.innerHTML = rtnvalue;
}
</script>

</head>
<body>
<table>
<tr>
<td>
<input type="text" name="text1" id="text1" onBlur="ajaxtest();">
<div id="text2"></div>
</td>
</tr>
</table>
</body>
</html>

注1:
事件:每当readyState的值发生改变时,就是产生了一个事件。事件处理的函数句柄:我们可以选择在事件产生以后,如何处理。这个处理的函数,我们必须告诉这个XMLHttpRequest对象。这里借用了C语言中的函数句柄的概念。将这个函数的句柄,在JavaScript中也就是这个函数的名称,赋值给XMLHttpRequest对象中的onreadystatechange,就可以了。(注:这里其实是创建了一个匿名的函数,onreadystatechange只是属性名称,而不是函数名称。函数在JavaScript中是第一等的对象,可以赋值给任何变量。Java开发人员尤其需要注意!)
今天在各种资源的帮助下,做了一个小AJAX程序。共享出来,以备后用。其中很多都是不完善的,还望指点。
程序实现一个功能,在文本框内容变化的时候,下面显示不同的内容。
1,先做了一个返回XML文件的JSP。
data.jsp


















在传入的参数值不同的情况下,返回不同的XML。
传入a情况下,返回





传入b情况下,返回





传入c情况下,返回





2,主体部分。
先看一下整个JSP文件。
MyAjax.jsp

































































注1:
事件:每当readyState的值发生改变时,就是产生了一个事件。事件处理的函数句柄:我们可以选择在事件产生以后,如何处理。这个处理的函数,我们必须告诉这个XMLHttpRequest对象。这里借用了C语言中的函数句柄的概念。将这个函数的句柄,在JavaScript中也就是这个函数的名称,赋值给XMLHttpRequest对象中的onreadystatechange,就可以了。(注:这里其实是创建了一个匿名的函数,onreadystatechange只是属性名称,而不是函数名称。函数在JavaScript中是第一等的对象,可以赋值给任何变量。Java开发人员尤其需要注意!)