I need to request web page client-side and than pass it to server as a string. I tried jQuery:
$.get(
"http://example.ru/",
{name:"Joe", age:"42"},
function(data){
$.get(
"script.php",
{data:data, query:query},
)
});
});
but did not succeed. I suspect it failed because of custom headers added by jQuery.
Can you advice me some technique to override request headers or any js library that makes requests just like browser does?
You've been caught out by Same Origin Policy:
The same origin policy prevents a
document or script loaded from one
origin from getting or setting
properties of a document from another
origin.
What you can do is use a simple proxy on your domain that fetches the page you're interested in (with permission, of course) thus allowing you to display it on your page via ajax requests. What I mean is something like the following:
$.get("yourdomain/proxy.php?name=Joe&age=42"
function(data){
$.get(
"script.php",
{data:data, query:query},
)
});
});
Related
I'm new to Qualtrics, HTML, and Javascript, so feel free to let me know if what I'm asking for is impossible.
I'm trying to use Qualtrics to gather some data that relates applicant test scores and schools that the same applicants were admitted to. As part of my autocomplete function (this is needed to standardize user input-- don't want the problem of some people typing UCLA and others University of California, Los Angeles), I need Qualtrics to read a csv file of schools that is currently stored in my Files Library, and that convert that csv into an array. I'm having trouble getting it to read the file to begin with.
I've tried using ajax (still don't really know what it is- I'm bumbling, here). Here is my attempt with ajax in Javascript:
autocomplete: function() {
var availableTags;
jQuery.ajax({
type: "GET",
url: "illinoislas.qualtrics.com/CP/File.php?F=F_8Aek00I0KXkihUN",
dataType: "text",
success: function(result){
availableTags = jQuery.csv.toArrays(result);
}
});
jQuery(".InputText" ).autocomplete({
source: availableTags
});
}
As far as I can tell, the ajax request isn't succeeding. The url I provided it is the View button of the csv file in my library, and it's obviously not a csv, but I don't know how else to proceed. Any help will be greatly appreciated.
I tried a simple AJAX request on your 'csv' URL
$.ajax({
url: "https://illinoislas.qualtrics.com/CP/File.php?F=F_8Aek00I0KXkihUN",
method: "GET"
}).then(function(response) {
console.log(response);
});
... and ran into the CORS policy error in the console:
Access to XMLHttpRequest at 'https://illinoislas.qualtrics.com/CP/File.php?F=F_8Aek00I0KXkihUN' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. ... Certain "cross-domain" requests, notably Ajax requests, are forbidden by default by the same-origin security policy. https://en.wikipedia.org/wiki/Cross-origin_resource_sharing
Basically you can't do AJAX requests to external domains unless the server you are calling is designed to return a header saying it's okay. The same applies to iframes (as soon as you try to access the content of the iframe with javascript). It's a browser security mechanism to protect the user.
The easiest fix would be to make a copy of that 'csv' file and host it on the same domain as your page. You can still use AJAX URL: "./assets/schools.csv"
Also note, testing your AJAX response with a console.log(result) is an easy way to check you have data coming back from the request.
I'm writing a Chrome extension. If you make jQuery.ajax request for a regular http page from within a page served via https, then the request is blocked by Chrome. I was wondering if I could fetch the requested page using a secure proxy.
So, is it possible to use a generic proxy server for some jQuery.ajax request? If so, how? Note, changing the proxy setting of the browser is not an option.
[And a year goes on...] If I understood your question correctly, you want to change your AJAX request depending on the webpage you are currently at. jQuery provides a number of AJAX related methods which might help you with this.
My suggestion is to use jQuery.ajaxPrefilter and adapt your query to use the proxy instead of the original host. An example from the documentation:
$.ajaxPrefilter(function( options ) {
if ( options.crossDomain ) {
options.url = "http://example.com/proxy/" + encodeURIComponent( options.url );
options.crossDomain = false;
}
});
To spice it up a little bit, you could also use any of the global AJAX event handlers to monitor your request. For example to see if any of the requests fail:
$( document ).ajaxError(function() {
console.log("Somethin' went wrawng!");
});
Yes, it is.
What we did at work was implement a proxy that does exactly that:
It takes web service calls from the same origin, then,
on the server side, maps them to a web service of another origin,
sends them there,
receives the results and
passes them on back to the caller.
This way you can both comply with the same origin policy and work with other origins. However, you will always need a server-side proxy functionality.
You would need an external library to perform Ajax requests via a HTTP Proxy using JQuery. Out-of-the-box, JQuery does not have this functionality. An example of such is https://www.AjaxProxy.com which can be used with your query as follows;
ajaxProxy.proxy.url = "http://your proxy";
ajaxProxy.proxy.credentials.username = "proxy username";
ajaxProxy.proxy.credentials.password = "proxy password";
$.ajax({
type: "GET",
url: "https://ICANHAZIP.COM",
headers: ajaxProxy.proxyHeaders(),
dataType: "text"
}).done (function (data) {
console.log(data);
});
This code should fetch the HTML source of http://yahoo.com/(index.html), and show it in dialog.
$.ajax({ url: 'http://yahoo.com', success: function(data) {
alert(data);
}
});
However, it won't do anything...
What's wrong with my code?
By default, you're not allowed to make cross domain requests. This violate the Cross Origin policy.
To make it work the requested domain must emit headers that allow the requesting domain.
I've got a tutorial on how to set and use the CORS policy: http://fritsvancampen.wordpress.com/2013/02/03/cross-site-origin-requests-aka-cross-origin-resource-sharing/
but if you want to fetch data from Yahoo you need control over their domain .. and that's not gonna happen ;)
Ajax is not used for your purpose . you have to used like this
$content = file_get_contents('http://www.yahoo.com/');
print_r($content);
Or this could be helpful for you
http://toolspot.org/extract-website-data.php
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
});
Ok, so basically.
I inject some javascript code into a web page and it uploads an image on that page to another server.
Now I have it working when I run it on my domain (of course), but I need to post the multipart/form-data request to a PHP file that I do not own.
Since it is a upload and not a simple request to just get data, I cannot use jsonp in the initial call since the response would not be in json.
Using James Padolsey's cross domain script, I am able to do $.get and $.post request across domains, but since I am using $.ajax it does not work.
He uses the Yahoo Query Language to acomplish this
This is basically how I am making the request
$.ajax({
url: 'http://website.com/upload.php',
type: 'POST',
contentType:'multipart/form-data',
data: postData,
success: successCallback,
error : function(XMLHttpRequest, textStatus, errorThrown) {
console.log('Error');
}
});
I want to make it completely JavaScript based to avoid making my server do the request.
So to re-cap, I can get the image bytes and make the request with javascript. But so far I cannot make it cross domain since I am $.ajax to set the content Type to "multipart/form-data".
Is there another way to make the request cross domain with or without the YQL?
Making the request with an iframe will not work since the domain of the iframe would change and I would not have access to the response.
This is a well known and difficult problem for web development, know as the Same Origin Policy
Javascript prevents access to most methods and properties to pages across different origins. The term "origin" is defined using the domain name, application layer protocol, and (in most browsers) port number of the HTML document running the script. Two resources are considered to be of the same origin if and only if all these values are exactly the same.
There are several ways around this.
Create your own proxy
Create a page that simply forwards the request to the other server, and returns its response
or, Use Apache's rules to form a proxy (see above link)
Use someone else's proxy
For GET requests which are typical Use YQL to access yahoo's proxy
For POST requests, if the 3rd party supports Open Data Tables
or, Use some other public proxy
See if the 3rd party conforms to the CORS specification
Cross domain POST query using Cross-Origin Resource Sharing getting no data back
If you are willing to allow a little flash on your page, try flXHR
it claims to implement the exact XHR api and also has a jquery plugin
These are pretty much your only options