Uzyskanie określonej części zewnętrznej strony internetowej za pomocą ajax, która ma http auth

Question

Próbuję załadować zawartość (określoną część) zewnętrznej strony internetowej poprzez ajax wniosek na mojej stronie internetowej. curl url dla żądania jest jak postępować

http://useraname:password@X.X.X.X:PORT

Tak, próbowałem następujące ajax wezwanie, aby uzyskać stronę

var username,password; 
$.ajax 
    ({ 
    type: "GET", 
    url: "http://X.X.X.X:PORT/", 
    dataType: 'text/html', 
    async: false, 
crossDomain: true, 
    data: '{"username": "username", "password" : "secret"}', 
    success: function(){ 
    alert('Thanks for your comment!'); 
    }, 
error: function (err){ 
alert(err); 
}, 
beforeSend: function (xhr) { 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password)); 
} 
}); 

To daje mi błąd CORS (Cross-Origin Request Blocked:). Po zmianie dataType z text/html na jsonp. I otrzymał odpowiedź z następującym błędem

[wyjątek ... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" Lokalizacja: "JS frame :: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js :: .send :: linia 5" danych: no]

Część sukcesu wywołania ajax nie jest wykonywana w obu przypadkach. Tylko trafia do części błędu. Jeśli otrzymałem stronę, niż mogę pobrać konkretną część za pomocą następującej metody.

var data = $.parseHTML(res); //<----try with $.parseHTML(). 
    $(data).find('div.content').each(function(){ 
     $('#here').append($(this).html()); 

Jak uzyskać żądany rezultat?

Po sugestii @GuRu, próbowałem następujących, ale nadal metoda sukcesu nie jest wywoływana.

var username,password; 
$.ajax({ 
    type: "GET", 
    url: "http://X.X.X.X:PORT/", 
    data: '{"username": "user", "password" : "secret"}', 
    async:true, 
    dataType : 'jsonp', 
    crossDomain:true, 
    success: function(){ 
    alert('Thanks for your comment!'); 
    }, 
    beforeSend: function(xhr) { 
    xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password)); 
    } 
    }); 

Answer 1

Dla tekstu JSON:

MIME typ nośnika tekstu JSON jest application/json. Domyślne kodowanie to UTF-8. (Źródło: RFC 4627).

Dla JSONP z zwrotnego:

application/javascript

Oto niektóre blogi, które zostały wymienione w komentarzach, które są istotne.

• Why you shouldn't use text/html for JSON
• Internet Explorer sometimes has issues with application/json
• A rather complete list of Mimetypes and what to use them for

Proszę sprawdzić What is the correct JSON content type?

Answer 2

Spróbuj, ja rzeczy, które pomogą Ci.

var username,password; 
$.ajax({ 
    type: "GET", 
    url: "http://X.X.X.X:PORT/", 
    data: '{"username": "username", "password" : "secret"}', 
    async:true, 
    dataType : 'jsonp', //you may use jsonp for cross origin request 
    crossDomain:true, 
    success: function(){ 
     alert('Thanks for your comment!'); 
    }, 
    beforeSend: function(xhr) { 
    xhr.overrideMimeType("text/plain; charset=x-user-defined"); 
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(username + ":" + password)); 
    } 
}); 

To jest praca dla mnie, spróbuj użyć XMLHttpRequest. Obiekt XMLHttpRequest służy do wymiany danych z serwerem.

var request = new XMLHttpRequest(); 
var params = "user=123&&password=456"; 
request.open('POST', 'https://www.example.com/controllers/Authentication.php', true); 
request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");}; 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
request.setRequestHeader("Content-length", params.length); 
request.setRequestHeader("Connection", "close"); 
request.send(params);