Ottieni una parte specifica della pagina Web esterna tramite ajax con http auth

Question

Sto tentando di caricare il contenuto (parte specifica) di una pagina Web esterna tramite la richiesta ajax sulla mia pagina web. Il curl URL per la richiesta è la seguente

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

Così, ho provato la seguente chiamata ajax per ottenere la pagina web

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)); 
} 
}); 

Questo mi dà un errore di CORS (Cross-Origin Request Blocked:). Dopo aver modificato dataType da text/html a jsonp. L'ho ricevuto la risposta con il seguente errore

[Exception ... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" Posizione: "frame JS :: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js :: :: Trasmettami linea 5" dati: no]

In entrambi i casi, la parte di successo della chiamata ajax non viene eseguita. Solo va alla parte di errore. Se ho ricevuto la pagina di quanto posso recuperare la parte specifica con il seguente metodo.

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

Come ottenere il risultato richiesto?

Dopo il suggerimento di @GuRu, ho provato quanto segue, ma il metodo di successo non viene richiamato.

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

Per il testo JSON:

Il tipo di supporto MIME per il testo JSON è application/json. La codifica predefinita è UTF-8. (Fonte: RFC 4627).

Per JSONP con callback:

application/javascript

Ecco alcuni post del blog che sono stati menzionati nei commenti che sono rilevanti.

• 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

Si prega di verificare What is the correct JSON content type?

Answer 2

Prova questo, io cosa che ti aiuti.

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)); 
    } 
}); 

Questo è lavoro per me, provalo utilizzando XMLHttpRequest. L'oggetto XMLHttpRequest viene utilizzato per scambiare dati con un server.

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