`
crackit
  • 浏览: 10457 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

Ajax Simple Demo

阅读更多

Ajax Simple Demo

 

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'ajax2.jsp' starting page</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">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript">
		var xmlHttpRequest = null;
		
		function ajaxSubmit(){
			if(window.ActiveXObject){
				xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
			}else{
				xmlHttpRequest = new XMLHttpRequest();
			}
			
			if(null != xmlHttpRequest){
				var v1 = document.getElementById("v1").value;
				var v2 = document.getElementById("v2").value;
				
				//xmlHttpRequest.open("GET","servlet/AjaxServlet2?v1=" + v1 + "&v2=" + v2,true);
				xmlHttpRequest.open("POST","servlet/AjaxServlet2",true);
				
				xmlHttpRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded");
				xmlHttpRequest.onreadystatechange = ajaxCallback;
				xmlHttpRequest.send("v1=" + v1 + "&v2=" + v2);
			}
		}

		function ajaxCallback(){
			if(xmlHttpRequest.readyState == 4){
				if(xmlHttpRequest.status == 200){
					var responseText = xmlHttpRequest.responseText;
					alert(responseText);
					document.getElementById("div1").innerHTML=responseText;					
				}
			}
		}
		
	</script>
  </head>
  
  <body>
  	<input type="text" name="value1" id="v1"><br>
  	<input type="text" name="value2" id="v2"><br>
  	<input type="button" value="get text" onclick="ajaxSubmit();"><br>
  	<form action="" enctype="application/x-www-form-urlencoded"></form>
  	<div id="div1"></div>
  </body>
</html>
 

 

分享到:
评论

相关推荐

    jquery simpledemo1

    标题 "jquery simpledemo1" 暗示我们即将探讨的是一个基于 jQuery 的简单示例项目。jQuery 是一个广泛使用的 JavaScript 库,它简化了 HTML 文档遍历、事件处理、动画以及 Ajax 交互等任务。这个项目的目的是为初学...

    CakePHP :: Ajax Demo

    This is a simple demo of some of the AJAX helpers now available in CAKE. These helpers are directly modeled on Ruby On Rails. In fact, they were shamelessly ported from rails almost verbatim. You can ...

    ajax 70demo

    Ajallerix: AJAX, simple, fast Web image gallery demo; at Novell - **特点**:简单的图像画廊示例,展示了如何使用AJAX技术快速构建动态图像展示页面。 - **关键技术**: - 使用AJAX请求获取图片列表数据。 - ...

    IBM SaaS simple demo

    4. **API集成**:前端需要与后端服务接口进行交互,这涉及AJAX请求和错误处理。 5. **用户体验**:IBM通常注重提供直观、易用的界面,以提升用户满意度。 通过这个简单的SaaS演示,初学者能够了解IBM云服务的开发...

    ajax 调用WebService 很简单的demo

    "ajax 调用WebService 很简单的demo"这个标题提示我们,这是一个简单的示例,旨在展示如何将这两者结合使用。下面,我们将详细解释Ajax、WebService以及如何在实际项目中将它们结合起来。 Ajax(Asynchronous ...

    droppable-simple-demo.zip_DEMO

    我们将基于"droppable-simple-demo.zip_DEMO"这个项目进行讨论,该项目包含两个主要文件:droppable-simple和photo manager。 拖放功能是网页应用中一种直观且实用的交互方式,允许用户通过鼠标或触摸设备将元素从...

    simple-demo:我的主页作品集的简短演示

    在本项目"simple-demo"中,我们可以看到一个用于展示个人主页作品集的简短演示。这个项目主要基于JavaScript技术,JavaScript是一种广泛应用于网页和互联网应用的编程语言,它赋予了网页动态交互的能力,使得用户与...

    apache-activemq-5.15.2下的demo

    - **Ajax集成**:`webapps-demo`中的例子展示了如何使用Ajax技术与ActiveMQ交互,实现页面的实时更新和异步通信。 3. **Demo内容**: - **SimpleSendReceive**:这个示例展示了基本的消息发送和接收过程,包括...

    ajax+zTree 文件树

    $("#treeDemo").zTree(setting, nodes); }); ``` ### 四、`fileCatalog.js`的用途 `fileCatalog.js`通常包含了具体的文件目录数据和一些定制的zTree操作逻辑。例如,它可能包含了初始化zTree时所需的节点数据,...

    jQuery分页demo实现

    有许多成熟的jQuery分页插件,如jQuery Pagination、jQuery Simple Pagination等。这里我们假设已经选择了一个适合的插件,并引入到项目中。 5. **初始化分页** 在jQuery的$(document).ready()函数中,初始化分页...

    JS调用WEBSERVICE的demo

    SOAP(Simple Object Access Protocol)是其中一种XML格式的通信协议,用于交换结构化信息。而REST(Representational State Transfer)是一种轻量级的架构风格,常用于构建Web服务,它利用HTTP方法(GET、POST、PUT...

    server-mock, a simple mock server for ajax testing.zip

    3. `example`或`demo`目录:可能包含示例代码,帮助用户快速了解如何使用`server-mock`。 4. `README.md`:项目介绍和使用指南,详细解释了如何安装、配置和运行模拟服务器。 5. `package.json`:项目配置文件,记录...

    ajax--dwr测试

    这段XML配置指定了一个名为`Demo`的客户端JavaScript对象,该对象映射到服务器端的`org.getahead.dwrdemo.simpletext.Demo`类。这样就可以在客户端通过`Demo`对象来调用该类的方法了。 #### 三、DWR在网页中的集成 ...

    jQuery-zTree树插件demo.zip

    - 异步操作:支持Ajax方式获取数据,实现动态更新树结构。 - 自定义图标:允许开发者自定义每个节点的图标,以满足不同场景的需求。 - 节点拖放:提供拖放功能,允许用户重新组织树形结构,方便数据管理。 - ...

    springboot+vue+nginx完整demo代码

    在这个demo中,Vue可能用于构建用户交互界面,通过Ajax与Spring Boot后端进行数据通信。 【Nginx】是一个高性能的反向代理服务器和负载均衡器。它负责接收HTTP请求,并根据配置将请求转发到相应的后台服务。在本...

    jquery mobile RSS阅读器demo

    结合RSS(Really Simple Syndication)技术,我们可以创建一个功能完善的RSS阅读器。本Demo就是这样一个实例,展示了如何利用jQuery Mobile来打造一个用户友好的移动RSS阅读器。 **jQuery Mobile基础知识** jQuery...

    ws ajax dojo

    压缩包内的"Sample"和"demo"可能是示例代码或演示项目,用于展示如何在实际项目中使用Ajax和Dojo来与Web服务进行通信。这些示例可以帮助开发者更好地理解上述概念,并提供动手实践的机会。通过研究这些示例,可以...

    SimpleHtml5Editor.zip

    4. `demo/` - 示例或测试页面,展示编辑器的使用方法和功能。 5. `docs/` - 可能包含项目的文档,如API参考、安装指南和示例。 6. `LICENSE` - 开源许可文件,说明了项目可以被如何使用和分发。 7. `README.md` - ...

    Extjs direct demo

    ExtJS Direct是一种高效、低延迟的API调用机制,它允许JavaScript直接与服务器上的方法交互,简化了AJAX应用的开发。在这个demo中,开发者可能已经创建了一些基本的组件和接口,来演示Direct技术的用法。 首先,...

    jqgrid一个简单的demo

    caption: 'jqGrid Simple Demo' }); }); ``` **数据源** 在上述示例中,`url: 'getData.php'`指定了数据源,这个PHP文件应返回符合jqGrid要求的JSON格式数据。你可以根据实际需求调整为其他语言的后端接口。 **...

Global site tag (gtag.js) - Google Analytics