Geek Answers Handbook

Get a specific part of an external web page via ajax that has http auth

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

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

So, I tried the following ajax call to get the web page

 var username,password; $.ajax ({ type: "GET", url: "http://XXXX: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 ( Cross-Origin Request Blocked: error. After changing dataType from text/html to jsonp . I received a 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 successful part of the ajax call fails anyway. Only this concerns part of the error. If I got the page, I can get the specific part in the following way.

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

How to get the desired result?

Following @GuRu's suggestion, I tried the following, but the success method is not called.

 var username,password; $.ajax({ type: "GET", url: "http://XXXX: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)); } });
+7
javascript jquery html ajax cors
source share
2 answers

For JSON text:

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

For JSONP with callback:

application/javascript

Here are some blog posts that have been mentioned in related comments.

Please check What is the correct JSON content type?

+2
source

Try it, I will help you.

 var username,password; $.ajax({ type: "GET", url: "http://XXXX: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 using XMLHttpRequest. The XMLHttpRequest object is used to exchange data with the 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);
0
source

More articles:


All Articles