AJAX学习手记

本文介绍了一个简单的AJAX程序实例,通过JSP页面接收输入并在后台处理,根据不同输入返回不同XML响应,再利用AJAX获取并解析这些XML数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

导读:
  今天在各种资源的帮助下,做了一个小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开发人员尤其需要注意!)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值