Cross-domain requests with Jquery

Issues

1. As of jQuery 1.5, the success callback function receives a “jqXHR” object (in jQuery 1.4, it received the XMLHttpRequest object). However, since JSONP and cross-domain GET requests do not use XHR, in those cases the jqXHR and textStatus parameters passed to the success callback are undefined.

2. Cross-domain requests are inherently insecure. Either you are sending credentials over clear text, OR, you cannot make cross-domain requests (not without an ugly client side warning atleast) on HTTPS.

Solution

jQuery 1.5, there has been a new property added to $.ajax. It’s called ‘crossDomain’.Default: false for same-domain requests, true for cross-domain requests. If you wish to force a crossDomain request (such as JSONP) on the same domain, set the value of crossDomain to true.

The server side redirection is quite simple to do in PHP, as shown below,

1: $data = '{"name" : "hello world"}';
2: echo $_GET['jsoncallback'] . '(' . $data . ');';

You can also use YQL (Yahoo Query Language) to perform such server side redirection as shown below,

1: jQuery.ajax = (function (_ajax) {
2: var protocol = location.protocol,
3: hostname = location.hostname,
4: exRegex = RegExp(protocol + '//' + hostname),
5: YQL = 'http' + (/^https/.test(protocol) ? 's' : '') + '://query.yahooapis.com/v1/public/yql?callback=?',
6: query = 'select * from html where url="{URL}" and xpath="*"';
7:
8: function isExternal(url) {
9: return !exRegex.test(url) && /:\/\//.test(url);
10: }
11:
12: return function (o) {
13: var url = o.url;
14: if (/get/i.test(o.type) && !/json/i.test(o.dataType) && isExternal(url)) {
15: o.url = YQL;
16: o.dataType = 'json';
17:
18: o.data = {
19: q: query.replace(
20: '{URL}',
21: url + (o.data ?
22: (/\?/.test(url) ? '&' : '?') + jQuery.param(o.data)
23: : '')
24: ),
25: format: 'xml'
26: };
27: if (!o.success && o.complete) {
28: o.success = o.complete;
29: delete o.complete;
30: }
31:
32: o.success = (function (_success) {
33: return function (data) {
34: if (_success) {
35: _success.call(this, {
36: responseText: data.results[0]
37: .replace(/]+?\/>|/gi, '')
38: }, 'success');
39: }
40: };
41: })(o.success);
42: }
43: return _ajax.apply(this, arguments);
44: };
45: })(jQuery.ajax);
46:
47: function InitializeWebPart() {
48: $.get('https://someotherURLCrossDomain', function (data) {
49: $("#results").html(data.responseText);
50: });
51: }

Thanks to winsmarts

Advertisements


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s