JSONP:Hitting url and parsing the response - javascript

I have url which will return response as Content=image|text=hello|.
While hitting the url with AJAX i am getting Cross domain issues.
So i tried searching for jsonp.But unable to do that.I am able to hit the url using script.
But unable to catch the response into string.My final aim is to hit the url and catch the response in some var x.So i want x=Content=image|text=hello| after hitting the url.
I used ajax it works in IE only.
Please try to help/advice to do the same with jsonp.

You can't do what you've described from a browser doing without Cross-Origin Resource Sharing, which would require that the server supplying the response trusts your document's origin, that the user is using a CORS-enabled browser, and that if you want to support IE8 and IE9, your code handles using the MS-specific XDomainRequest object rather than the standard XMLHttpRequest object on those two browsers (other browsers support CORS via XMLHttpRequest, including IE10 and up).
If you can get the source of this information to reply with JSONP instead, you can do it without CORS. JSONP is a specific format. Here's example of that data in JSONP format:
foo({"Content":"image","text":"hello"})
...assuming you've called it with a URL like http://example.com/some/api?callback=foo (with JSONP, you supply the name of the function — foo in the above — in the query string).

Related

Cross domain request with JSON response

I am trying cross domain request from my js file.
First,I was trying JSONP but my target domain URL is not support it. It return plain JSON object.
I am authorize person to access my target domain URL. but i can not modify it as per JSONP response.
SO how can i get JSON response from my target domain URL?
Without modifying a bit the server side there is not much you can do. The general policy is to not to allow cross domain requests.
There are few things worth mentioning though:
Try changing the server side so it will support JSONP.
If the HTTP response contains Access-Control-Allow-Origin header then you can communicate with it with normal AJAX. This feature is supported in modern browsers only. Check this out for more info.
You can do the cross domain requests with Flash and/or WebSockets. However server does have to support them.
I have always done it with jsonp, by passing a callback b/c services return json, if call back is passed then it will wrap all json in callback else they will simple return json.
But in your case
You can look up with this article
http://www.webdevdoor.com/jquery/cross-domain-browser-json-ajax/
Don't know what type application you are developing. But in ASP.NET you can do it by using a proxy page
These links may be helpful:
http://www.codeproject.com/Articles/667611/ASP-NET-Proxy-Page-Used-for-Cross-Domain-Requests
http://encosia.com/use-asp-nets-httphandler-to-bridge-the-cross-domain-gap/
https://gist.github.com/jkresner/3982746

Make REST call in JavaScript without using JSON?

(extremely ignorant question, I freely admit)
I have a simple web page with a button and a label. When I click the button, I want to make a REST call to an entirely different domain (cross-domain, I know that much) and display the results (HTML) in the label.
With other APIs, I've played around with using JSON/P and adding a element on the fly, but this particular API doesn't support JSON so I'm not sure how to go about successfully getting through.
The code I have is:
function getESVData() {
$.get('http://www.esvapi.org/v2/rest/passageQuery?key=IP&passage=John+1', function (data) {
$('#bibleText').html(data);
app.showNotification("Note:", "Load performed.");
});
}
I get an "Access denied." Is there anyway to make this call successfully without JSON?
First off, JSON and JSONP are not the same. JSON is a way of representing information, and JSONP is a hack around the same-origin policy. JSONP works by requesting information from another domain, and that domain returns a script which calls a function (with the name you provided) with the information. You are indeed executing a script on your site that another domain gave to you, so you should trust this other domain.
Now when trying to make cross domain requests you basically have 3 options:
Use JSONP. This has limitations, including the fact that it only works for GET requests, and the server you are sending the request to has to support it.
Make a Cross Origin Resource Sharing (CORS) request. This also must be supported by the server you are sending the request to.
Set up a proxy on your own server. In this situation you set an endpoint on your site that simply relays requests. ie you request the information from your server, your server gets it from the other server and returns it to you.
For your situation, it the other server doesn't have support for other options, it seems like you will have to go with options 3.

Javascript getJSON not working (Possibly Cross Domain)

Im getting a JSON from a server, and when I type the url into the browser, I can see the JSON data. And when I use curl to get the JSON I can also see the data. But when I try to use a html page locally to access the data i get an error. I've tried using
$.support.cors = true;
but I still get an error, is there anyway I can solve this possible cross domain problem?
Thanks,
Matt
Use JSONP (JSON with padding) for crossdomain requests instead. Also see the jquery plugin for easier jsonp handling (even basic error handling). Here is a nice example page.
If the server supports JSONP, then you could get the data by getJSON by appending ?callback=? to the url.
But if the response is just json format like:
{a: 1, b:2}
then you can't use ajax to get the data directly. One solution is to make a proxy, in your server side, get the remote json data and then output it again to avoid cross domain problem.
Other answers have suggested suitable alternatives (JSONP), but to explain why it's not working;
The support of cors is not something you can just turn on. It's something the browser, and the server, has to support.
For more info see here, but to summarise:
The server needs to emit a Access-Control-Allow-Origin: * header (or tailor * to be the domain you wish to allow).
You need to be using Firefox 3.5, Safari 4, Chrome 3, IE 8 or Opera 12.
You can also see the documentation for jQuery.support.cors on the API docs.

How can I get HTTP response header using JS?

I tried so many tutorials online but everything I try is really old and fails - I can't even create an XMLHTTPRequest object!
I just want to get the header from google.com - how can I do that?
You would use xhr.getResponseHeader() to get a single header, or xhr.getAllResponseHeaders() to read all of the headers from an XMLHttpRequest response.
The reasons this won't work for you:
XMLHttpRequest is case sensitive. If you are using HTTP in all caps, it will fail.
Unless you are a google employee adding code to google.com, your request falls victim to the same origin policy. You'll have to use your server as a proxy to get headers from a google request.
You cant simply do this by JS. You'll have to use AJAX and do a server request to PHP,ASP, Java or whatever. The XMLHTTPRequest should do it - if you really want to do it manually. But it will really not work with foreign domains, so you are forced to do the XMLHTTTPRequest to a page on your server which will deliver the header.

jQuery cross domain image upload

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

Categories

Resources