引用
首先还是来说一下什么是AJAX吧,简单点来说,AJAX不是一种新的编程语言,而是异步的JavaScript 和 XML,是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
我们都知道,传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。但是在你使用AJAX技术以后,你便可以实现页面不刷新,不跳转,从而达到对网页的某部分进行更新的效果,这不仅对用户来说是一个很好的体验,同时也提高了网站的访问速度。
目前有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图、开心网等等。
下面就带你来感受一下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运用就完成了,当你点击按钮的时候,就会实现页面不跳转不刷新,从而也能访问另外一个文件的内容了
分享到:
相关推荐
Java AJAX(Asynchronous JavaScript and XML)分页与JSP(JavaServer Pages)相结合,可以提供无需刷新整个页面即可动态加载更多内容的能力,提高用户体验。本教程将深入探讨如何使用AJAX、JavaScript以及MySQL...
在网页开发中,Java AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的无刷新更新,提升用户体验。本实例提供了完整的Java AJAX无刷新分页解决方案,允许用户在不重新加载整个页面的情况下浏览多页...
在本文中,我们将深入探讨如何使用Java和Ajax技术实现一个用户注册系统,该系统通过服务器端验证并连接到MySQL数据库。Ajax(异步JavaScript和XML)允许我们在不刷新整个页面的情况下与服务器进行交互,提高用户体验...
在Java中,我们可以利用Ajax实现页面的动态刷新,提高用户体验,因为它允许后台与服务器进行异步数据交换,而不会打断用户的交互流程。下面将详细探讨Ajax在Java中的应用以及页面刷新的相关知识点。 一、Ajax的基本...
### DWR:Java AJAX 应用程序框架详解 #### 一、引言 随着Web技术的发展,用户对网站的交互性和响应速度提出了更高的要求。传统的Web应用开发方式已无法满足这些需求,因此Ajax(Asynchronous JavaScript and XML...
在IT行业中,Java和Ajax是两个非常重要的技术,它们经常被结合使用来创建交互性强、用户体验优秀的Web应用程序。本教程将深入讲解如何使用Java和Ajax实现一个无刷新的多张图片上传功能。这个功能允许用户在不刷新...
【Java AJAX】 Java AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个网页的情况下,能够更新部分网页的技术。它结合了JavaScript、XML以及浏览器提供的异步通信能力,使得Web应用程序可以更加互动和响应...
【Java Ajax 网页聊天源码】是一个基于Java技术和Ajax异步通信技术实现的网页聊天系统。这个项目展示了如何将后端Java编程与前端Ajax技术结合,为用户提供实时、无需刷新页面的交互体验。在深入理解这个源码之前,...
在Java开发中,AJAX(Asynchronous JavaScript and XML)是一种技术,用于创建动态和交互性的Web应用程序。它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。JSON(JavaScript Object ...
**JAVA AJAX框架 DWR详解** DWR(Direct Web Remoting)是一个开源的Java库,它使得JavaScript和服务器端的Java代码可以直接进行交互,无需处理复杂的HTTP请求和响应。这种技术在Web开发中被称为Ajax(Asynchronous...
Java AJAX (Asynchronous JavaScript and XML) 是一种在Web应用程序中创建动态、交互式用户界面的技术。它结合了JavaScript、XML以及服务器端技术,如Java,来实现页面的异步更新,提高了用户体验,减少了与服务器的...
Java AJAX无刷技术是一种网页开发方法,它允许页面在不刷新整个页面的情况下与服务器进行交互,从而提升用户体验。AJAX(Asynchronous JavaScript and XML)并不是一种单一的技术,而是一组技术的组合,包括...
java 目录存放java源文件 webapp 目录存放实例页面及JSP源文件 ------------------ Java源文件使用说明 ------------------ 实例中大部分文件为HTML及JSP文件,部分Java源文件存放在java目录中。 可将目录中的内容...
在本项目“java ajax 聊天室”中,开发者利用AJAX实现了无需刷新页面即可进行实时通信的功能,提升了用户体验。下面将详细探讨这个聊天室涉及的技术点。 1. **Java后端开发**: - **Servlet**:Java后端的主要部分...
Java AJAX 分页技术是Web开发中的一个重要组成部分,它允许用户在不刷新整个页面的情况下加载新的数据,提升用户体验。本教程将深入探讨如何在Java后端与AJAX前端交互实现动态分页。 首先,我们需要理解AJAX...
在IT行业中,Java和Ajax是两种非常重要的技术,它们在构建动态、交互性强的Web应用程序时发挥着关键作用。本文将深入探讨如何利用Java后端技术和Ajax前端技术实现数据库的实时联动效果。 首先,让我们理解Java和...
Java AJAX(Asynchronous JavaScript and XML)技术是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,从而提升了用户体验。在网页应用中,...
在IT领域,Java AJAX(Asynchronous JavaScript and XML)与Servlet技术的结合被广泛应用于构建动态、交互性强的Web应用程序。这里的“3级联动”通常指的是在网页表单中,一个下拉框的选择会影响到其他两个下拉框的...
标题 "gwt java ajax programming source code" 暗示了这个压缩包可能包含与Google Web Toolkit (GWT)、Java和Ajax编程相关的源代码。GWT是一个开源的开发框架,它允许开发者使用Java语言来编写客户端的Web应用程序...
Java AJAX 用户注册是一个重要的Web开发...总的来说,Java AJAX 用户注册涉及前端JavaScript的AJAX技术与后端Java的处理逻辑,以及它们之间的数据交换。掌握这些知识点,能帮助开发者构建出高效、友好的用户注册功能。