3)接着,使用$.getJSON来调用并且JSON加载数据:
代码
function bindDatajQueryGetJson() {
var watch = new Stopwatch();
watch.start();
$.getJSON("JsonHandler.ashx", function(data) {
var builder = new Sys.StringBuilder();
for (var i = 0, length = data.length; i < length; i++) {
builder.append(String.format("
UserId:{0}, UserName:{1}, Email:{2}
", data[i].UserId, data[i].UserName, data[i].Email));
}
$("#msg5").html(builder.toString());
watch.stop();
$("#time5").html("用时:" + watch.ms + "毫秒.");
});
}
var watch = new Stopwatch();
watch.start();
$.getJSON("JsonHandler.ashx", function(data) {
var builder = new Sys.StringBuilder();
for (var i = 0, length = data.length; i < length; i++) {
builder.append(String.format("
UserId:{0}, UserName:{1}, Email:{2}
", data[i].UserId, data[i].UserName, data[i].Email));
}
$("#msg5").html(builder.toString());
watch.stop();
$("#time5").html("用时:" + watch.ms + "毫秒.");
});
}
同样通过JsonHandler.ashx的页面处理程序执行返回数据,运行加载结果为:

和$.ajax相差无几,实际从jQuery代码中可以看出实际上$.getJSON调用的就是$.ajax函数:
代码
get: function(url, data, callback, type)
{
// shift arguments if data argument was ommited
if (jQuery.isFunction(data))
{
callback = data;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
},
getJSON: function(url, data, callback)
{
return jQuery.get(url, data, callback, "json");
}
{
// shift arguments if data argument was ommited
if (jQuery.isFunction(data))
{
callback = data;
data = null;
}
return jQuery.ajax({
type: "GET",
url: url,
data: data,
success: callback,
dataType: type
});
},
getJSON: function(url, data, callback)
{
return jQuery.get(url, data, callback, "json");
}
4)接着,使用xmlHttp.js的原生对象调用并且JSON加载数据:
代码
function bindDataPrototypeAjaxJson() {
var watch = new Stopwatch();
watch.start();
Request.sendGET("JsonHandler.ashx", false, function(data) {
var jsonData = JSON.parse(data, null);
var builder = new Sys.StringBuilder();
for (var i = 0, length = jsonData.length; i < length; i++) {
builder.append(String.format("
UserId:{0}, UserName:{1}, Email:{2}
", jsonData[i].UserId, jsonData[i].UserName, jsonData[i].Email));
}
$("#msg11").html(builder.toString());
watch.stop();
$("#time11").html("用时:" + watch.ms + "毫秒.");
});
}
var watch = new Stopwatch();
watch.start();
Request.sendGET("JsonHandler.ashx", false, function(data) {
var jsonData = JSON.parse(data, null);
var builder = new Sys.StringBuilder();
for (var i = 0, length = jsonData.length; i < length; i++) {
builder.append(String.format("
UserId:{0}, UserName:{1}, Email:{2}
", jsonData[i].UserId, jsonData[i].UserName, jsonData[i].Email));
}
$("#msg11").html(builder.toString());
watch.stop();
$("#time11").html("用时:" + watch.ms + "毫秒.");
});
}
其中var jsonData = JSON.parse(data, null); 用到了一个json2.js 的开源JSON解析组件,将data的字符串转换为一个JSON对象。运行结果为:

和jQuery的$.ajax函数也是基本相差无几。
测试说明:$.ajax,$.getJSON,原生对象返回JSON加载数据的效率基本一样,比WebService的效率好些。