Ajax的简单实例XmlHttpRequest

最新推荐文章于 2019-03-01 20:36:19 发布

ybcwjj

最新推荐文章于 2019-03-01 20:36:19 发布

阅读量138

点赞数

分类专栏： ajax基础文章标签： Ajax Java JSP XML IE

ajax基础专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的Ajax应用案例，通过两个JSP页面实现了客户端与服务器端的异步数据交互。请求页面通过Ajax技术向服务器发送参数，并接收处理后的结果。

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

[size=large][color=red]1.---->ajax.jsp代码如下：[/color][/size]

 <%@ 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");

%>

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