I am running ajax without a server on my system, I have created one index.html with this.
JavaScript function:
function do_the_click(url)
{
alert('inside this method do_the_click');
$.ajax({
async: false,
url : url,
contentType: "text/html",
type : "GET",
dataType : "text/html",
success: function(data){
alert('data');
}});
}
My HTML body content is:
<a href="Java Collections.html" class="button" id="javacollections" onclick="do_the_click('this.href');"/>Java Collections</a>
I'm able to get the this message in alert window inside this method do_the_click but am not able to get the data in alert window, and so not able to get the page Java Collections.html in the index.html,
I have searched very much on Google re. how to load the data locally without using server in jquery.ajax but I didn't find any good solution, so I think that its good for others as well if it resides on Stack overflow.
You cannot do such thing. if you dont have a server you cannot send ajax it will be a cross browser issue. as the others says ajax will not work with file:// protocol you need a server to make an http:// call that ajax supports.
When you are making AJAX requests using stand alone html files, the HTTP request to the url is made by the browser. All you need to make sure is that you have included JQuery. Here is what you have to do.
Include Jquery:
<script src="js/jquery-1.10.2.min.js"></script>
The JQuery here resides in the js folder. This is included in the stand alone html file. Now to make the AJAX request use the following code.
$.ajax({
type: 'GET',
url: url,
success: function(data){
console.log(data);
},
async:false
});
AJAX creates an HTTP request that must be responded to by a server. If you don't have a server you can't use an AJAX request. You can run a server on your computer, but this is not the same as getting a file from the local filesystem.
I m able to run the ajax without webserver the problem was with my code the code written below that i had run on my filesystem u can use that as well.
function do_the_click(brl)
{
alert('inside this method do_the_click');
alert(brl);
var request = $.ajax({
async: false,
url: brl,
contentType: "text/html",
type : "GET",
dataType : "html",
});
request.done(function( msg ) {
alert(msg);
$( "#contentarea" ).load( msg, function() {
alert( "Load was performed." );
});
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
}
Java Collections
You won't be able to do this. If you don't have a server, you will violate the browser's cross-domain policy, as you won't have a domain!
AJAX won't work via the filesystem, you need a server.
This is an older thread but a browser doesn't need to run on a common OS like OSX/Windows/etc .. many people today are making their own browsers from WPE/Wayland or QT5Webkit where same origin policies don't apply.
Now in current scenario it depends upon where your server at. If the server is some place else, it will require CORS (cross origin request). So using file:// with CORS works perfectly.
I came to this question because I was searching for the reason, why I am able to make ajax request without using a web server. Got the answer Thanks!
Related
I've got a simple python web server based on cherrypy. Its resources shall provide an API. THe server has the following code to provide CORS:
def CORS():
cherrypy.response.headers["Access-Control-Allow-Origin"] = "*"
if __name__ == "__main__":
cherrypy.tools.CORS = cherrypy.Tool('before_finalize', CORS)
cherrypy.quickstart(PyCachedAdmin(), config={'/': {'request.dispatch': cherrypy.dispatch.MethodDispatcher()}})
the server is running on localhost:8080. Now I've got a HTML file, available on localhost (default port 80) which loads jquery 1.9. I open the browser console to try the $.ajax to execute any AJAX request to the cherrypy server. I've been trying:
$.ajax({
url:'http://localhost:8080/',
type: "POST",
dataType: "json",
data: {command:"version"}
}).done(function(){
console.log('hej');
});
and
$.ajax({
url:'http://localhost:8080/',
type: "POST",
crossDomain: true,
dataType: "jsonp",
data: {command:"version"}
}).done(function(){
console.log('hej');
});
and
$.support.cors = true
and nothing worked. I'm getting either XMLHttpRequest cannot load http://localhost:8080/. Origin http://localhost is not allowed by Access-Control-Allow-Origin. or GET http://localhost:8080/?callback=jQuery19102827550224028528_1382823727186&command=version&_=1382823727187 404 (Not Found) when using jsonp (it's mysterious that it sends GET instead of POST). There is a few similar questions around, I tried them and these are my results (that something is still wrong).
PS the server is perfectly ok, since all curl tests pass. Something is wrong with the cross-domain stuff.
Are you activating the CORS tool?. You can use the tool by decorating the calling methods or set it on the configuration.
Given that the implementation of PyCachedAdmin is no expressed on the question I might guess that probably you are not enabling the tool, to do so you just need to change the config dictionary and make something like this:
cherrypy.quickstart(PyCachedAdmin(),
config={
'/': {
'request.dispatch':
cherrypy.dispatch.MethodDispatcher(),
'tools.CORS.on': True}})
Or if the methods that you are using on PyCacheAdmin has already been decorated or using _cp_config that extra configuration is not required and this answers will not help you.
I was searching around for solution but failed all the way. The following codes are working fine under JQuery 1.4.4, JQuery Mobile 1.0a2 and PhoneGap 0.9. However, when I transferred it to JQuery 1.7.1, JQuery Mobile 1.1.0 and PhoneGap 1.5; it keeps on fall under error. I tracked the http call through Fiddler and realized the ajax does call to the URL but why it will fall under error instead of success? Please help!
$.ajax({
type: "GET",
cache: false,
url: updateServer+'update.xml',
dataType: "xml",
error: function(xhr, settings, exception){
alert('The update server could not be contacted.');
},
success: function(xml){
// success code
}
});
make sure that you can access the web service from the emulator itself and have allowed the application to access internet connection.
to do this, from within the emulator, open the default browser and enter the URL. it should not give you a 404 or any exception.
I had this problem with Phonegap 1.5. Downgrading to Phonegap 1.4.1 solved the problem. I was frustrated for days on end and couldn't make sense of the issue.
jQuery Mobile has a whole page in the documentation about implementing with PhoneGap. Check it out here.
http://jquerymobile.com/test/docs/pages/phonegap.html
You have to set permissions to allow cross-domain ajax calls.
Also! Remember to change your code in your html files if you are porting over from a web app. It is likely you made get calls to url "../api/handler.php" or something. You need to make all those calls absolute for use in PhoneGap. "http://mydomain.com/api/handler.php"
Ok, I figure the issue is actually the URL itself. The URL address is valid as it is accessible but it doesn't belong to the same domain. For example, my html file with the JQuery resides in http://www.yahoo.com/index.html but the URL which I am trying to call is http://www.google.com.
Browser prevents making an ajax call from a page hosted on one domain to a page hosted on a different domain (same origin policy) due to security issue. My solution here is to use a php file to retrieve the relevant data from another domain while the html (with JQuery) is calling the php file as follow:
$.ajax({
type: "GET",
cache: false,
url: 'getcontent.xml',
dataType: "xml",
error: function(xhr, settings, exception){
alert('The update server could not be contacted.');
},
success: function(xml){
// success code
}
});
Thank you for all the given helps!
Strictly using Javascript, is it possible to call a remote URL and store it in a variable? To specify, this would not be on the same domain. Basically, what i am trying to figure out the best solution for scraping/parsing data in a chrome extension.
If you're trying to load the page from an external domain, you'll run into the same-origin policy. You can get around this limitation by setting up a simple proxy on your own site. This would be a bit of server-side code whose function is to make the http request to the external page on your behalf, retrieve the response, then serve that content back to the on-page asynchronous JavaScript code making the original request.
So if you set up your proxy at /your_internal_proxy.foo, and you're using jQuery, you could build a JS function something like this:
var foreignContent = {};
var loadPage = function(pageURL,varName) {
$.ajax({
type: 'get',
url: '/your_internal_proxy.foo',
data: {
url_to_get: pageURL
},
success: function(result) {
foreignContent[varName] = do_something_to( result );
}
});
};
Then, to load content into JS variables:
loadPage('http://www.google.com/','goog');
loadPage('http://stackoverflow.com','stack');
While Ajax may be the way to go it depends on what you mean by "remote URL". Ajax will only work for url's with the same domain as the domain where the javascript originated from, due to Javascript cross-domain restrictions. There are various work arounds but most require the co-operation of the remote domain. I've have heard of using YQL as an intermediary but have never tried it. Easiest is to host a proxy on your own server.
If you are allowed to use jQuery you can have something like:
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
Also the $.get() can be used to achieve this
http://api.jquery.com/jQuery.get/
$.get("test.html",
function(data){
// do something with response data
});
I'm new to jQuery and would like to parse an xml document.
So far, I've been doing:
$.ajax({
url: xmlUrl,
type: 'GET',
dataType: 'xml',
crossDomain: true,
error: function(){
alert('Error loading XML document');
},
success: function(xml) {
}
});
However, I always get the error message in ie8.
Here is the xmlUrl address which I want to parse.
http://api.facebook.com/restserver.php?method=links.getStats&urls=MyUrl
With really no luck. Any ideas? Thanks.
I'm afraid IE 8 does not support Crss Origin requests, hence does not allow the cross-domain request (unless you do not setup the browser itself).
As the service you are trying to use does not use any client's data, you can setup a proxy - simple PHP script, that retrieves the url and output (via curl or file_get_contents if allow_url_fopen is enabled), and use ajax without the crossdomain.
I'd suggest using the Facebook JavaScript SDK (http://developers.facebook.com/docs/reference/javascript/), as it will take care of that issue for you. Also the method of using the restserver is deprecated, you can use the new SDK to call into the Graph API.
I'm horrible at Javascript, so sorry in advance for what I'm going to go ahead and assume is an amazingly stupid question.
I'm simply trying to perform a GET request to GitHub's public repo API for a given user, and return the value as JSON.
Here's the function I'm trying to use:
function get_github_public_repos(username) {
var the_url = "http://github.com/api/v2/json/repos/show/" + username
$.ajax({
url: the_url,
dataType: 'json',
type: 'get',
success: function(data) {
alert('raw data: ' + data)
var json_response = $.parseJSON(data);
alert(json_response);
}
});
}
This is returning Null for data. And in the console, I see Failed to load resource: cancelled. I know the URL is correct, because if I run curl on the url, it returns the expected data.
jQuery's ajax function supports JSONP which allows cross-domain requests (which you need because you're trying to request data from github.com from another domain). Just change the dataType from 'json' to 'jsonp';
function get_github_public_repos(username) {
var the_url = "http://github.com/api/v2/json/repos/show/" + username
$.ajax({
url: the_url,
dataType: 'jsonp',
type: 'get',
success: function(data) {
var json_response = data;
alert(data);
}
});
}
UPDATE: It's import to note that the end pint (in this case github.com's API) has to support JSONP for this to work. It's not a guarnateed solution for ANY cross-domain request as pointed out in the comments.
JavaScript is subject to cross-domain restrictions when making requests on a different server.
Well, unless you run your code in the github.com domain, that won't work.
You can use simle ajax only in your domain.
One solution is to create a proxy for it. Make a page on your server that does one thing, gets your requested (out of domain) content with curl, and prints it. Then you call this proxy with ajax.
The XmlHttpRequest object (which $ajax uses) cannot download content from a different domain due to the same origin policy. You would need to use something such as JSONP to be able to do this from a browser.
As the others have said, you cannot execute ajax on a remote domain.
You will need to write a server sided script on your domain (such as php), that will do the dirty work retrieving the information needed from the github domain.
Then, use your ajax to query your server side script for the information.
I know the URL is correct, because if
I run curl on the url, it returns the
expected data.
Use that idea to get your ajax working. Create a proxy page on your site that uses curl to retrieve the data you want, then have your "the_url" variable point to that page on your site. Cross-domain restrictions prevent you from being able to use ajax in the manner you attempted.