하나의 PHP 파일에 두 개의 자바 스크립트 파일에서 응답을 얻기 위해 아약스 호출하기

Question

나는 JQuery Ajax로 작업 중이다. 응답을 요구하는 PHP 파일은 서버에 있습니다. 첫 번째 JavaScript 파일은 PHP가있는 서버의 동일한 디렉토리에 있고 두 번째 파일은 내 크롬 확장 내에서 사용중인 로컬로 저장됩니다. PHP에서 Ajax를 실행하여 로컬 JavaScript 파일에서 코드를 작성하고 응답을 얻었습니다. 원하는 것은 서버에서 JavaScript를 호출하는 것이고 두 가지 방법으로 해결할 수 있습니다.

1) Ajax가 서버의 동일한 디렉토리에 저장된 동일한 PHP 코드 블록을 호출하도록하기.

2) 로컬 JavaScript 파일에서 서버의 JavaScript를 호출하십시오. 로컬 자바 스크립트가 응답을 받으면이 로컬 자바 스크립트에서 서버의 JavaScript를 호출하는 메소드를 사용하십시오.

기본적으로 두 가지 모두 시도했지만 코드의 동일한 블록에 대해 두 번째 Ajax 호출을 만들었지 만 서버 html 파일이 먼저 실행되고 JavaScript를 먼저로드하면 Ajax 요청에서 아무 것도 반환하지 않습니다. 두 번째 방법에서는 chrome의 postMessage API를 사용했습니다. 그러나 로컬에서 서버로가는 교차 원본 메시지를 차단합니다. 그리고 도메인 이름 충돌로 인해 내 메시지가 전달되어 서버 JavaScript가 호출되지 않습니다. 응답

function sendUrl(url){ 
 
    console.log("Passed to sendURL : " + url); \t 
 
    $.ajax({ 
 
    method:"GET", 
 
\t url:"http://www.bitbaysolutions.com/connections.php?updateRow=true", 
 
\t data:{ 
 
\t \t ajaxified : url 
 
\t }, 
 
\t success:function(res){ 
 
      console.log("PHP RESPONSE " + res); 
 
\t } 
 
    }); 
 
}

을 얻을 자바 스크립트 요청하는 데이터와

로컬 파일은 나는이 Ajax 호출에서 응답을받을 때 서버는 자바 스크립트를 호출합니다. 성공하면됩니다.

나도 같은 Ajax 호출 응답

function sendUrl(url){ 
 
    console.log("Passed to sendURL : " + url); \t 
 
    $.ajax({ 
 
    method:"GET", 
 
\t url:"http://www.bitbaysolutions.com/connections.php?updateRow=true", 
 
\t data:{ 
 
\t \t ajaxified : url 
 
\t }, 
 
\t success:function(res){ 
 
     console.log("PHP RESPONSE " + res); 
 
     window.postMessage(res,"*"); 
 
\t } 
 
    }); 
 
}

에 포스트 메시지 API를 사용하여 서버에이 코드를 작성할 때 자바 스크립트 파일은 메시지

를받을

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; 
 
var eventer = window[eventMethod]; 
 
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message"; 
 

 
eventer(messageEvent,function(e) { 
 
    console.log(e.data); 
 
});

단순히 내가이 로컬 파일에 대한 응답을받을 때 자바 스크립트 파일 서버를 호출하고 싶습니다 :

를 실행 한 후 나는 다음과 같은 오류가 발생합니다. 그리고 가능한 다른 해결책이 있다면, 나는 그것을 고맙게 생각합니다.

Answer 1

대신 window.postMessage을 사용해야합니다.

function sendUrl(url){ 
 
    console.log("Passed to sendURL : " + url); \t 
 
    $.ajax({ 
 
    method:"GET", 
 
\t url:"http://www.bitbaysolutions.com/connections.php?updateRow=true", 
 
\t data:{ 
 
\t \t ajaxified : url 
 
\t }, 
 
\t success:function(res){ 
 
     console.log("PHP RESPONSE " + res); 
 
     chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
 
      chrome.tabs.sendMessage(tabs[0].id, {thisCameFromTheServer: res}, 
 
       function(response) { 
 
        //If your script on the page sends a response, 
 
        // deal with it here. 
 
        //console.log(response.farewell); 
 
       } 
 
      ); 
 
     }); 
 
\t } 
 
    }); 
 
}

확장하여 Content Script로 삽입되어야 할 것이다 메시지를 수신 페이지에 자바 스크립트, 그리고 스크립트

그래서 확장에 자바 스크립트는 다음과 같이 보일 것이다 페이지를 직접 조작하거나 서버에서로드 된 JS를 호출 할 수 있습니다.

콘텐츠 스크립트는이 같은 메시지가 나타날 것입니다 :

chrome.runtime.onMessage.addListener(
 
    function(request, sender, sendResponse) { 
 
     
 
     if (request.thisCameFromTheServer) { 
 
      console.log(request.thisCameFromTheServer); 
 
     } 
 
     /* I *think* that you have access to the whole page DOM, and any JS 
 
     on the page, from here, so if there's a JS function you want to call 
 
     that's on the page you probably can. */ 
 
    } 
 
);