BlogJava-SIMONE-随笔分类-AJAX

jQuery 与 prototype 共存

SIMONE — Mon, 25 Jun 2007 09:48:00 GMT

方法一：

方法二：

方法三：

SIMONE 2007-06-25 17:48 发表评论

jQuery中文入门指南，翻译加实例，jQuery的起点教程

SIMONE — Mon, 25 Jun 2007 09:34:00 GMT

jQuery中文入门指南，翻译加实例，jQuery的起点教程

中文版译者：Keel

此文以实例为基础一步步说明了jQuery的工作方式。现以中文翻译（添加我的补充说明）如下。如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知。

英文原版：http://jquery.bassistance.de/jquery-getting-started.html ，感谢原文作者 Jörn Zaefferer

本文发布已征求原作者同意。

另外我认为在学习过程中,有两个API文档你要打开随时查看:

以下部分为原文翻译:

jQuery入门指南教程

这个指南是一个对jQuery库的说明，要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子，选择器和事件基础，AJAX、FX的用法，以及如何制作jQuery的插件。这个指南包括了很多代码，你可以copy它们，并试着修改它们，看看产生的效果。

内容提要

安装

一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载.

下载：jQuery Starterkit

(译者Keel注:一定要下载这个包，光看文章不实践肯定是不行的。)

下载后解压缩，然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)

现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.

本章的相关链接:

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {
	// do stuff when DOM is ready
});

放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.

$(document).ready(function() {
	$("a").click(function() {
		alert("Hello world!");
	});
});

这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)

让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签（译者Keel注：即），$ 号是 jQuery “类”(jQuery "class")的一个别称，因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

这里有一个拟行相似功能的代码:

Link

不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.

下面我们会更多地了解到选择器与事件.

本章的相关链接:

Find me:使用选择器和事件

jQuery提供两种方式来选择html的 elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

为了测试一下这些选择器，我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始，我们需要选择这个list本身，这个list有一个ID叫“orderedlist”，通常的javascript写法是document.getElementById("orderedlist").在jQuery中，我们这样做：

$(document).ready(function() {
	$("#orderedlist").addClass("red");
});

这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注：参考测试包中的css目录下的core.css，其中定义了red样式)。因此，在你刷新了starterkit.html后，你将会看到第一个有序列表(ordered list )背景色变成了红色，而第二个有序列表没有变化.

现在，让我们添加一些新的样式到list的子节点.

$(document).ready(function() {
	$("#orderedlist > li").addClass("blue");
});

这样，所有orderedlist中的li都附加了样式"blue"。

现在我们再做个复杂一点的，当把鼠标放在li对象上面和移开时进行样式切换，但只在list的最后一个element上生效。

$(document).ready(function() {
	$("#orderedlist li:last").hover(function() {
		$(this).addClass("green");
	}, function() {
		$(this).removeClass("green");
	});
});

还有大量的类似的CSS和XPath例子，更多的例子和列表可以在这里找到。（译者Keel注：入门看此文，修行在个人，要想在入门之后懂更多，所以这段话的几个链接迟早是要必看的！不会又要翻译吧...^_^!）

每一个onXXX事件都有效，如onclick,onchange,onsubmit等，都有jQuery等价表示方法（译者Keel注：jQuery不喜欢onXXX，所以都改成了XXX，去掉了on）。其他的一些事件，如ready和hover,也提供了相应的方法。

你可以在Visual jQuery找到全部的事件列表，在Events栏目下.

用这些选择器和事件你已经可以做很多的事情了，但这里有一个更强的好东东！

$(document).ready(function() {
	$("#orderedlist").find("li").each(function(i) {
		$(this).html( $(this).html() + " BAM! " + i );
	});
});

find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li"). each()一样迭代了所有的li，并可以在此基础上作更多的处理。大部分的方法,如addClass(), 都可以用它们自己的 each() 。在这个例子中, html()用来获取每个li的html文本, 追加一些文字，并将之设置为li的html文本。（译者Keel注：从这个例子可以看到.html()方法是获取对象的html代码，而.html('xxx')是设置'xxx'为对象的html代码）

另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法，想像一个在你用AJAX方式成功提交后的reset：

$(document).ready(function() {
	// use this to reset a single form
	$("#reset").click(function() {
		$("#form")[0].reset();
	});
});

（译者Keel注：这里作者将form的id也写成了form，源文件有

，这是非常不好的写法，你可以将这个ID改成form1或者testForm，然后用$("#form1")或者$ ("#testForm")来表示它，再进行测试。）

