JS 框架使用及迁移(三)-Ajax调用改造

[size=large]ajax 改造及其他
在现在的前端应用中，ajax 调用是相当重要的一环。在 ajax 的调用上。不过还是有一些值得注意并加以分辨的地方。
先看两段代码：
第一段 Prototype:

document.observe('dom:loaded', function(){
	$("btnok").observe('click', function(){
		clickButton();
	});
});

function clickButton() { 
	var url = '/user/info.php';
	var pars = "uid=1&r="+Math.random();
	var ajax = new Ajax.Request(url,{
		method:'get',
		parameters:pars,
		onSuccess:function(data)
		{
			callbackfunc(data);
		},
	});
}
function callbackfunc(data)
{
	console.log(data.responseText.evalJSON());
	alert("SUCCESS");
}

第二段：jQuery

$j(document).ready(function(){
	$j("#btnok").click(function(){
		clickButton();
	});
});

function clickButton() {
	$j.ajax({
		url:'/user/info.php',
		data:{uid:2, r:Math.random()},
		type:'get',
		success:function(json){
			callbackfunc(json);
		},
		dataType:'json'
	});
 
}
function callbackfunc(data) 
{
	console.log(data);
	alert("SUCCESS");
}

这两段代码，分别演示了 Prototype 和 jQuery 中的ajax 的 get 调用。从代码上，可以看出，两段代码大同小异。
都分别有 url, 参数，回调函数等。光从这两段上，还看不出 jQuery 的优势，从个人的经验来看，就是用习惯了 jQuery 之后， new Ajax.Request 这样的调用，很容易忘记。而习惯在 Prototype 中也写成 Ajax.Request。
事实上，jQuery 为我们提供了更为简便的方法，比如上面的 clickButton 函数，可能简单地改造为：

var url = '/user/info.php';
	var params = {
		uid:1,
		r:Math.random()
	};
	$j.get(url,params,callbackfunc,'json');

甚至写成一行就可以了。

$j.get('/user/info.php', {uid:1, r:Math.random}, callbackfunc, 'json');

同理，也提供了 $j.post 方法。
这是多么地精巧啊。

在其他的应用中，始终要明确的是，由于 jQuery 对选择器取回来的对象进行了封装，
所以取属性时，设置属性时都得用 attr 方法，如果忘记了这点，直接调用原生属性 ，也不会出错，就是出不来结果。
而 Prototype 取回来的对象，直接调用原生的属性就成了。比如设置照片的 src 。
jQuery :

$j("#img").attr("src", url);

Prototype:

$("img").src = url;

[/size]