Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I pass request headers with jQuery's getJSON() method?

Tags:

jquery

getjson

I need to do a getJSON() request, but how do I pass authorisation and custom headers?

I am getting issues that the request header is taking the name, but NOT the values. The URL is being shown through a manual request in fiddler to being inserted in as options instead of GET/Url.

Here is an example of what we are trying to do that works fine in fiddler; how can I replicate this with the AJAX function?

GET /Service.svc/logins/gdd53535342/houses/vxcbdfsdg/people/dsgsdggd?format=json HTTP/1.1 User-Agent: Fiddler Authorization: Basic rgbg423535fa23y4436 X-PartnerKey: df3fgeg-g5g6-b55b-f3d2-dsgg353523 Host: 154.34.53.54:2757 

JavaScript code:

xhr = new XMLHttpRequest();  $(document).ready(function() {   $.ajax({     url: 'http://localhost:437/service.svc/logins/jeffrey/house/fas6347/devices?format=json',     type: 'GET',     datatype: 'json',     success: function() { alert("Success"); },     error: function() { alert('Failed!'); },     beforeSend: setHeader          });    });  function setHeader(xhr) {   xhr.setRequestHeader('Authorization', 'Basic faskd52352rwfsdfs');   xhr.setRequestHeader('X-PartnerKey', '3252352-sdgds-sdgd-dsgs-sgs332fs3f'); } 

Fiddler Normal Request Headers:

GET /service.svc/logins/jeffrey/house/fas6347/devices?format=json HTTP/1.1 User-Agent: Fiddler Authorization: Basic faskd52352rwfsdfs X-PartnerKey: 3252352-sdgds-sdgd-dsgs-sgs332fs3f Host: localhost:437 

Fiddler Through Ajax() Request Headers:

OPTIONS service.svc/logins/jeffrey/house/fas6347/devices?format=json HTTP/1.1 Host: localhost:437 User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 115 Proxy-Connection: keep-alive Origin: http://ipv4.fiddler:61975 Access-Control-Request-Method: GET Access-Control-Request-Headers: authorization,x-partnerkey 
like image 406
Berty Avatar asked Jul 12 '10 15:07

Berty


People also ask

What does getJSON return?

getJSON( url, [data], [callback] ) method loads JSON data from the server using a GET HTTP request. The method returns XMLHttpRequest object.

What is getJSON?

The getJSON() method is used to get JSON data using an AJAX HTTP GET request.

What are the arguments of getJSON method?

It is a callback function that executes on the successful server request. It also has three parameters that are data, status, and xhr in which data contains the data returned from the server, status represents the request status like "success", "error", etc., and the xhr contains the XMLHttpRequest object.


2 Answers

I agree with sunetos that you'll have to use the $.ajax function in order to pass request headers. In order to do that, you'll have to write a function for the beforeSend event handler, which is one of the $.ajax() options. Here's a quick sample on how to do that:

<html>   <head>     <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>     <script type="text/javascript">       $(document).ready(function() {         $.ajax({           url: 'service.svc/Request',           type: 'GET',           dataType: 'json',           success: function() { alert('hello!'); },           error: function() { alert('boo!'); },           beforeSend: setHeader         });       });        function setHeader(xhr) {         xhr.setRequestHeader('securityCode', 'Foo');         xhr.setRequestHeader('passkey', 'Bar');       }     </script>   </head>   <body>     <h1>Some Text</h1>   </body> </html> 

If you run the code above and watch the traffic in a tool like Fiddler, you'll see two requests headers passed in:

  • securityCode with a value of Foo
  • passkey with a value of Bar

The setHeader function could also be inline in the $.ajax options, but I wanted to call it out.

Hope this helps!

like image 171
David Hoerster Avatar answered Sep 30 '22 18:09

David Hoerster


I think you could set the headers and still use getJSON() like this:

$.ajaxSetup({   headers : {     'Authorization' : 'Basic faskd52352rwfsdfs',     'X-PartnerKey' : '3252352-sdgds-sdgd-dsgs-sgs332fs3f'   } }); $.getJSON('http://localhost:437/service.svc/logins/jeffrey/house/fas6347/devices?format=json', function(json) { alert("Success"); });  
like image 20
Sean N. Avatar answered Sep 30 '22 16:09

Sean N.