这个代码选择了所有ID为"form"的元素，并在其第一个上call了一个reset()。如果你有一个以上的form，你可以这样做：

$(document).ready(function() {
	// use this to reset several forms at once
	$("#reset").click(function() {
		$("form").each(function() {
			this.reset();
		});
	});
});

（译者Keel注：请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会！必要时要观察starterkit.html的html代码）

这样你在点击Reset链接后，就选择了文档中所有的form元素，并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list，你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {
	$("li").not("[ul]").css("border", "1px solid black");
});

这个代码选择了所有的li元素，然后去除了没有ul子元素的li元素。刷新浏览器后，所有的li元素都有了一个边框，只有ul子元素的那个li元素例外。

（译者Keel注：请注意体会方便之极的css()方法，并再次提醒请务必实际测试观察效果，比方说换个CSS样式呢？再加一个CSS样式呢？像这样：$ ("li").not("[ul]").css("border", "1px solid black").css("color","red");）

上面代码中的[expression] 语法是从XPath而来，可以在子元素和属性(elements and attributes)上用作过滤器，比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {
	$("a[@name]").background("#eee");
});

这个代码给所有带有name属性的链接加了一个背景色。（译者Keel注：这个颜色太不明显了，建议写成$("a[@name]").background("red");）

更常见的情况是以name来选择链接，你可能需要选择一个有特点href属性的链接，这在不同的浏览器下对href的理解可能会不一致，所以我们的部分匹配("*=")的方式来代替完全匹配("=")：

$(document).ready(function() {
	$("a[@href*=/content/gallery]").click(function() {
		// do something with all links that point somewhere to /content/gallery
	});
});

到现在为止，选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素，比如一个FAQ的页面，答案首先会隐藏，当问题点击时，答案显示出来，jQuery代码如下：

$(document).ready(function() {
	$('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

这里我们用了一些链式表达法来减少代码量，而且看上去更直观更容易理解。像'#faq' 只选择了一次，利用end()方法，第一次find()方法会结束(undone)，所以我们可以接着在后面继续find('dt')，而不需要再写$ ('#faq').find('dt')。

在点击事件中的，我们用 $(this).next() 来找到dt下面紧接的一个dd元素，这让我们可以快速地选择在被点击问题下面的答案。

（译者Keel注：这个例子真是太酷了，FAQ中的答案可以收缩！从利用next()的思路到实现这些效果都有很多地方需要我们消化，注意 if (answer.is(':visible'))用法，注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档）

除了选择同级别的元素外，你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时，它的父级元素--也就是文章的这一段突出显示，试试这个：

$(document).ready(function() {
	$("a").hover(function() {
		$(this).parents("p").addClass("highlight");
	}, function() {
		$(this).parents("p").removeClass("highlight");
	});
});

测试效果可以看到，移到文章某段的链接时，它所在的段全用上highlight样式，移走之后又恢复原样。

（译者Keel注：highlight是core.css中定义的样式，你也可以改变它，注意这里有第二个function()这是hover方法的特点，请在API文档中查阅hover，上面也有例子说明）

在我们继续之前我们先来看看这一步： jQuery会让代码变得更短从而更容易理解和维护，下面是$(document).ready(callback)的缩写法：

$(function() {
	// code to execute when the DOM is ready
});

应用到我们的Hello world例子中，可以这样:

$(function() {
	$("a").click(function() {
		alert("Hello world!");
	});
});

现在，我们手上有了这些基础的知识，我们可以更进一步的探索其它方面的东西，就从AJAX开始！

本章的相关链接:

Rate me:使用AJAX

在这一部分我们写了一个小小的AJAX应用，它能够rate一些东西（译Keel注：就是对某些东西投票），就像在youtube.com上面看到的一样。

首先我们需要一些服务器端代码，这个例子中用到了一个PHP文件，读取rating参数然后返回rating总数和平均数。看一下rate.php代码.

虽然这些例子也可以不使用AJAX来实现，但显示我们不会那么做，我们用jQuery生成一个DIV容器，ID是"rating".

$(document).ready(function() {
	// generate markup
	var ratingMarkup = ["Please rate: "];
	for(var i=1; i <= 5; i++) {
		ratingMarkup[ratingMarkup.length] = "" + i + " ";
	}
	// add markup to container and applier click handlers to anchors
	$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
		e.preventDefault();
		// send requests
		$.post("rate.php", {rating: $(this).html()}, function(xml) {
			// format result
			var result = [
				"Thanks for rating, current average: ",
				$("average", xml).text(),
				", number of votes: ",
				$("count", xml).text()
			];
			// output result
			$("#rating").html(result.join(''));
		} );
	});
});

这段代码生成了5个链接，并将它们追加到id为"rating"容器中，当其中一个链接被点击时，该链接标明的分数就会以rating参数形式发送到rate.php，然后，结果将以XML形式会从服务器端传回来，添加到容器中，替代这些链接。

如果你没有一个安装过PHP的webserver，你可以看看这个在线的例子.

不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"

更多的AJAX方法可以从这里找到，或者看看API文档下面的AJAX filed under AJAX.

（译者Keel注：这个在线实例从国内访问还是比较慢的，点击后要等一会儿才能看到结果，可以考虑对它进行修改，比如加上loading，投票后加上再投票的返回链接等。此外，这个例子中还是有很多需要进一步消化的地方，看不懂的地方请参考API文档。）

一个在使用AJAX载入内容时经常发生的问题是：当载入一个事件句柄到一个HTML文档时，还需要在载入内容上应用这些事件，你不得不在内容加载完成后应用这些事件句柄，为了防止代码重复执行，你可能用到如下一个function:

// lets use the shortcut
$(function() {
	var addClickHandlers = function() {
		$("a.clickMeToLoadContent").click(function() {
			$("#target").load(this.href, addClickHandlers);
		});
	};
	addClickHandlers();
});

现在，addClickHandlers只在DOM载入完成后执行一次，这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.

请注意addClickHandlers函数是作为一个局部变量定义的，而不是全局变量(如：function addClickHandlers() {...})，这样做是为了防止与其他的全局变量或者函数相冲突.

另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法，简单的办法是将这个回调方法包含在一个其它的function中:

// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
  ...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );

