JsonP를 사용한 JavaScript XMLHttpRequest

JsonP를 사용한 JavaScript XMLHttpRequest

요청 매개 변수를 다른 도메인으로 보내려고 합니다.

크로스 스크립팅에서 JsonP가 필요하다는 것을 이미 알고 있으며 Jquery ajax와 함께 JsonP를 사용했습니다.

그러나 XMLHtpRequest를 사용하여 크로스 스크립팅을 수행하는 방법을 알 수 없습니다.

follow code 나의 기본 XMLHttpRequest 코드.

나는 변화가 필요한 것 같습니다.xhr.setRequestHeader()파싱 코드를 추가해야 합니다.

아무 아이디어나 주세요.

var xhr;
function createXMLHttpRequest(){    
    if(window.AtiveXObject){
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        xhr = new XMLHttpRequest();
    }   
    var url = "http://www.helloword.com";   
}

function openRequest(){ 
    createXMLHttpRequest();
    xhr.onreadystatechange = getdata;
    xhr.open("POST",url,true);
    xhr.setRequestHeader("Content-Type",'application/x-www-form-urlencoded');
    xhr.send(data); 
}

function getdata(){
    if(xhr.readyState==4){
        if(xhr.status==200){
            var txt = xhr.responseText;
            alert(txt);
        }
    }   
}

JSONP는 XMLHttpRequests를 사용하지 않습니다.

JSONP가 사용되는 이유는 XHR의 교차 원점 제약을 극복하기 위해서입니다.

대신 스크립트를 통해 데이터를 검색합니다.

function jsonp(url, callback) {
    var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
    window[callbackName] = function(data) {
        delete window[callbackName];
        document.body.removeChild(script);
        callback(data);
    };

    var script = document.createElement('script');
    script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
    document.body.appendChild(script);
}

jsonp('http://www.helloword.com', function(data) {
   alert(data);
});

단순화를 위해 요청이 실패할 경우 오류 처리는 포함되지 않습니다. 사용script.onerror그것이 필요하다면요

이미 답을 얻으셨다는 건 알지만, 약속을 이용한 예시를 원하는 사람이 있다면, 여기 있습니다.

function jsonp(url) {
    return new Promise(function(resolve, reject) {
        let script = document.createElement('script')
        const name = "_jsonp_" + Math.round(100000 * Math.random());
        //url formatting
        if (url.match(/\?/)) url += "&callback="+name
        else url += "?callback="+name
        script.src = url;

        window[name] = function(data) {
            resolve(data);
            document.body.removeChild(script);
            delete window[name];
        }
        document.body.appendChild(script);
    });
}
var data = jsonp("https://www.google.com");
data.then((res) => {
    console.log(res);
});

Google api의 경우 강제로 추가하였습니다.callback이 외에도v=1.0url에 매개 변수를 지정합니다.v=1.0 매개 변수가 없으면 CORB 오류가 발생합니다(내 버전 및 기타 응답 코드의 경우 - 단 jQuery$.ajax와 함께dataType: "jsonp"이 매개변수를 추가합니다. - 그래서 저도 추가하고 작업을 시작합니다.)

CORB(Cross-Origin Read Blocking)는 MIME 형식의 텍스트/jav스크립트로 https://ajax.googleapis.com/ajax/services/feed/load?callback=jsonp1555427800677 을 차단했습니다.자세한 내용은 https://www.chromestatus.com/feature/5629709824032768 을 참조하십시오.

아래는 내 솔루션의 약속 버전입니다.

function jsonp(url) {
  return new Promise(function(resolve, reject) {
    var s = document.createElement('script');
    var f="jsonp"+(+new Date()), b=document.body;
    window[f] = d=>{ delete window[f]; b.removeChild(s); resolve(d); };
    s.src=`${url}${url.includes('?')?'&':'?'}callback=${f}&v=1.0`;
    b.appendChild(s);
  })
}

async function send() {
    let r = await jsonp("http://ajax.googleapis.com/ajax/services/feed/load");
    console.log(r);
}

<button onclick="send()">Send JSONP</button>

function JsonpHttpRequest(url, callback) {
    var e = document.createElement('script');
    e.src = url;
    document.body.appendChild(script); // fyi remove this element later /assign temp class ..then .remove it later
    //insetead of this you may also create function with  callback value and  use it instead
    window[callback] = (data) => {
        console.log(data);  // heres you data
    }
}
// heres how to use
function HowTouse(params) {
    JsonpHttpRequest("http://localhost:50702/api/values/Getm?num=19&callback=www", "www")
}

XMLHttpRequest를 사용하여 크로스 스크립팅을 할 수 없습니다.Jquery 없이 도메인을 교차하려면 새 스크립트 노드를 생성하고 해당 노드의 src 속성을 설정해야 합니다.

언급URL : https://stackoverflow.com/questions/22780430/javascript-xmlhttprequest-using-jsonp