jquery ajax request with authentication - ajax

Question

I have a JSP-servlets application which is deployed on tomcat.Now from my html I need to make web(Ajax) call and call the CQ5 webpage(which is entirely running in CQ instance). When i click on submit button, it goes in the error method of ajax call.
Here is the code
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://crypto-js.googlecode.com/svn/tags/2.5.4/build/crypto/crypto-min.js"></script>
<script src="/resources/scripts/mysamplecode.js" type="text/javascript"></script>
<script type="text/javascript">
  
$(document).ready(function() {
  
 
 $("#myAjaxRequestForm").submit(function(e){
        e.preventDefault();
 });
   
 
 $("#myButton").click(function(e){
          
   //get the form data and then serialize that
         dataString = $("#myAjaxRequestForm").serialize();
   
   
var username = 'admin';
var password = 'admin';
var url = 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json'; 
$.ajax({
type: 'GET',
url: 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json',
dataType : 'json',
'beforeSend': function(xhr) {
var bytes = Crypto.charenc.Binary.stringToBytes('admin' + ":" + 'admin');
var base64 = Crypto.util.bytesToBase64(bytes);
xhr.setRequestHeader("Authorization", "Basic " + base64); //May need to use "Authorization" instead
},
error : function() {
alert('errro');
},
sucess: function(result) {
alert('done');
}
}); 
 }); 
  }); 
</script>
<div id="allContent">
  <div id="myExample">
 <form id="myAjaxRequestForm">  
   <h1> Please enter the Order Information -</h1>
    <label for="orderId">Order Id:</label>
  <input id="orderId" name="orderId" type="text"><br/>
<br/>
  <label for="zipCode">ZIP Code:</label>
  <input id="zipCode" name="zipCode" type="text"><br/>
    <br/>
    <input id="myButton" type="button" value="Submit">
</form>
</div>
 <div id="ajaxResponse">
</div>
</div>
</head></html>

Answer 1

Try to change your beforeSend handler a bit and also debug the error:
beforeSend: function (xhr) {
var base64 = btoa(username + ":" + password);
xhr.setRequestHeader("Authorization", "Basic " + base64);
},
error: function (jqXHR, textStatus, errorThrown) {
console.log(jqXHR);
console.log(textStatus);
console.log(errorThrown);
},
If it doesn't work, please paste the result of those 3 console.log()

Answer 2

I can see the json in the chrome console..but i get the parse error.Jquery17989898 was not called.
This is the code ...
var user = 'admin';
var pw = 'admin';
var url = 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json'; 
alert("i1");
var authToken = null;
$.ajax({
url: 'http://localhost:4502/content/geometrixx/en/products/triangle/jcr:content/par/text_0.infinity.json',
type: "POST",
crossDomain: true,
dataType: "jsonp",
data: JSON.stringify({ "Username" : user, "Password" : pw, "Type" : "SaaSGrid"}),
success: function(data)
{
alert("dsadsadsa");
authToken = data.Token;
},
error: function (jqXHR, textStatus, errorThrown) {
alert("jqXHR : " + jqXHR +
" \n**** text Status : " + textStatus +
" \n**** text Status : " + errorThrown);
}
});
{"textIsRich":"true","jcr:lastModifiedBy":"admin","sling:resourceType":"foundation/components/text","jcr:createdBy":"admin","jcr:created":"Wed Nov 03 2010 00:41:59 GMT-0400","jcr:lastModified":"Fri Nov 05 2010 11:14:54 GMT-0400","jcr:primaryType":"nt:unstructured","text":"The measure of an exterior angle of a triangle is equal to the sum of the measures of the two interior angles that are not adjacent to it; this is the exterior angle theorem. The sum of the measures of the three exterior angles (one for each vertex) of any triangle is 360 degrees.</p>\n</p>\n"}

Answer 3

I think you should explain a bit more your scenario. You are trying to access a page from a CQ5 instance, but authentication for that is probably just needed in an author instance. when accessing a publish instance that page will likely not need any authentication.
Will you always access the author instance? if you will switch to a publish instance later it would be easier to just adjust permissions in CQ5 to make the page public.

Answer 4

from a security perspective, this sounds wrong - you are passing user & password to execute on the client side - exposing your authentication.
Better to open up the permissions on the resource so anonymous can write to it (the POST) then pass credentials out.