技术开发 频道

项目分析:原生对象前端加载数据性能PK

  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 + "毫秒.");

  });

  }

 

  同样通过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");

  }

 

  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 jsonData = JSON.parse(data, null); 用到了一个json2.js 的开源JSON解析组件,将data的字符串转换为一个JSON对象。运行结果为:

  和jQuery的$.ajax函数也是基本相差无几。

  测试说明:$.ajax,$.getJSON,原生对象返回JSON加载数据的效率基本一样,比WebService的效率好些。

0
相关文章