$.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.         "http://www.test.com/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;