用到简单的AJAX后，我们可以认为已经非常之“web2.0”了，但是到现在为止，我们还缺少一些酷炫的效果。下一节将会谈到这些效果.

本章的相关链接:

Animate me(让我生动起来):使用FX

一些动态的效果可以使用 show() 和 hide()来表现:

$(document).ready(function() {
	$("a").toggle(function() {
		$(".stuff").hide('slow');
	}, function() {
		$(".stuff").show('fast');
	});
});

你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:

$(document).ready(function() {
	$("a").toggle(function() {
		$(".stuff").animate({
			height: 'hide',
			opacity: 'hide'
		}, 'slow');
	}, function() {
		$(".stuff").animate({
			height: 'show',
			opacity: 'show'
		}, 'slow');
	});
});

很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档

这些效果插件是位于jQuery插件列表的前面的，当然也有很多其他的插件，比如我们下一章讲到的表格排序插件。

本章的相关链接:

Sort me(将我有序化):使用tablesorter插件(表格排序)

这个表格排序插件能让我们在客户端按某一列进行排序，引入jQuery和这个插件的js文件，然后告诉插件你想要哪个表格拥有排序功能。

要测试这个例子，先在starterkit.html中加上像下面这一行的代码：

然后可以这样调用不着:

$(document).ready(function() {
	$("#large").tableSorter();
});

现在点击表格的第一行head区域，你可以看到排序的效果，再次点击会按倒过来的顺序进行排列。

这个表格还可以加一些突出显示的效果，我们可以做这样一个隔行背景色（斑马线）效果:

$(document).ready(function() {
	$("#large").tableSorter({
		stripingRowClass: ['odd','even'],	// Class names for striping supplyed as a array.
		stripRowsOnStartUp: true		// Strip rows on tableSorter init.
	});
});

关于这个插件的更多例子和文档可以在 tablesorter首页找到.

几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的

经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.

当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.

本章的相关链接:

Plug me:制作自己的插件

写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.

为你的插件取一个名字,在这个例子里面我们叫它"foobar".
创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js
创建一个或更多的插件方法,使用继承jQuery对象的方式,如:
```
jQuery.fn.foobar = function() {
	// do something
};
```

可选的:创建一个用于帮助说明的函数,如:

jQuery.fooBar = {
	height: 5,
	calculateBar = function() { ... },
	checkDependencies = function() { ... }
};

你现在可以在你的插件中使用这些帮助函数了:

jQuery.fn.foobar = function() {
	// do something
	jQuery.foobar.checkDependencies(value);
	// do something else
};

