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

Question

我正在尝试通过ajax我的网页上的请求加载外部网页的内容(特定部分).curl请求的URL如下

HTTP:// useraname:密码@ XXXX: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 frame :: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js :: .send ::第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

以下是评论中提到的一些相关博客文章。

• 为什么不应该使用text/htmlJSON
• Internet Explorer 有时会出现问题application/json
• Mimetype 的相当完整的列表以及它们的用途

请检查正确的 JSON 内容类型是什么？