$. GetJSON () Principle of cross-Origin

/* Data can be requested across domains */

The principle is to use a global function (callback) to operate the server data loaded by <script>.

First, write a simple example: (jsonpCallback can dynamically create and register as a global function)

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

 

Server:

<? Php
Echo "jsonpCallback ({data: 'json data '})";

 

Json data

 

 

$. Get (url, params, callback)

Like the $. post request method, the request type is different.

Returns the character format. You can use the $. evalJSON () method to convert the format.

Then perform operations on the JSON object

$. GetJSON (url, params, callback)

Return a JSON object. The cross-origin example is as follows:

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. Open the source code of jquery and find it step by step:

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

15. Return jquery. Get (URL, Data, callback, "JSON ");

16. }

18. Find jquery. Get again

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. Find jQuery. ajax again

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. Find the ajax method and uncover the secret:

74. Because there are too many posts at the beginning, you can check them if you are interested.

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. Important part:

90. Http: // localhost/index/ajax? Callback = jsonp00004438515229 & id = 1

92. The server determines whether the callback parameter exists. If yes, the system returns the JS function name + object.

94. // Jsonp = jsonp000044000015229 (callback parameter of the request address)

96. // Jsonp global function

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

98. Data = tmp;

99. Success ();

100. Complete ();

101. // Garbage collect

102. Window [jsonp] = undefined;