Jauerymobile ajax跨域原理及案例

Jauerymobile ajax跨域原理及案例
一、$.getJSON()跨域之原理
/*可以跨域请求数据*/
其原理是对<script>装载的服务端数据用全局函数(callback)操作
首先写个简单示例：(jsonpCallback可动态创建注册成全局函数)
<script type="text/javascript">
var m = Math.random();
var jsonpCallback = new Function("result", "alert(result.data);");
</script>
<script type="text/javascript" src="http://localhost/json.php?jsonp=jsonpCallback"></script >
服务端:
<?php
echo "jsonpCallback({data:'json data'})";
会弹出:json data
$.get(url, params, callback)
与$.post请求方法一样，只是请求类型不同
返回的是字符格式,可以用 $.evalJSON()方法进行转换格式
然后对JSON对象进行操作
$.getJSON(url, params, callback)
返回JSON对象，跨域示例如下:
1.
1. <?php
2. function getdata()
3. {
4. $.getJSON(
5. "/payment/payment/paytest?callback=?",
6. {id:1,name:"name"},
7. function(jsondata){
8. alert(jsondata.json);
9. });
10. }
11.
12. 翻开jquery.的源码，一步步找:
13.
14. getJSON: function( url, data, callback ) {
15. return jQuery.get(url, data, callback, "json");
16. }
17.
18. 再找JQuery.get
19.
20. get: function( url, data, callback, type ) {
21. // shift arguments if data argument was omited
22.
23. if ( jQuery.isFunction( data ) ) {
24. type = type || callback;
25. callback = data;
26. data = null;
27. }
28.
29. return jQuery.ajax({
30. type: "GET",
31. url: url,
32. data: data,
33. success: callback,
34. dataType: type
35. });
36. }
37.
38. 再找 jQuery.ajax
39.
40. jQuery.ajax({
41. url: url,
42. type: type,
43. dataType: "html",
44. data: params,
45. complete: function( res, status ) {
46. // If successful, inject the HTML into all the matched elements
47. if ( status === "success" || status === "notmodified" ) {
48. // See if a selector was specified
49. self.html( selector ?
50. // Create a dummy div to hold the results
51. jQuery("<div />")
52. // inject the contents of the document in, removing the scripts
53. // to avoid any 'Permission Denied' errors in IE
54. .append(res.responseText.replace(rscript, ""))
55.
56. // Locate the specified elements
57. .find(selector) :
58.
59. // If not, just inject the full result
60. res.responseText );
61. }
62.
63. if ( callback ) {
64. self.each( callback, [res.responseText, status, res] );
65. }
66. }
67. });
68.
69. return this;
70. }
71.
72. 再找ajax方法，揭开秘密要来了:
73.
74. 由于太多，帖开头部分，有兴趣的同学自己去看下
75.
76. ajax: function( origSettings ) {
77. var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);
78.
79. var jsonp, status, data,
80. callbackContext = origSettings && origSettings.context || s,
81. type = s.type.toUpperCase();
82.
83. // convert data if not already a string
84. if ( s.data && s.processData && typeof s.data !== "string" ) {
85. s.data = jQuery.param( s.data, s.traditional );
86. }
87.
88. 比较重要的一部分:
89.
90. http://localhost/index/ajax?callback=jsonp1274437815229&id=1
91.
92. 服务器判断是否有这个callback参数，如果有就返回JS函数名＋对象
93.
94. //jsonp = jsonp1274437815229（请求地址的回调参数）
95.
96. //jsonp全局函数
97. window[ jsonp ] = window[ jsonp ] || function( tmp ) {
98. data = tmp;
99. success();
100. complete();
101. // Garbage collect
102. window[ jsonp ] = undefined;
二、用jquery的ajax跨域请求案例和注意事项
业务需求：一台独立的新闻服务器（A），对外提供新闻。

客户（B）网页引入A的js，即可请求新闻。

B请求新闻所产生的页面有A的js生成。

A提供<script type="text/javascript" src="http://newsdomain/js/news.js" ></script>来让B 引入。

一般的ajax无法跨域请求，jquery的$.ajax 也是如此。

均提示访问被拒绝。

这是由于浏览器对javascript的安全机制造成的。

请求时服务器可以得到响应并生成数据，但无法跨域返回给B。

查了很多资料，Jquery的jsonp可以实现跨域请求和响应。

但是网上的写法各不相同，甚至不全面，经过多番研究得以实现。

我将客户端的写法和服务端的写法写出来，与各位同仁一起分享。

首先js的写法。

news.js中
function requestNews(page,key,from,to,sort,language){
$.getJSON("http://"+domain+"/requestNews/getNews?mehtod=splitPage&page="+page+"&ke y="+k+"&from="+from+"&to="+to+"&sort="+sort+"&language="+language+"&jsonpcallback=?" ,null,function call(json){
alert();
});
}
大家有发现这个url有些特别http://******?参数=值jsonpcallback=? 。

这种写法是jsonp的写法。

jquery就是通过jsonpcallback=? 这个参数找到回调函数function call(json) 的。

所以请求中必须加jsonpcallback=?。

在服务器端会接收jsonpcallback这个值。

jquery会把那个？做处理，jsonpcallback=jsonp1287199309053。

$.getJSON这个函数的的参数写法你可以去查一下。

$.getJSON（地址，数据，回调函数）
由于我的数据已经与url合并，所以我的第二个参数为null，不写也可。

下面说服务器端对请求的数据如何处理和返回。

重点只有两个。

1，json数据格式。

2，为了让回调函数可以接受返回值，其写法特被。

第一json数据格式{name：value}.详细的自己去查。

第二。

服务端一定要接收jsonpcallback=?
String callBack = req.getParameter("jsonpcallback");
String strJson = {"info":"aaaa"};
String result = callBack (strJson);// 这里很重要。

打印出来的结果就是
jsonp1287199543662({"info":"aaaa"}) //这里要看清楚。

重点讲完了，最后一点就是返回
resp.setContentType("application/json;charset=UTF-8"); //这里的格式是json
resp.setHeader("Cache-Control","no-cache");
PrintWriter out = resp.getWriter();
out.print(callBack); // 这是是print 不是write。

out.close();
这样就实现了ajax跨域访问。

很多事情做出来的时候再回想感觉特简单，当你摸索的过程中却云里雾里也很烦恼，尤其在网上查到的各种方法都无效的时候，烦。

其实就这么简单，如果你有
什么疑问欢迎你加入我的QQ 群，一起探讨。