可选的l:创建一个默认的初始参数配置,这些配置也可以由用户自行设定,如:

jQuery.fn.foobar = function(options) {
	var settings = {
		value: 5,
		name: "pete",
		bar: 655
	};
	if(options) {
		jQuery.extend(settings, options);
	}
};

现在可以无需做任何配置地使用插件了,默认的参数在此时生效:

$("...").foobar();

或者加入这些参数定义:

$("...").foobar({
	value: 123,
	bar: 9
});

如果你release你的插件, 你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.

现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.

很多人试着控制所有的radio或者checkbox是否被选中,比如:

$("input[@type='checkbox']").each(function() {
	this.checked = true;
	// or, to uncheck
	this.checked = false;
	// or, to toggle
	this.checked = !this.checked;
});

无论何时候，当你的代码出现each时，你应该重写上面的代码来构造一个插件,很直接地:

$.fn.check = function() {
	return this.each(function() {
		this.checked = true;
	});
};

这个插件现在可以这样用:

$("input[@type='checkbox']").check();

现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.

$.fn.check = function(mode) {
	var mode = mode || 'on'; // if mode is undefined, use 'on' as default
	return this.each(function() {
		switch(mode) {
		case 'on':
			this.checked = true;
			break;
		case 'off':
			this.checked = false;
			break;
		case 'toggle':
			this.checked = !this.checked;
			break;
		}
	});
};

这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如:

$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');

如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.

从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个 key/value 对来重新设置每个参数.

作为一个练习,你可以试着将第四章的功能重写为一个插件.这个插件的骨架应该是像这样的:

$.fn.rateMe = function(options) {
	var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context
	
	var settings = {
		url: "rate.php"
		// put more defaults here
		// remember to put a comma (",") after each pair, but not after the last one!
	};
	
	if(options) { // check if options are present before extending the settings
		$.extend(settings, options);
	}
	
	// ...
	// rest of the code
	// ...
	
	return this; // if possible, return "this" to not break the chain
});

Next steps(下一步)

如果你想做更好的javascript开发,建议你使用一个叫 FireBug的firefox插件. 它提供了断点调试(比alert强多了)、观察DOM变化等很多漂亮的功能

如果你还有未解决的问题，或者新的想法与建议，你可以使用jQuery的邮件列表 jQuery mailing list.

关于这个指南的任何事情，你可以写mail给作者或者发表评论在他的日志：blog.

关于这个指南的翻译任何事情，你可以写mail给我或者发表评论在我的日志：blog.

还有什么...

大大感谢John Resig创造了这么好的library! 感谢jQuery community 为John提供了如此多的咖啡和其他的一切!

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻译:Keel - 最后更新: 2006-12-13

SIMONE 2007-06-25 17:34 发表评论

ajax缓存问题

SIMONE — Thu, 08 Feb 2007 01:15:00 GMT

使用Ajax中遇到的一个问题，手动刷新页面时，没有提交到后台处理，总显示第一次载入的数据。
页头已加入防缓存设置：

可结果依旧。
baidu了一下，找到相关资料。
解决方法：让提交的URL每次都向服务器端发送请求，而不是使用缓存。
方法一：加时间戳 var url = BaseURL + "&timeStamp=" + new Date().getTime();
方法二：加随机数 var url = BaseURL + "&r=" + Math.random();
方法三：自已想。。。

SIMONE 2007-02-08 09:15 发表评论

无尽的任务 JSON

SIMONE — Thu, 04 Jan 2007 03:03:00 GMT

技术饭还真是不好吃,今天为了搞定眼下这个难题,选择了Ajax.在看Ajax的时候看到了Json.这个东西看着不错,好吧,上网去down个用.

打开网站开始寻找我的目标,发现这个东西居然有好多版本.比如

JSON in ActionScript:

ActionScript3.

JSON in C.

JSON_checker.

JSON in C++:

jsoncpp.
zoolib.

JSON in C#:

JSON in Cold Fusion.

JSON in Delphi.

JSON in E.

JSON in Erlang.

JSON in Java:

JSON in JavaScript.

JSON in Lisp:

JSON in Lua.

JSON in ML and Ruby.

JSON in Objective C.

JSON in Objective CAML.

JSON in OpenLaszlo.

JSON in Perl.

JSON in PHP:

JSON in Python.

JSON in Rebol.

JSON in Ruby.

JSON in Squeak.

说实话,看到这些玩意,心里面顿时是凉了半截.

好多名词!!!

