ml365
- 浏览: 626347 次
- 性别:
- 来自: 广州
-
文章分类
- 全部博客 (448)
- 字符串相关 (16)
- Struts2页面显示 (15)
- Hibernate错误记录 (6)
- linux命令 (2)
- java项目测试 (5)
- 个人作品 (10)
- hibernate应用 (15)
- struts1 (7)
- 数据库（除了hibernate） (42)
- J2ME/WAP (37)
- servlet/jsp (49)
- java桌面应用+java综合 (14)
- 服务器配置，报错解决 (24)
- Myeclipse配置，抛错解决 (8)
- linux (18)
- JavaScript+jquery+ajax (45)
- div css 页面设计 (16)
- 互联网综合运营 (14)
- 编程工具类 (3)
- 论文 报告 文献 (14)
- PHP (26)
- struts2 (9)
- spring (1)
- 我的IT生活 (14)
- Resin (6)
- java项目记录 (14)
- https安全 (11)
- 支付技术 (3)
最新评论
-
yihaijunyxr：
很好呀,我好久没用iteye了,今天找出两个帐号(yihaij ...
c/c++的监听tmlisten启动缓慢解决 -
yihaijun：
好像这不算是技术博客,是工作博客
c/c++的监听tmlisten启动缓慢解决 -
ml365：
后来还优化了webservice的前置框架，不用cxf，用了另 ...
c/c++的监听tmlisten启动缓慢解决 -
Jayliuying：
有点晚哈 但是也支持一下 楼主
java相关论文的参考文献【转】 -
gqsunrise：
...
我是项目经理，我的项目管理日记【20120229】
这个是用于显示主体的ajax.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX网页开发实例</title>
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
</head>
<body>
<h1>AJAX网页开发实例</h1>
<p>看看下面的例子，你也许就会懂得数据是怎么样完成无刷新的了。</p>
<p id="xmlObj" style="border:1px dashed #ccc;padding:10px;">
这是一些简单的数据。<a href="data.xml" title="调取XML数据。 " onclick="ajaxRead('data.xml'); this.style.display='none'; return false">调取XML数据。 </a>
</p>
<p><a href="http://www.b3inside.com">返回Blog</a></p>
</body>
</html>
下面是包含数据的data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
这里是XML中的数据。
</data>
</root>
注意我们现在连接data.xml并没有使用javascript,要使用javascript，执行ajaxRead函数，连接是隐藏的，并且此连接并没有重定向到data.xml文件。函数ajaxRead还没有定义，所以当你测试时，会得到一个JS错误。所以我们在开始的<head>中定义了函数：
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
解释下，函数ajaxRead将在点击View XML data连接的时候执行，在函数里，我们定义了一个xmlObj的变量，它就负责客户端和服务器端中转。我们定义一个if/else循环块：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
这只是测试不同对象的可用性——不同的浏览器执行XMLHttpRequest对象的时候不同，所以我们定义“xmlObj”作为XMLHttpRequest对象的时候，我们必须区别对待。如果没有XMLHttpRequest可用，函数以return结束来取消错误报告。大部分时候，XMLHttpRequest都是可用的，不过排除一些太老的浏览器。
下面的部分：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
每当XMLHttpRequest状态改变时，onreadystatechange事件就触发，此事件共有5个状态，从0到4。
[0]uninitialized未初始化(在XMLHttpRequest开始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest从服务器端获得响应)
[3]interactive(当对象连接到服务器)
[4]complete(完成)
状态5[编号是4]是用来确认数据是否可用的，正好用来给xmlObj.readyState用，如果“是”，我们执行updateObj函数，此函数有2个参数：ID以及填充的数据，它的方法以后说明。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>AJAX网页开发实例</title>
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
</head>
<body>
<h1>AJAX网页开发实例</h1>
<p>看看下面的例子，你也许就会懂得数据是怎么样完成无刷新的了。</p>
<p id="xmlObj" style="border:1px dashed #ccc;padding:10px;">
这是一些简单的数据。<a href="data.xml" title="调取XML数据。 " onclick="ajaxRead('data.xml'); this.style.display='none'; return false">调取XML数据。 </a>
</p>
<p><a href="http://www.b3inside.com">返回Blog</a></p>
</body>
</html>
下面是包含数据的data.xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
<data>
这里是XML中的数据。
</data>
</root>
注意我们现在连接data.xml并没有使用javascript,要使用javascript，执行ajaxRead函数，连接是隐藏的，并且此连接并没有重定向到data.xml文件。函数ajaxRead还没有定义，所以当你测试时，会得到一个JS错误。所以我们在开始的<head>中定义了函数：
<script type="text/javascript"><!--
function ajaxRead(file){
var xmlObj = null;
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
xmlObj.open ('GET', file, true);
xmlObj.send ('');
}
function updateObj(obj, data){
document.getElementById(obj).firstChild.data = data;
}
//--></script>
解释下，函数ajaxRead将在点击View XML data连接的时候执行，在函数里，我们定义了一个xmlObj的变量，它就负责客户端和服务器端中转。我们定义一个if/else循环块：
if(window.XMLHttpRequest){
xmlObj = new XMLHttpRequest();
} else if(window.ActiveXObject){
xmlObj = new ActiveXObject("Microsoft.XMLHTTP");
} else {
return;
}
这只是测试不同对象的可用性——不同的浏览器执行XMLHttpRequest对象的时候不同，所以我们定义“xmlObj”作为XMLHttpRequest对象的时候，我们必须区别对待。如果没有XMLHttpRequest可用，函数以return结束来取消错误报告。大部分时候，XMLHttpRequest都是可用的，不过排除一些太老的浏览器。
下面的部分：
xmlObj.onreadystatechange = function(){
if(xmlObj.readyState == 4){
updateObj('xmlObj', xmlObj.responseXML.getElementsByTagName('data')[0].firstChild.data);
}
}
每当XMLHttpRequest状态改变时，onreadystatechange事件就触发，此事件共有5个状态，从0到4。
[0]uninitialized未初始化(在XMLHttpRequest开始前)
[1]loading(一旦初始化)
[2]loaded(一旦XMLHttpRequest从服务器端获得响应)
[3]interactive(当对象连接到服务器)
[4]complete(完成)
状态5[编号是4]是用来确认数据是否可用的，正好用来给xmlObj.readyState用，如果“是”，我们执行updateObj函数，此函数有2个参数：ID以及填充的数据，它的方法以后说明。
分享到：
发表评论
-
解决了json回调函数不执行的问题！
2011-12-11 21:56 1443找了好久 网上的解说千姿百态 不过还是有灵感！ 后来发现，是 ... -
解决了myeclipse因为js乱码而使得程序需要这个js的地方运行不了
2011-12-11 16:08 830这是一个城市的三级联机菜单效果，很熟悉了吧 呵呵。项目是我半途 ... -
Ajax使用范例【原创】
2011-02-10 16:30 929以下是一个例子，以后遇到需要Ajax的地方，都可以参考。实现效 ... -
刷新页面时保存radio状态
2010-12-29 16:35 2031嗯。只是留个底，让自己以后需要的话可以用到。 a. 在< ... -
window.location.Reload()和window.location.href=window.location.href【转】
2010-12-12 16:48 1588<a onclick="javascrip ... -
jQuery实例CSS 样式表动态选择【转】
2010-12-12 16:33 1089jQuery实例CSS 样式表动态选择本实例主要说的还是jqu ... -
jQuery框架+cookie选择样式表文件【转】
2010-12-12 16:33 905HTML: DOCTYPE html PUBLIC &q ... -
转】 《15天学会Jqurey》之第七天--样式表切换
2010-12-12 16:32 898转载自 jiangqincong 最终编辑 jiangqi ... -
转】 window.open和window.showModalDialog用法
2010-12-12 16:30 885转载自 liuduohello 最终 ... -
js弹出页面大全[转]
2010-12-12 16:29 975【1、最基本的弹出窗口代码】 其实代码非常简单： &l ... -
点击输入框出现提示语[转]
2010-12-12 16:28 1251这需要和脚本配合，下面是简单示例，当你鼠标点文本框后，出现 ... -
Ajax简单易懂实例教程【原创】
2010-12-12 16:24 1032jsp页面如下： <%@ page content ... -
jquery技巧总结【转】
2010-12-12 16:19 693一、简介1.1、概述随着WEB2.0及ajax思想在互联网上的 ... -
jquery的粗略概述【转】
2010-12-12 16:17 740一，找到你了！ 还记得$()这个东西吧？prototype还是 ... -
js改变iframe的src【原创】
2010-12-12 15:25 1423顺便记下用<a>来调用js方法的写法： &l ... -
setTimeout使用细节【转】
2010-12-12 15:25 1367今天的用的时候，想隔一段时间之后运行一个方法，可是页面会报 ... -
js鼠标滑过新闻标题列表显示对应新闻内容【原创】
2010-12-12 11:00 1138有一个页面，左边是新闻列表标题，鼠标划过相应的标题，在右侧 ... -
js截取select下拉列表框当前选择项的文本【原创】
2010-12-12 10:44 1205var selectObj = document.getEle ... -
jsp删除前弹出js提示【转】
2010-12-12 10:40 1524<script type="text/ja ... -
js实现菜单展开和收缩，兼容多种浏览器【原创】
2010-12-12 10:36 1764菜单从上到下排列，要在上下实现展开和收缩，思路如下: 用 ...
相关推荐
在“ajax_入门实例_”这个主题中，可能涉及的实例包括创建一个简单的Ajax请求，向服务器获取数据并更新页面内容。例如，我们可以创建一个按钮，点击后发送Ajax请求获取JSON数据，并将数据展示在一个列表中。 ```...
### AJAX三种入门实例详解 #### 一、基于Servlet的AJAX实例 在本部分中，我们将探讨一个基于Servlet实现的简单AJAX应用示例。这个示例主要关注于如何通过AJAX技术实现实时的数据获取与展示。具体来说，用户在前端...
**Ajax（Asynchronous JavaScript and ...总之，`ajax经典入门实例源码`提供了一个实践平台，通过实际操作加深对Ajax的理解。结合`readme.txt`的指导，你应该能逐步掌握Ajax的基本使用，为后续的Web开发打下坚实基础。
ajax+hibernate入门实例源码。测试方法： 一、先在mysql数据库中创建表并插入数据（脚本在压缩包中） 二、将WebRoot目录复制到tomcat的webapps中。 运行图： <br>
在"ASP.NET AJAX 入门实例"中，我们将探讨如何使用C#语言和ASP.NET框架来实现AJAX功能。C#是.NET Framework的主要编程语言，而ASP.NET是一个用于构建Web应用程序的框架，它支持AJAX功能，可以方便地在服务器端处理...
### Ajax三种入门实例详解 #### 一、简介 在当今的Web开发领域中，Ajax（Asynchronous JavaScript and XML）技术已经成为了不可或缺的一部分。它通过在后台与服务器进行少量数据交换，使得网页能够实现异步更新，...
在这个“ajax入门实例|ajax注册实例”中，我们将学习如何构建一个简单的Ajax用户注册系统，尽管它并未与实际数据库交互，但足以帮助初学者理解Ajax的工作原理。 首先，我们需要创建一个HTML表单，用于用户输入注册...
【AJAX + Servlet 入门实例：用户注册】 在Web开发中，AJAX（Asynchronous JavaScript and XML）和Servlet是两种关键的技术，它们共同构建了动态、交互性强的Web应用程序。这个入门实例将向我们展示如何利用AJAX与...
这个"最简单入门实例"旨在帮助初学者快速理解Ajax.NET的基本用法和工作原理。 首先，我们从`Web.config`文件开始。在ASP.NET应用中，`Web.config`是配置文件，用于定义应用程序的行为和设置。在Ajax.NET中，可能...
在本"Ajax网站开发典型实例JSP源码包"中，我们可以深入学习如何使用Ajax与JavaServer Pages (JSP) 结合，创建高效动态的Web应用。 1. **Ajax基础** Ajax的核心是JavaScript对象XMLHttpRequest，它允许JavaScript在...
通过这个简单的Ajax入门实例，你可以理解如何利用Ajax实现页面内容的异步加载。随着经验的增长，还可以学习更高级的技巧，如使用jQuery的$.ajax()函数、Promise或现代的fetch API，以及错误处理和进度回调等。
AJAX+servlet实例入门是一个简单的Web应用程序，它可以帮助开发者快速入门AJAX和Servlet技术。通过这个实例，开发者可以学习如何使用AJAX和Servlet来实现异步交互、响应速度快、复杂UI的成功处理等功能。
**Ajax+JSON 实例详解** 在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术已经成为提升用户体验的重要工具，它允许网页在不刷新整个页面的情况下与服务器进行数据交互。结合JSON（JavaScript Object ...
在这个实例中，我们将深入探讨如何将Ajax与GridView和UpdatePanel结合使用。 GridView是ASP.NET中一个强大的数据绑定控件，用于显示和编辑表格数据。在传统的Web应用中，当用户对GridView中的数据进行操作（如编辑...
【Ajax 实例详解】 Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。它的核心在于JavaScript，通过创建XMLHttpRequest对象，实现后台与服务器的异步数据交换，...
**PHP+AJAX+XML 入门实例详解** 在网页开发中，PHP、AJAX 和 XML 是三种重要的技术，它们各自扮演着不同的角色，共同构建了动态、交互式的Web应用程序。下面将详细介绍这三个技术的基本概念及其结合应用。 **1. ...
**AJAX 入门实例教程** AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现了网页的异步更新，极大地提升了用户体验。...
本篇文章将深入探讨jQuery AJAX分页的原理与实践，通过具体的实例来展示如何实现炫酷的分页功能。 首先，理解jQuery AJAX的核心概念。AJAX允许我们在不刷新整个页面的情况下，与服务器交换数据并更新部分网页内容。...
**AJAX 技术简介** AJAX，全称为异步的 JavaScript 和 XML，是一种用于创建交互式网页应用的网页开发技术。它允许网页在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页内容。这极大地提高了用户体验...
这个简单的AJAX实例展示了如何利用JavaScript和Servlet实现动态交互。AJAX技术的运用不仅限于此，它还可以用于实时聊天、动态加载内容、表单验证等多种场景，大大增强了Web应用程序的交互性和性能。 在实际开发中，...