ajax的最简示例

lgywindows

浏览: 9939 次
性别:
来自: 上海

最近访客更多访客>>

shun12bzs

NVLLL

gelongmei

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java
jquery

ajax java jquery

   AJAX的最简示例

   AJAX名词简略解释：
   AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，而是由Jesse James Gaiiett创造的名词，是指一种创建交互式网页应用的网页开发技术。
    AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
    主要包含的技术：　　
    使用 DOM（Document Object Model）进行动态显示及交互；　　
　　使用 XML 和 XSLT 进行数据交换及相关操作；　　
　　使用 XMLHttpRequest 进行异步数据查询、检索；　　
　　使用 JavaScript 将所有的东西绑定在一起。

    本例的环境设定：
    本例是用JQUERY来实现AJAX异步请求，需要用的jquery-1.7.2.js可以在http://jquery.com/下载。

    新建一个web项目，新建ajax_request.jsp并添加代码：

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>Insert title here</title>
<script type="text/javascript" src="./ref/jquery-1.7.2.js"></script>
<script type="text/javascript">
	function ajax_request(){
		var text = $("#text1").val();
		$.ajax({
			type:"POST",
			url:"ajax_response.jsp",
			data:"text="+text,
			success:function(msg){
				$("#div1").html(msg);
			}
		});
	}
</script>
</head>
<body>
这是一个ajax请求的例子<br/>
<input type="text" id="text1" name="text1" />
<input type="button" id="button1" name="button1" value="点击后返回输入的值" onclick="ajax_request()"/>
<div id="div1"></div>
</body>
</html>

代码说明：
1 在$.ajax中的url参数添加action，可以是servlet或jsp。
2 在$.ajax中的data参数添加传递的参数，多个参数用&分开，具体的格式示例如下：name=John&location=Boston
3 $.ajax中的success:function(msg)中的msg是自已写的变量，用来接收后台传回来的数据。
4 如果代码还有不懂的地方可以翻阅jquery的中文chm。
5 需要的架包和chm放在附件中。

新建ajax_response.jsp并添加代码：

<%@ page language="java" contentType="text/html; charset=gbk" pageEncoding="gbk"%>
<%
	//ajax_response.jsp充当ajax的后台使用
	String requestParam = (String)request.getParameter("text");
	System.out.println("requestParam->"+requestParam);
	out.println("后台处理后的"+requestParam);
	out.flush();
%>

代码说明：
1 ajax的后台可以用jsp，也可以用servlet。本例是使用jsp实现。
2 本例现在如果使用中文作参数会出现乱码问题。这里不提供解决方案。
3 out对象是jsp的内置对象，相当于在servlet中声明对象：
java.io.PrintWriter out = response.getWriter();
4 请注意不要带返回值。

jquery.rar (352.3 KB)
下载次数: 11

分享到：

2012-7-28 | 2012-07-23

2012-07-25 09:56
浏览 819
评论(0)
分类:编程语言
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论