AJAX cross domain call

Question

I know about AJAX cross-domain policy  So I can t just call  http   www google com  over a ajax HTTP request and display the results somewhere on my site   I tried it with dataType  jsonp   that actually would work  but I get a syntax error  obviously because the received data is not JSON formated   Is there any other possiblity to receive display data from a foreign domain  iFrames follow the same policy

User · Accepted Answer

The only  easy  way to get cross-domain data using AJAX is to use a server side language as the proxy as Andy E noted  Here s a small sample how to implement that using jQuery   The jQuery part     ajax       url   proxy php       type   POST       data            address   http   www google com             success  function response               response now contains full HTML of google com             And the PHP  proxy php    echo file get contents   POST  address       Simple as that  Just be aware of what you can or cannot do with the scraped data

User · Answer

You will need to dynamically insert a script tag into the page that references the data  Using JSONP  you can execute some callback function when the script has loaded   The wikipedia page on JSONP has a concise example  the script tag    lt script type  text javascript  src  http   domain1 com getjson jsonp parseResponse  gt   lt  script gt    would return the JSON data wrapped in a call to parseResponse   parseResponse   Name    Cheeso    Rank   7      depending on the configuration of the getjson script on domain1 com   The code to insert the tag dynamically would be something like   var s   document createElement  script    s src    http   domain1 com getjson jsonp parseResponse   s type    text javascript   document appendChild s

User · Answer

Unfortunately  or fortunately  not   The cross-domain policy is there for a reason  if it were easy to get around it then it wouldn t be very effective as a security measure   Other than JSONP  the only option is to proxy the pages using your own server   With an iframe  they are subject to the same policy   Of course you can display the data from an external domain  you just can t manipulate it

User · Answer

You can use the technology CORS to configure both servers  the server where the Javascript is running and the external API server   https   developer mozilla org en-US docs Web HTTP Access control CORS  p s   the answer https   stackoverflow com a 37384641 6505594 is also suggesting this approach  and it s opening the external API server to everyone else to call it

User · Answer

Here is an easy way of how you can do it  without having to use anything fancy  or even JSON   First  create a server side script to handle your requests  Something like http   www example com path handler php   You will call it with parameters  like this      handler php param1 12345 amp param2 67890  Inside it  after processing the recieved data  output   document serverResponse    all the data  in any format that suits you         Any code could be used instead  because you dont have to encode this data    All your output will simply be executed as normal javascript   Now  in the client side script  use the following   document serverResponse   function param   console log param     var script   document createElement  script    script src  http   www example com path handler php param1 12345 amp param2 67890   document head appendChild script     The only limit of this approach  is the max length of parameters that you can send to the server  But  you can always send multiple requests

User · Answer

You can use YQL to do the request without needing to host your own proxy  I have made a simple function to make it easier to run commands   function RunYQL command  callback        callback name      YQL callback    new Date    getTime         window callback name    callback       a   document createElement  script         a src    http   query yahooapis com v1 public yql q                 escape command    amp format json amp callback   callback name       a type    text javascript        document getElementsByTagName  head   0  appendChild a       If you have jQuery  you may use   getJSON instead   A sample may be this   RunYQL  select   from html where url  http   www google com            function data     actions

User · Answer

I use this code for cross domain ajax call  I hope it will help more than one here  I m using Prototype library and you can do the same with JQuery or Dojo or anything else   Step 1  create a new js file and put this class inside  I called it xss ajax js  var WSAjax   Class create        initialize  function   url   callback           this url    url           this callback    callback           this connect                 connect  function             var script id   null          var script   document createElement  script            script setAttribute  type    text javascript            script setAttribute  src   this url           script setAttribute  id    xss ajax script             script id   document getElementById  xss ajax script            if script id               document getElementsByTagName  head   0  removeChild script id                         Insert  lt script gt  into DOM         document getElementsByTagName  head   0  appendChild script              process  function  data           this callback data                  This class creates a dynamic script element which src attributes targets your JSON data provider  JSON-P in fact as your distant server must provide the data in this format    call back function   json data here     so when the script tag is created your JSON will be directly evaled as a function  we ll talk about passing the callback method name to server on step 2   the main concept behind this is that script like img elements are not concerned by the SOP constraints   Step2  in any html page where you wanna pull the JSON asynchronously  we call this AJAJ   Asynchronous JAvascript   JSON  -  instead of AJAX which use the XHTTPRequest object  do like below    load Prototype first   load the file you ve created in step1   var xss crawler   new WSAjax         http   your json data provider url callback xss crawler process       function   data                  your json data is  data and do whatever you like with it                 D you remenber the callback on step 1  so we pass it to the server and it will returns the JSON embeded in that method so in our case the server will return an evalable javascript code xss crawler process   the json data   remember that xss crawler is an instance of WSAjax class  The server code depends on you  if it s yours   but most of Ajax data providers let you specify the callback method in parameters like we did  In Ruby on rails I just did  render  json  gt MyModel all  limit  gt 10    callback   gt  params  callback   content type   gt   application json    and that s all  you can now pull data from another domain from your apps  widgets  maps etc   in JSON format only  don t forget   I hope it was helpfull  thanks for your patience  -   peace and sorry for code formatting  it doesn t work well

User · Answer

I faced the same problem during 2 days and I found the solution  and it s elegant after googling a lot  I needed xss Ajax for some widget clients which pull datastream from tiers websites to my Rails app  here s how I did

User · Answer

after doing some research  the only  solution  to this problem is to call   if   browser mozilla     netscape security PrivilegeManager enablePrivilege  UniversalBrowserRead      this will ask an user if he allows a website to continue  After he confirmed that  all ajax calls regardless of it s datatype will get executed   This works for mozilla browsers  in IE  lt  8  an user has to allow a cross domain call in a similar way  some version need to get configured within browser options   chrome safari  I didn t find a config flag for those browsers so far   using JSONP as datatype would be nice  but in my case I don t know if a domain I need to access supports data in that format   Another shot is to use HTML5 postMessage which works cross-domain aswell  but I can t afford to doom my users to HTML5 browsers

User · Answer

If you are using a php script to get the answer from the remote server  add this line at the begining   header  Access-Control-Allow-Origin

User · Answer

JSONP is the best option  in my opinion  Try to figure out why you get the syntax error - are you sure the received data is not JSON  Then maybe you re using the API wrong somehow   Another way you could use  but I don t think that it applies in your case  is have an iFrame in the page which src is in the domain you want to call  Have it do the calls for you  and then use JS to communicate between the iFrame and the page  This will bypass the cross domain  but only if you can have the iFrame s src in the domain you want to call

[javascript] AJAX cross domain call

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to json

Examples related to jsonp