.看着这些东西感觉自己特别无知.幸好大多脸熟,心里面的虚荣心还没有跌倒低谷.

点击一个链接,比现在多一倍的新链接出现在眼前,每一个链接代表一个知识点.页面呈现的一瞬间理智立刻崩溃了.只是一个名不见经传的json就有如此之多的知识,那么其他的.......面对无穷无尽的知识海洋,不由理解了知识是学不完这句话.

在知识爆炸的今天,也许只有"现用现学"是解决这种情况的最好办法.

可是面对这些东西,开始觉得那句:"现用现学"是多么恐怖的一种境界.这种东西现学了能马上会用,用不是问题,问题是用这些新东西还能算出工程进度,还能编出可以维护的代码.如果再能保证代码的健壮性,那........

这里不由想到另一个问题:为什么现用现学还能用呢?如果是全新的东西,快速的学习肯定神仙也做不了.所以看起来全新的知识应该有相应的共通点.

是不是因为面向对象的思想呢?个人猜测,可能性比较大,因为一旦变成对象了,就可以不管他们的实现方式,一律归到已有的面向对象的思路中来,无非是多了几个新元素要记而已.要是这样,真应该感谢面向对象.

SIMONE 2007-01-04 11:03 发表评论

关于W3C DOM

SIMONE — Sun, 31 Dec 2006 08:59:00 GMT

摘要: W3C DOM 文档对象模型 (DOM) 是与平台和语言无关的接口，允许程序和脚本动态地访问和更新文档的内容，结构和样式。文档可以进一步处理，处理的结果可以放回到所提供的页面中。 ... 阅读全文

SIMONE 2006-12-31 16:59 发表评论

Ajax中使用JSON

SIMONE — Sun, 31 Dec 2006 08:52:00 GMT

提交数据使用json代替xml

页面：jsonExample.jsp

<%@ page contentType="text/html; charset=GBK" %>

<br />JSON示例<br />

服务器响应：

服务器：JSONExample.java

package ajaxbook.chap4;

import java.io.*;
import java.net.*;
import java.text.ParseException;
import javax.servlet.*;
import javax.servlet.http.*;
import org.json.JSONObject;

public class JSONExample
    extends HttpServlet {
//处理Post方法
protected void doPost(HttpServletRequest request,
                        HttpServletResponse response) throws ServletException,
      IOException {
    String json = readJSONStringFromRequestBody(request);

    //使用JSON绑字Ajax对象
    JSONObject jsonObject = null;
    try {
      jsonObject = new JSONObject(json);
    }
    catch (ParseException pe) {
      System.out.println("ParseException: " + pe.toString());
    }

    //返回输出结果
    String responseText = "You have a " + jsonObject.getInt("year") + " "
        + jsonObject.getString("make") + " " + jsonObject.getString("model")
        + " " + " that is " + jsonObject.getString("color") + " in color.";

response.setContentType("text/xml");
response.getWriter().print(responseText);
}

//得到参数
private String readJSONStringFromRequestBody(HttpServletRequest request) {
    StringBuffer json = new StringBuffer();
    String line = null;
    try {
      BufferedReader reader = request.getReader();
      while ( (line = reader.readLine()) != null) {
        json.append(line);
      }
    }
    catch (Exception e) {
      System.out.println("Error reading JSON string: " + e.toString());
    }
    return json.toString();
}
}

注意：要引入json.js和json的源文件，使用json.jar不行，源文件参见书籍源代码第三章

参考：Ajax基础教程作笔记吧

Trackback: http://tb.blog.csdn.net/TrackBack.aspx?PostId=975204

SIMONE 2006-12-31 16:52 发表评论

AJAX+jsp无刷新验证码实例

SIMONE — Mon, 11 Dec 2006 06:55:00 GMT

【导读】本文通过实例，介绍在做验证码的时候为了给用户很好的体验，需要在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效。同时，本例还特别适合检验用户名是否有效。

1、我们在做验证码的时候往往由于要反作弊，验证有时故意加入多的干扰因素，这时验证码显示不很清楚，用户经常输入错误。这样不但要重新刷新页面，导致用户没有看清楚验证码而重填而不是修改，而且如果没有用session保存下用户输入的其它数据的话(如姓名)，用户刚刚输入的内容也不存在了，这样给用户造成不好的体验。

2、本例在原有验证方式基础之上增加一段js，通过xmlhttp来获取返回值，以此来验证是否有效，这样即使用户浏览器不支持js，也不会影响他的正常使用了。

