java ajax

最新推荐文章于 2022-11-01 15:31:43 发布

fanzhongyun

最新推荐文章于 2022-11-01 15:31:43 发布

阅读量175

点赞数

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

java 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

[quote]
[color=gray]
首先还是来说一下什么是AJAX吧，简单点来说，AJAX不是一种新的编程语言，而是异步的JavaScript 和 XML，是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

我们都知道，传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。但是在你使用AJAX技术以后，你便可以实现页面不刷新，不跳转，从而达到对网页的某部分进行更新的效果，这不仅对用户来说是一个很好的体验，同时也提高了网站的访问速度。

目前有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

[/color]
下面就带你来感受一下AJAX技术咯
首先来做一个测试的jsp，在这里我就不将js代码跟jsp分开来写了，我是直接将js内嵌到这个jsp中的。当然了，在你真正做开发的时候，建议你最好是将它们分开来写，这样层次会比较清晰，也方便管理，还能显得jsp比较纯净。我为了能方便的响应js事件，在这里我也嵌入了一点jquery知识，下面来看一下这个jsp中的代码：


<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
  <head>
    <title>loadContent Test</title>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">

    	$(document).ready(function(){
			$("#btn").click(function(){

				var xmlhttp;
				/**
				 * 创建 XMLHttpRequest 对象
				 * 所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象
				 * 老版本的 Internet Explorer (IE5 和 IE6)不支持XMLHttpRequest 对象,应使用 ActiveX 对象
				 * 为了应对所有的现代浏览器,包括 IE5 和 IE6,应该先检查浏览器是否支持 XMLHttpRequest 对象
				 * 如果支持,则创建 XMLHttpRequest 对象;如果不支持，则创建 ActiveXObject 
				 */
				if(window.XMLHttpRequest){
					xmlhttp = new XMLHttpRequest();   //创建 XMLHttpRequest 对象
				}else{
					xmlhttp = new ActiveXObjext("Microsoft.XMLHTTP");   //创建 ActiveXObject 对象
				}
				/**
				 * onreadystatechange 事件
				 * 当请求被发送到服务器时,我们需要执行一些基于响应的任务
				 * 每当 readyState 改变时,就会触发 onreadystatechange 事件
				 * readyState有5个值：0,1,2,3,4
				 * 0: 请求未初始化 
				 * 1: 服务器连接已建立 
				 * 2: 请求已接收 
				 * 3: 请求处理中 
				 * 4: 请求已完成，且响应已就绪
				 */ 
				xmlhttp.onreadystatechange = function(){
					if(xmlhttp.readyState==4){
						$("#text").html(xmlhttp.responseText);
					}	
				}
				/**
				 * 下面的open(method,url,async)参数：
				 * 第一个参数method有两个值：POST(post)和GET(get)
				 * 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用
				 * 然而，在以下情况中，请使用 POST 请求：
				 * 1.无法使用缓存文件（更新服务器上的文件或数据库）
				 * 2.向服务器发送大量数据（POST 没有数据量限制）
				 * 3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
				 * 第二个参数url就是你要访问的文件地址
				 * 第三个参数async也有两个值：true(异步)和false(同步)
				 * 这里我们当然是用异步处理了
				 * 下面是加载jquery.js这个文件里面的内容
				 * 其中jquery.js是使用jquery框架所必须的js脚本
				 * jquery.js这个文件我已经附加到附件中了
				 */
				xmlhttp.open("GET","jquery.js",true);
				xmlhttp.send();
			});
		});

    </script>
  </head>

  <body bgcolor="#9999CC">
    <input type="button" value="Pleas Click Me To load Content" id="btn" />
    <div id="text"></div>
  </body>
</html>

好了，这样一个简单的AJAX运用就完成了，当你点击按钮的时候，就会实现页面不跳转不刷新，从而也能访问另外一个文件的内容了

[/quote]

fanzhongyun

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
java ajax

[quote] [color=gray]首先还是来说一下什么是AJAX吧，简单点来说，AJAX不是一种新的编程语言，而是异步的JavaScript 和 XML，是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。我们都知道，传统的网页（不使用 AJAX）...
复制链接

扫一扫