通过具有 http auth 的 ajax 获取外部网页的特定部分

Question

我正在尝试通过我网页上的ajax 请求加载外部网页的内容（特定部分）。 请求的curl url如下

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

所以，我尝试了以下 ajax 调用来获取网页

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

这给了我一个CORS 错误 (Cross-Origin Request Blocked:)。将dataType 从text/html 更改为jsonp 之后。我收到了以下错误的响应

[异常...“失败”nsresult：“0x80004005 (NS_ERROR_FAILURE)”位置：“JS 框架 ::https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js::.send :: line 5”数据：无]

在这两种情况下，ajax 调用的成功部分都不会被执行。只有它进入错误部分。如果我收到了页面，则可以通过以下方法获取特定部分。

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

如何得到所需的结果？

在@GuRu 的建议下，我尝试了以下方法，但仍然没有调用成功方法。

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

对于 JSON 文本：

JSON 文本的 MIME 媒体类型是 application/json。默认编码为 UTF-8。 （来源：RFC 4627）。

对于带有回调的JSONP：

application/javascript

以下是 cmets 中提到的一些相关博文。

• 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

请查看What is the correct JSON content type?

Answer 2

试试这个，对你有帮助。

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

这对我有用，请使用 XMLHttpRequest 尝试。 XMLHttpRequest 对象用于与服务器交换数据。

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