ajax的最简示例

最新推荐文章于 2021-11-01 16:00:32 发布

lgywindows

最新推荐文章于 2021-11-01 16:00:32 发布

阅读量110

点赞数

分类专栏： java jquery 文章标签： ajax java jquery ViewUI

本文链接：https://blog.csdn.net/lgywindows/article/details/84264000

版权

java 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

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

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

新建一个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>

[b]代码说明：[/b]
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();
%>

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