Ajax与JSON的一些总结(5)_H5之家 - 中国HTML5教程资源分享第一站

上面我们定义了一个对象JQWeibo，其中loadWeibo()方法使用jQuery的Ajax方法向微博API发送跨源请求，接下来让我们实现该方法吧。

// The function to get weibo data. loadWeibo: function() { $.ajax({ // Weibo API. url: "", type: "GET", dataType: "jsonp", data: { source: JQWeibo.appKey, count: JQWeibo.numWeibo }, // When the requet completed, then invokes success function. success: function(data, textStatus, xhr) { // Sets html structure. var html = '<div class="weibo">' + '<a href="" target="_blank">USER</a>' + '：WEIBO_TEXT<div class="time">AGO</div>'; // Appends weibos into html page. for (var i = 0; i < data.length; i++) { $(JQWeibo.appendTo).append( html.replace('WEIBO_TEXT', JQWeibo.ify.clean(data[i].text)) // Uses regex and declare DOMAIN as global, if found replace all. .replace(/DOMAIN/g, data[i].user.domain) .replace(/USER/g, data[i].user.screen_name) .replace('AGO', JQWeibo.timeAgo(data[i].created_at)) ); } } }) }

现在，我们使用$.ajax()方法向微博API发送跨源请求，而且我们向API传递了JQWeibo.appKey和JQWeibo.numWeibo，当请求完成后，调用Success()方法把JSON数据插入的页面当中。

页面的HTML代码如下：

"-//W3C//DTD HTML 4.01 Transitional//EN" ""> <html> <head> <="text/html;charset=UTF-8"> <> <> <="css/WeiboFeed.css"> </head> <body> <> </body> </html>

ajax9

图8 跨源数据

如上图所示，我们使用$.ajax()方法调用公共微博接口，当成功获取服务器回调数据插入到我们的页面当中。

1.1.3 总结

本文主要介绍了Ajax在同源请求适用性，但在跨源请求中其存在的局限性，进而介绍Ajax和JSONP在跨源请求下解决方法。

回答qianlifeng关于跨源请求的几个问题：

1.一般的跨源不用jsonp请求为什么会报错？和同源的不都是一个请求么？（可能对ajax了解不深）

答：首先跨源请求的解决方法不仅仅有JSON，本文中提及了其他方法，如：表单POST方式、服务器代理、Html5的XDomainRequest和Flash request等；而你提到报错，我觉得你首先要确认数据格式是否正确。关于跨原请求和同源请求本文已经给出了介绍。

2.关于“用Javascript定义回调函数”那块看的不是很明白。传递当前页面的一个js方法给跨源服务器，为什么就能跨源请求了呢？（JSONP？）服务端根据这个js方法做了什么操作啊？

答：首先我们理解JSON是一种数据格式，而JSONP像似通过一个方法名来封装JSON格式；而跨源请求不是说指定一个回调函数实现的，而是我们利用了浏览器允许跨源请求<script>资源，你也可以我的HTML代码中使用的是Google提供的jQuery库，这也说明了<script>资源可以跨源请求。当我们发送跨源请求后，服务器会返回JSONP，但服务器无法预知接受JSON数据的方法名，所有我们要把函数名告诉（传递）服务器。

//JSON } //JSONP

3.看你新浪微博的那个例子，是jquery的ajax对跨源做了处理？能不能说说您提到的两种跨源方式的区别或者不同的应用场景，还是随便都一样？

答：是通过$.ajax()方法实现的，如果你想使用动态Javascript实现也可以；至于两种跨源的区别已经在博文中指出了。

回答@On the road....关于JSON反序列化为对象的实现：

答：一般我们可以通过三种方法把JSON数据反序列化为对象，分别是：ASP.NET AJAX中引入的JavaScriptSerializer，WCF中引入的DataContractJsonSerializer，以及Json.NET。

假设，我们获取到员工信息（employee）的JSON数据，它包含两个属性分别是id和复杂属性name，具体如下所示：

[ { , "name": { , "firstName": "JK" } }, { , "name": { , "firstName": "Cindy" } } ] + "{\"id\":\"82106\",\"fullname\":{\"lastName\":\"Leung\",\"firstName\":\"Cindy\"}}]";