Get specific part of external webpage through ajax which has http auth

Question

Get specific part of external webpage through ajax which has http auth

I am trying to load the content(specific part) of external webpage through ajax request on my webpage. The curl url for the request is as follow

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

So, I tried the following ajax call to get the webpage

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

This gives me a CORS error (Cross-Origin Request Blocked:). After changing dataType from text/html to jsonp. The I received the response with the following error

[Exception... "Failure" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js :: .send :: line 5" data: no]

The success part of the ajax call is not getting executed in either case. Only it goes to error part. If I received the page than I can fetch the specific part by the following method.

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

How to get the required result?

After suggestion of @GuRu, I tried the following, but still the success method is not getting called.

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

javascript

jquery

html

ajax

asked on Stack Overflow Dec 23, 2015 by

Ajeet Khan • edited Dec 30, 2019 by

sideshowbarker

2 Answers

For JSON text:

The MIME media type for JSON text is application/json. The default encoding is UTF-8. (Source: RFC 4627).

For JSONP with callback:

application/javascript

Here are some blog posts that were mentioned in the comments that are relevant.

Please check What is the correct JSON content type?

answered on Stack Overflow Dec 23, 2015 by

Parth Trivedi • edited May 23, 2017 by

Community

Try this, I thing that help you.

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

This is work for me, try it using XMLHttpRequest. The XMLHttpRequest object is used to exchange data with a 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);

answered on Stack Overflow Dec 24, 2015 by

GuRu • edited Dec 29, 2015 by

GuRu

User contributions licensed under CC BY-SA 3.0