jQuery에서 getJSON의 크로스 필드 원리에 대한 깊은 설명

며칠 전에 내가 도구를 개발했을 때, 그 중의 한 기능은 바로 이 페이지의 짧은 사이트 주소를 얻는 것이다.
이 생각은 좋지만, 내가 행동에 옮겼을 때, 이것은 영역을 뛰어넘어야 한다는 것을 발견했다.
처음에 나의 생각은 크로스 필드의 가장 간단한 방법은 스크립트 탭을 추가하는 것이다. 왜냐하면 스크립트 탭은 크로스 필드를 허용하기 때문이다.
그러나 문제는 또 생겼다. 상대방의 API가 되돌아오는 것은 json 대상이다.script 탭으로 실행할 수 있을 뿐 안에 있는 것을 얻을 수 없다. 즉, 되돌아오는 것은 통제할 수 없다는 것이다.
그리고 나서 나는 jQuery의 getJSON 방법을 생각해 보았는데 그 안의 문장이 이렇게 큰지 몰랐다.
jQuery는 매우 똑똑합니다. 그도 script 요청만으로는 되돌아오는 것을 받아들일 수 없다는 것을 깨달았기 때문에 그는 전체적인callback 함수를 설계하여 요청을 보낼 때 이callback 함수도 전송합니다.
서버는 이callback 함수가 있는지 판단합니다. 없으면 대상을 되돌려주고, 있으면 함수 이름 (대상) 을 되돌려줍니다.
저희가 아래의 주소를 통해서 한번 볼 수 있어요.
http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn
여러분은 열어 보셔도 됩니다. 결과는 json 대상입니다.
하면, 만약, 만약...
http://to.ly/api.php?json=1&longurl=http%3A%2F%2Fwww.skiyo.cn&callback=somefunc
보시다시피 돌아오는 건요.

somefunc({“shorturl”: “http:\/\/to.ly\/3XHP”, “ok”: true})

전래된 것도 바로 함수 이름이다.
이 생각은 매우 좋은데, 단점은 상대방 서버가 반드시 제어할 수 있어야 한다는 것이다.
큰 방향은 이것이지만, 예를 들어 어떻게 익명 함수에 전역 함수를 설정하고, 어떻게 이 전역 함수를 익명 함수로 바꾸는가!
원래는 jQuery의 getJSON을 직접 가져와서 직접 사용하려고 했는데, 보고 보니 jQuery의 aax 방법이 모두 혼합되어 벗겨지는 것도 쉬운 일이 아니라는 것을 알게 되었다.
다행히도 나는 자바스크립트를 조금 더 알고 있다. 나의 가공과 수정을 거쳐 아래의 예는 이미 정상적으로 사용할 수 있다.자세한 내용은 주석을 볼 수 있습니다.
다음은 코드 세그먼트입니다.

(function() {
 var cross = {
 // callback .. 
 callback : 'cross' + parseInt(Math.random()*1000),
 init : function() {
 this.getJSON('http://to.ly/api.php?json=1&longurl='+encodeURIComponent('http://www.skiyo.cn/'), function(data){
 alert(data.shorturl);
 });
 },
 getJSON : function(url, callback) {
 var c = this.callback;
 url = url + "&callback=" + c;
 // Handle JSONP-style loading
 // window , .
 window[ c ] = window[ c ] || function( data ) {
 // 
 callback(data);
 // Garbage collect
 window[ c ] = undefined;
 try {
  delete window[ c ];
 } catch(e) {}
 if ( head ) {
  head.removeChild( script );
 }
 };
 var head = document.getElementsByTagName("head")[0] || document.documentElement;
 var script = document.createElement("script");
 script.src = url;
 // Handle Script loading
 var done = false;
 // Attach handlers for all browsers
 script.onload = script.onreadystatechange = function() {
 if ( !done && (!this.readyState 
  this.readyState === "loaded" || this.readyState === "complete") ) {
  done = true;
  // Handle memory leak in IE
  script.onload = script.onreadystatechange = null;
  if ( head && script.parentNode ) {
  head.removeChild( script );
  }
 }
 };
 head.insertBefore( script, head.firstChild );
 },
 };
 //go
 cross.init();
})();

총결산
이 jQuery에서 getJSON의 크로스오버 원리에 관한 글은 여기까지 소개되었습니다. 더 많은 jQuery getJSON의 크로스오버 원리에 관한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!