$.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. <?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. }

12. 翻開jquery.的源碼，一步步找:

14. getJSON: function( url, data, callback ) {

15.         return jQuery.get(url, data, callback, "json");

16. }

18. 再找JQuery.get

20. get: function( url, data, callback, type ) {

21.         // shift arguments if data argument was omited

23.         if ( jQuery.isFunction( data ) ) {

24.                 type = type || callback;

25.                 callback = data;

26.                 data = null;

27.         }

29.         return jQuery.ajax({

30.                 type: "GET",

31.                 url: url,

32.                 data: data,

33.                 success: callback,

34.                 dataType: type

35.         });

36. }

38. 再找 jQuery.ajax

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, ""))

56.                         // Locate the specified elements

57.                         .find(selector) :

59.                         // If not, just inject the full result

60.                         res.responseText );

61.                 }

63.                 if ( callback ) {

64.                         self.each( callback, [res.responseText, status, res] );

65.                 }

66.         }

67. });

69. return this;

70. }

72. 再找ajax方法，揭開秘密要來了:

74. 由於太多，帖開頭部分，有興趣的同學自己去看下

76. ajax: function( origSettings ) {

77.         var s = jQuery.extend(true, {}, jQuery.ajaxSettings, origSettings);

79.         var jsonp, status, data,

80.         callbackContext = origSettings && origSettings.context || s,

81.         type = s.type.toUpperCase();

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.         }

88.         比較重要的一部分:

90.         http://localhost/index/ajax?callback=jsonp1274437815229&id=1

92.         伺服器判斷是否有這個callback參數，如果有就返回JS函數名＋對象

94.         //jsonp = jsonp1274437815229（請求地址的回調參數）

96.         //jsonp全域函數

97.         window[ jsonp ] = window[ jsonp ] || function( tmp ) {

98.                 data = tmp;

99.                 success();

100.                 complete();

101.                 // Garbage collect

102.                 window[ jsonp ] = undefined;