Ajax的简单实例XmlHttpRequest

yinbaicheng

浏览: 55989 次
性别:
来自: 南京

最近访客更多访客>>

17828895365

java.jinzhu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

ajax基础

Ajax Java JSP XML IE

1.---->ajax.jsp代码如下：

 <%@ page language="java" pageEncoding="GBK"%>
 
<%
 	String s1 = request.getParameter("s1");
 	String s2 = request.getParameter("s2");
 	boolean flag=false;
 	String r=null;
 	Double x=null,y=null;
 	
    try{
       x=new Double(s1);    //判断字符是不是数字？
       y=new Double(s2);
      flag=true;
    }catch(Exception e){
      flag=false;
    }
    if(flag)
      r=String.valueOf(x.doubleValue()+y.doubleValue());
    else
	  r=s1+s2;
	         //上面尽作演示用的，其实可以放到java类中，然后在这里直接调用
	         //这里可以调用java类函数，上面import class
	         //to_add 一些业务逻辑
          	out.println("<?xml version=\"1.0\" encoding=\"gb2312\" ?>");
			out.println("<root>");
			out.println("<r>" +r+ "</r>");
			out.println("</root>");
			response.setContentType("text/xml");
  
%>

2.------->requestajax.jsp 代码如下：
[size=large]

   <%@ page language="java"   pageEncoding="GBK"%> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <script language="Javascript"> 
	 
	 var http_request=false; 
	 
	 function send_request(url){//初始化,指定处理函数，发送请求的函数 
		http_request=false; 
		//开始初始化XmlHttpRequest对象 
		if(window.XmlHttpRequest){//Mozilla浏览器 
			http_request=new XmlHttpRequest(); 
			if(http_request.overrideMimeType){//设置MIME类型 
				http_request.overrideMimeType("text/html"); 
			} 
			}else if(window.ActiveXObject){//IE浏览器 
				try{ 
					http_request=new ActiveXObject("XsXml2.XmlHTTP"); 
					http_request.setRequestHeader("Content-Type","text/Xml"); 
					http_request.setRequestHeader("Content-Type","gb2312"); 
				}catch(e){ 
					try{ 
						http_request=new ActiveXObject("Microsoft.XmlHTTP"); 
						http_request.setRequestHeader("Content-Type","text/Xml"); 
						http_request.setRequestHeader("Content-Type","gb2312"); 
					}catch(e){ 
					} 
			 } 
		} 
		if(!http_request){ //异常，创建对象实例失败 
			window.alert("不能创建XmlHttpRequest对象实例"); 
			return false; 
		} 
		http_request.onreadystatechange=processRequest; 
		//确定发送请求的方式和URL以及是否同步执行下段代码 
		http_request.open("GET",url,true); 
		http_request.setRequestHeader("If-Modified-Since","0");//不要缓存
		http_request.send(null); 
	} 
//处理返回信息的函数 
	function processRequest(){
		if(http_request.readyState==4){ 
		 //判断对象状态 
			if(http_request.status==200){//信息已经成功返回，开始处理信息 
			var result = http_request.responseXML;
			    var rValue = result.getElementsByTagName("r");
			    // alert("--------------->>>>"+rValue.item(0).text);
		 		 document.getElementById("r").value=rValue.item(0).text;
				 
		 	 		
		    }else{//页面不正常 
				alert("您所请求的页面有异常"); 
			} 
		 
		} 
  }	 
    
    
	function getResult(s1,s2){
			send_request("ajax.jsp?s1="+s1+"&s2="+s2);
	}
</script>
 
 
    <title> </title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
 
  </head>
  
  <body>
     	 
		<table><tr><td><input type="text" id="s1" name="s1" size=10></input>
		      +
		      <input type="text" id="s2" name="s2" size=10></input></td>
		      <td><input type=button value="=" name="js" onclick="getResult(s1.value,s2.value)"></input>
		          <input type="text" id="r" name="r"></input>
		      
		      </td></tr>
		      <tr><td><input type="reset" value="重置" onclick="location.reload()"/></td><td></td></tr>
		 </table>
	   	  					 
  </body>
</html>

[/size]
注：上面两个jsp直接发到web服务器上就可以运行……requestajax.jsp是发送ajax请求的页面，主要演示的功能：两个值相加（不管是数字还是字符都加），计算的过程用ajax.jsp里的java代码处理，实际在这个页面可以调用java代码并返回xml类型的数据，就体现了ajax的最大优势，可以调后台代码，异步执行

分享到：