`

Ajax使用范例【原创】

阅读更多

以下是一个例子,以后遇到需要Ajax的地方,都可以参考。实现效果是在页面选择地区load出下级地市的效果。

jsp页面:

写道
<div id="infoL"> 
<span class="text1"> 所属地区:<input type="checkbox" 
onclick="getProvince();" /><!-- 这里触发的getProvince()就调用到了ajax,从后台读数据--> </span> 
</div> 
<div id="infoR"> 
<span class="inputL"> <span id="province"style="display: none"><!-- 以后这里要实时生成ajax传过来的数据的 --> </span></span> 
</div>
 

 getProvince()对应的js代码:

写道
/** 创建异步数据传输对象 */ 
var xmlHttp; 
function createXmlHttp() 
{ 
if (window.XMLHttpRequest) 
{ 
xmlHttp = new XMLHttpRequest(); 
} else 
{ 
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
} 
} 
/** 获取省级地区信息**/ 
function getProvince() <!-- 就是这个!一定要有个 createXmlHttp,还有showProvinceMessage来实现利用返回的信息添加在页面上的操作-->
{ 
createXmlHttp(); 
xmlHttp.onreadystatechange = showProvinceMessage; <!-- 个人感觉这一句应该在open之后,因为open了才会去后台读数据来show返回的message啊 -->
xmlHttp.open("GET", "term_getProvince.do", true); <!-- 这里写处理的类(此处用struts2.0) -->
xmlHttp.send(null); 
} 
/** 
* 显示省级地区信息. 
**/ 
function showProvinceMessage() 
{ 
if (xmlHttp.readyState == 4) 
{ 
document.getElementById("province").innerHTML = ""; 
var messageText = xmlHttp.responseText;  <!-- 这里的返回数据对应着处理类里面的return 我们这时候的return是一个html字符,接下来会说明 -->
if (messageText != "") 
{ 
document.getElementById("province").innerHTML += messageText; 
document.getElementById("province").style.display = ""; 
document.getElementById("cities").style.display = "none"; 
document.getElementById("areas").style.display = "none"; 
} else 
{ 
document.getElementById("province").style.display = "none"; 
document.getElementById("cities").style.display = "none"; 
document.getElementById("areas").style.display = "none"; 
} 
} 
}
 

 后台处理类getProvince的内容:

写道
public final String getProvince() 
{ 
// 获取省级地区信息 
provinces = areaService.findAreasByAreaLevel(1); 
if (provinces == null || provinces.isEmpty()) 
{ 
logger.info("*** provinces is empty. ***"); 
Area a = new Area(); 
a.setAreaName("--暂无可用的省级地区信息--"); 
provinces.add(a); 
} 
return "getProvince"; 
}

  

其中的findAreasByAreaLevel方法为:

			String sql = "from Area as a where a.areaLevel=:argAreaLevel";

			logger.info("*** findAreasByAreaName sql is:  " + sql);
			Query query = sessionFactory.getCurrentSession().createQuery(sql);
			query.setInteger("argAreaLevel", areaLevel);
			return query.list();

  

返回符合条件的list。然后return的是 "getProvince" 我们现在看看最终这个 "getProvince"如何把后台操作的数据显示出来,它返回的是一个jsp页面peovice.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<s:select id="provinces" name="provinceId" headerKey="-1"
	headerValue="--请选择--" list="provinces" listKey="id"
	listValue="areaName" onchange="getCitiesOfProvince();"
	cssClass="validate-selection" /> <!-- 这时候发现,这里显示的lsit取值依据,就是上面处理类那里出现的那个接受值provinces  然后再把上面第一个jsp的display变为可视,就大功告成了-->

 

1
29
分享到:
评论
2 楼 ml365 2011-02-11  
gougou851129 写道
最原始的ajax代码
估计现在大家都用框架了

gougou851129 写道
最原始的ajax代码
估计现在大家都用框架了

哦哦!请问下现在用的框架有哪些?让我也学习学习,呵呵。
1 楼 gougou851129 2011-02-10  
最原始的ajax代码
估计现在大家都用框架了

相关推荐

    ASP.NET+ajax经典范例168+精选71例

    此资源包"ASP.NET+ajax经典范例168+精选71例"提供了丰富的实例,旨在帮助开发者深入理解和熟练掌握这两项技术。 ASP.NET是由微软公司开发的一种服务器端的Web应用程序框架,它构建在.NET Framework之上,允许开发者...

    ASP.NET AJAX经典范例168.rar

    在"ASP.NET AJAX经典范例168.rar"这个压缩包中,很可能包含了168个不同的实例,这些实例覆盖了ASP.NET AJAX的各种使用场景和功能,帮助开发者深入理解和应用这项技术。 ASP.NET AJAX的核心组件包括客户端脚本库...

    ajax经典范例

    AJAX的经典范例

    ajax 168范例 章立民

    **Ajax 168范例 章立民:深入理解与应用** Ajax(Asynchronous JavaScript and XML)技术,自2005年以来,已成为Web开发中的重要工具,它允许在不刷新整个页面的情况下,通过后台与服务器进行异步数据交换,提升了...

    ajax最简单范例

    总之,“ajax最简单范例”不仅展示了AJAX的基本使用方法,包括创建XMLHttpRequest对象、发送异步请求、处理服务器响应以及设置请求头等关键步骤,还体现了良好的编程实践,如代码封装、兼容性和错误处理,这些都是...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 12

    主要内容包括:ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从...

    Prototype Ajax学习范例

    这个"Prototype Ajax学习范例"提供了一系列实例,旨在帮助开发者迅速掌握使用Prototype进行Ajax操作的技巧。 Ajax,即异步JavaScript和XML(Asynchronous JavaScript and XML),是一种在无需刷新整个网页的情况下...

    Ajax组建使用范例

    5. **Ajax库和框架**:jQuery、Prototype、Dojo等库提供了简化Ajax使用的API,例如jQuery的$.ajax()、$.get()和$.post()。这些库处理了浏览器兼容性问题,使代码更简洁。 6. **异步处理**:Ajax的核心特性是异步,...

    ajax 经典范例集

    本资源"ajax 经典范例集"是一本书的配套光盘内容,可能包含了多个精心挑选的Ajax应用实例,旨在帮助读者深入理解和掌握Ajax技术。下面将详细介绍这些关键知识点: 1. **XMLHttpRequest对象**:Ajax的核心,用于在...

    ajax使用,实现百度搜索范例

    **Ajax技术详解与百度搜索范例实践** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,极大地...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 7

    主要内容包括:ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 14

    主要内容包括:ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 8

    主要内容包括:ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从...

    ASP.NET AJAX经典范例3

    通过学习和实践这些范例,开发者可以深入了解ASP.NET AJAX的工作原理,包括如何实现页面局部刷新、如何编写自定义的AJAX控件、如何使用UpdatePanel、ScriptManager和AjaxControlToolkit等组件。此外,还会涉及如何...

    ASP.NET AJAX经典范例1

    在这个“ASP.NET AJAX经典范例1”中,我们可以预见到一系列关于如何有效利用这一技术的实例和教程。 首先,让我们逐一探索压缩包中的文件: 1. **CH6** - 这个章节可能涉及的是ASP.NET AJAX的更新机制。ASP.NET ...

    Ajax 操作实例 ASP.NET实例

    在这个实例中,我们将深入探讨如何将Ajax与GridView和UpdatePanel结合使用。 GridView是ASP.NET中一个强大的数据绑定控件,用于显示和编辑表格数据。在传统的Web应用中,当用户对GridView中的数据进行操作(如编辑...

    ASP.NET AJAX经典范例2

    在"ASP.NET AJAX经典范例2"这本书中,作者章立民先生深入浅出地介绍了ASP.NET AJAX的各种应用场景和最佳实践。书中的每个章节都代表了一个具体的实例或技术主题,例如: 1. **CH13**:可能涵盖了AJAX控件工具包的...

    ASP.NET AJAX经典范例168 VC#版 (代码) Part 11

    主要内容包括:ASP .NET AJAX技术慨述、实现异步局部更新页面、UpdatePanel编程功能、 PageRequestManager的使用方法、Timer控件、Control Toolkit方法、结合 OOP功能、如何在客户端JavaScript调用web服务、如何从...

    AJAX 源码范例

    原书附带光盘文件 第2章 02/ 基于Ajax的留言板示例 第3章 03/3.1.3.html JavaScript在Ajax中的作用范例 03/3.4.6.html 加入注释,实现九九乘法表 03/3.4.11.html 使用逻辑表达式...

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    在这个实例中,我们使用 jQuery 的.ajax() 方法来发送 POST 请求,并指定 dataType 为 jsonp,以便使用 JSONP。 ```javascript $.ajax({ type: "post", url: "ajax.php", dataType: "jsonp", jsonp: "callback...

Global site tag (gtag.js) - Google Analytics