3、为了防止作弊，当用户连接3次输入错误时则重载一下图片，这样也利于用户因为图片上的验证码辨认不清而使其终无法输入正确。

4、本例还特别适合检验用户名是否有效，只要从后台做个sql查询，返回一个值或是xml即可。(这种例子太多，就在此不赘述了)。

5、本例的优点在于非常方便用户输入，而且减少对服务器端的请求，可以说既改善用户体验而且略会节省带宽成本，但相应地要在页面上增加一段JavaScript代码，在目前网速越来越快人们要求便捷舒适的今天，似乎我们更应注意提供给用户良好的使用感受。

代码如下：

1、img.jsp,输入主页面

																<%@ page contentType="text/html; charset=GBK" language="java" 
																import="java.sql.*" errorPage="" pageEncoding="GBK"%>

<%

//set Chinese Char 

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>





图片验证






																

AJAX(无刷新及时提示)验证码实例！cody by jarry



<%

String num=request.getParameter("num");

String random=(String)session.getAttribute("random");

String name=request.getParameter("name");

if(num!=null&&random!=null&&name!=null)

{

if(num.equals(random))

{  

out.println("
																恭喜您，验证码输入成功，这里是提交结果页面，可以写入数据库了！ 
																返回再测试
");

out.println("您的名字是："+name);

out.println("
");

out.println("您输入的是："+num);

out.println("验证码是："+random);

out.println("");

return;//javascript:history.go(-1)

}

}

%>




																onsubmit="return validata(this);">

您的姓名： (为了更好地说明此例，特加姓名一项)


验 证 码： 
																 
																验证码看不清

2、num.jsp,反馈xmlhttp请求的页面

																<%@ page contentType="text/html; charset=GBK" language="java" 
																import="java.sql.*" errorPage="" pageEncoding="GBK"%>

<%

//set Chinese Char 

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>

<%

String num=request.getParameter("num");

String random=(String)session.getAttribute("random");
																if(num!=null&&random!=null)

{

if(!num.equals(random))

{

/*

out.println("");

out.println("");

//response.sendRedirect("img.jsp");

*/

out.print("validate_failed:"+random);

}

else

{

//out.println("
验证成功！");

out.print("validate_successful:"+random);

}

}

%>

3、random.jsp,生成验证码图片的页面

																
com.sun.image.codec.jpeg.*,java.util.*" %>]]>
																<%@ page autoFlush="false"  import="java.util.*,java.awt.*,
																java.awt.image.*,com.sun.image.codec.jpeg.*,java.util.*" %>
																<%

//set Chinese Char 

//Cody by JarryLi@gmail.com;

//homepage:jiarry.126.com

request.setCharacterEncoding("GBK");

response.setCharacterEncoding("GBK");

response.setContentType("text/html; charset=GBK");

%>

<%

String chose="0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
																char display[]={'0',' ','0',' ','0',' ','0'},ran[]={'0','0','0','0'},temp;
																Random rand=new Random();
																for(int i=0;i<4;i++)

{
																temp=chose.charAt(rand.nextInt(chose.length()));
																display[i*2]=temp;
																ran[i]=temp;

}



String random=String.valueOf(display);
																session.setAttribute("random",String.valueOf(ran));

%>

<%
																out.clear();

response.setContentType("image/jpeg");

response.addHeader("pragma","NO-cache");

response.addHeader("Cache-Control","no-cache");

response.addDateHeader("Expries",0);

int width=80, height=30;

BufferedImage image = new BufferedImage(width, height, 
																BufferedImage.TYPE_INT_RGB);

Graphics g = image.getGraphics();

//以下填充背景颜色

g.setColor(Color.GREEN);

g.fillRect(0, 0, width, height);

//设置字体颜色

g.setColor(Color.RED);

Font font=new Font("Arial",Font.PLAIN,20);

g.setFont(font);

//g.drawString(random,5,14);

g.drawString(random,5,20);

g.dispose();

ServletOutputStream outStream = response.getOutputStream();

JPEGImageEncoder encoder =JPEGCodec.createJPEGEncoder(outStream);

encoder.encode(image);

outStream.close();

%>

4、net.js,封装好的xmlhttp对象，可以很方便的调用

																/* namespacing object */

var net=new Object();



net.READY_STATE_UNINITIALIZED=0;

net.READY_STATE_LOADING=1;

net.READY_STATE_LOADED=2;

net.READY_STATE_INTERACTIVE=3;

net.READY_STATE_COMPLETE=4;

/*--- content loader object for cross-browser requests ---*/

net.ContentLoader=function(url,on_load,on_error,method,params,contentType){

this.req=null;

this.on_load=on_load;

this.on_error=(on_error) ? on_error : this.defaultError;

this.loadXMLDoc(url,method,params,contentType);

}

net.ContentLoader.prototype.loadXMLDoc=function(url,method,params,contentType){

if (!method)

{

method="GET";

}

if (!contentType && method=="POST")

{

contentType='application/x-www-form-urlencoded';

}

if (window.XMLHttpRequest)

{

this.req=new XMLHttpRequest();

}

else if (window.ActiveXObject)

{

//add try catch;

try {

this.req = new ActiveXObject("Msxml2.XMLHTTP");

}catch (e1){

try {

this.req = new ActiveXObject("Microsoft.XMLHTTP");     

} catch (e2){

}

}

//

//this.req=new ActiveXObject("Microsoft.XMLHTTP");

}

if (this.req)

{

try

{

var loader=this;

this.req.onreadystatechange=function()

{

net.ContentLoader.onReadyState.call(loader);

}

this.req.open(method,url,true);

if (contentType)

{

this.req.setRequestHeader('Content-Type', contentType);

}

this.req.send(params);

}

catch (err)

{

this.on_error.call(this);

}

}

}

net.ContentLoader.onReadyState=function(){

var req=this.req;

var ready=req.readyState;

if (ready==net.READY_STATE_COMPLETE){

var httpStatus=req.status;

if (httpStatus==200 || httpStatus==0){

this.on_load.call(this);

}else{

this.on_error.call(this);

}

}

}

net.ContentLoader.prototype.defaultError=function(){

alert("error fetching data!"

+"\n\nreadyState:"+this.req.readyState

+"\nstatus: "+this.req.status

+"\nheaders: "+this.req.getAllResponseHeaders());

}

（责任编辑火凤凰 sunsj@51cto.com TEL：（010）68476636-8007）

SIMONE 2006-12-11 14:55 发表评论

prototype.js　1.4版开发者手册(强烈推荐)

SIMONE — Thu, 23 Nov 2006 03:31:00 GMT

摘要: http://wiki.script.aculo.us/scriptaculous/show/Prototype 这是一个很好的网站，很值得一看！！！！！！！！！！！！！！！！！！！！！看到一个很好的东西在国内没有被很多人使用起来，实在是不爽，所以花了很大功夫把这个手册翻译成中文，由于这篇文章很长，所以，翻译的工作量很大而且有些地方英文版也没有说清楚，虽得查看源代码，好在不是坚持做完... 阅读全文

SIMONE 2006-11-23 11:31 发表评论

Struts AjaxTags

SIMONE — Wed, 22 Nov 2006 06:10:00 GMT

2005年Frank W. Zammetti扩展了Struts的Tag库，使Struts具备了AJAX功能。

（注：下面的代码引用自Frank W. Zammetti 的ajaxtags包）

Tag库的扩展

1、FormTag

增加了refAjax属性以及setter和getter方法；

2、BaseHandlerTag

增加了refAjax属性以及setter和getter方法；

同时扩展了prepare×××Events方法，使其加载Ajax属性，如：

if (getOnkeydown() != null) {
......

           }
           /* Frank W. Zammetti */
           else {
                  prepareAjax("onkeydown", handlers);
           }
           /* Frank W. Zammetti */

3、Struts-Html.tld

增加了refAjax属性；

应用

1、ajax-config.xml

......

                            //发送请求的设置

                                 example1.do
                                 firstName=firstName,lastName=lastName

                            //回调函数（方法）及回写区域的设置

                                 example1_resultLayer

......

2、struts-config.xml

......

//与其它Action的区别是：Ajax调用的Action没有input和forward

type="com.omnytex.ajaxtags.Example1Action" />
......

//Ajax Tag Plugin

......

3、Jsp客户界面

......

//对应于ajax-config.xml中的form ajaxRef

......

//对应于ajax-config.xml中的Element ajaxRef

           Result:

           //对应于ajax-config.xml中的responseHandler

           ......

//启用Ajax（应该放在Jsp的最后）

......

4、Action

......

public ActionForward execute( ...... ) throws Exception {

try {

......

//Ajax的Action需要输出内容到out

                    PrintWriter out = response.getWriter();
                    out.println(......);
                    out.flush();
                    out.close();

                } catch (Exception e) {
                    System.err.println("Exception in Example1Action.execute(): " + e);
                }

//由于Ajax的Action输出的内容由页面的区域接收，不需要跳转到其它页面

//所以，返回null

return null;

}

......

Struts Ajax Tag工作原理

1、Struts启动，加载AjaxInit；

2、AjaxInit解析ajax-config.xml；

3、Struts加载AjaxEnabled的Jsp；

4、Struts-AjaxTag根据Form ajaxRef和elment ajaxRef找到ajax-config的设置；

5、输出AjaxEnabled的Html（Tag库加入了Ajax需要的Script，如：XMLHttpRequest）；

6、用户输入数据，提交数据（异步模式提交后，用户可以继续其它操作）；

7、XMLHttpRequest对象接管提交数据，并向Struts提交do及参数；

8、Struts ActionServlet加载FormBean，和相应的Action；

9、Struts Action执行相应逻辑，得到返回的数据，通过out输出；

10、XMLHttpRequest得到Struts返回的数据；

11、XMLHttpRequest调用设置的回调函数（方法），输出数据到指定的区域；

SIMONE 2006-11-22 14:10 发表评论

Ajax跨域请求解决方法之Modello篇

SIMONE — Thu, 26 Oct 2006 05:05:00 GMT

Modello 是一个允许并且鼓励你用 JavaScript 来编写类的框架，而Modello.ajax则是利用此框架达到Ajax跨域请求的一个Ajax封装类。

对于跨域调用，Modello.ajax 采用在本域服务器设置一个中转 proxy 的方式。使用 proxy 方式可以不用对个别浏览器进行特殊设置，不用依赖具体的服务器，并且具备扩展能力等优点。随 Modello.ajax 工具集提供的 proxy 用 php 写成，可运行 php 的服务器都可以安装。（以上内容转自《Ajax Wing: 跨域Ajax工具: Modello.ajax》）

使用Modello的代码如下：

代码实例

SIMONE 2006-10-26 13:05 发表评论

关于XML（XMLHTTP）跨域加载数据不会出现跨域的安全提示信息的问题

SIMONE — Thu, 30 Mar 2006 07:02:00 GMT

网上看了很多资料，但好象很少人谈到跨域读取XML文档的问题，有些论坛或BLOG关于XML跨域读取的问题，实现起来非法复杂。
在这里我介绍一下XMLHTTP跨域读取页面数据的问题，以JS为例

一、读取数据

//建立对象
var xml = new ActiveXObject("Microsoft.XMLHTTP")

//这里的abc.xml是被读取的文件，当然也可以换成别的文件，false表示非异步传输，async是asynchronism简写
xml.open("get","http://www.mydomain.com/abc.xml",false)
xml.send()

二、在被读取数据的域根下（上例是在www.mydomain.com/下），建立一个XML 策略文件，名字一定要是crossdomain.xml。

在策略文件中加入以下代码

//domain属性的值就是被允许从本站读取数据的来源域名

这样就完成了跨域读取数据并不会出现跨域的安全提示信息了

SIMONE 2006-03-30 15:02 发表评论

BlogJava-SIMONE-随笔分类-AJAX

jQuery 与 prototype 共存

推荐--jQuery使用手册

jQuery中文入门指南，翻译加实例，jQuery的起点教程

jQuery中文入门指南，翻译加实例，jQuery的起点教程

中文版译者：Keel

以下部分为原文翻译:

jQuery入门指南教程

内容提要

安装

本章的相关链接:

Hello jQuery

本章的相关链接:

Find me:使用选择器和事件

本章的相关链接:

Rate me:使用AJAX

本章的相关链接:

Animate me(让我生动起来):使用FX

本章的相关链接:

Sort me(将我有序化):使用tablesorter插件(表格排序)

本章的相关链接:

Plug me:制作自己的插件

Next steps(下一步)

还有什么...

© 2006, Jörn Zaefferer - last update: 2006-09-12

中文版翻译:Keel - 最后更新: 2006-12-13

ajax缓存问题

无尽的任务 JSON

关于W3C DOM

Ajax中使用JSON

服务器响应：

AJAX+jsp无刷新验证码实例

prototype.js 1.4版开发者手册(强烈推荐)

Struts AjaxTags

Ajax跨域请求解决方法之Modello篇

关于XML（XMLHTTP）跨域加载数据不会出现跨域的安全提示信息的问题

prototype.js　1.4版开发者手册(强烈推荐)