Response title
This is preview!
ajax request using https url not adding custom header.
in Using jQuery
•
11 years ago
Hello,
I have been experiencing a problem with a project that has got me scratching my head. I have tried looking online but can't find a solution.
I am developing a mobile web app which communicates with a wcf service that returns data in json format. The way security is handled is the user logins and recieves a token which is added to the http header. The login ajax request which passes the url strings to the service is using https protocol. This works fine. The other 2 ajax requests are also supposed to use https but when I do this the custom header isn't added. If I use http which is the old url, the custom header is added to http header. I have tested this using fiddler2 and firebug and for some reason it doesn't like https in the ajax request url.
- function login_service()
{
//$.mobile.pageLoading();
var stringUsername = $('#txtUsername').val();
var stringPassword = $('#txtPassword').val();
$('#loginMessage').empty(); // Empty message div
$.ajax(
{
url: "https url string"+stringUsername+"/"+stringPassword, - dataType: "jsonp",
type: 'GET',
headers:{"Authorization" : tkn},
success: function(loginResult)
{
$('#loginMessage').html('<a>'+ loginResult.tkt + '</a>');
tkn = loginResult.tkt; // Json token
if(tkn == null)
{
$('#loginMessage').append("invalid login:" + ' ' + '<br>' + "token:" + ' ' + tkn);
$.mobile.pageLoading(true);
}
else
{
$.mobile.changePage('#search'); // Change page to search screen
}
}, - error: function(status)
{
alert(status);
$.mobile.pageLoading(true); // End loading animation
}
})
} - function doSearch_webservice(){ // Start of function webservice
- $.ajax({ // Start of ajax call
headers:{"Authorization" : tkn},
url: "https url string"+$('#jsonSearch').val(),
dataType: 'jsonp',
type: 'GET',
timeout: '20000',
success: function(json_results)
{// Start of success function
if(json_results.keys == null)
{
$('#errMessage').html('<p class="error"><strong>'+ "Status:"
+ "No record found" + "<br>Please try again" +'</strong> </p>');
$.mobile.pageLoading(true);
}
else
{
$('#jsonResponse ul').remove();
// jquery mobile type i.e. data-inset
$('#jsonResponse').append('<ul class="listItems" data-role="listview" data-inset="true"></ul>');
var listItems = $('#jsonResponse').find('ul');
$.each(json_results.keys, function(key) { // Start of each loop -
html=
'<a href="#" data-transition="slide" data-position="inline"OnClick="passQryStrg(''+json_results.keys[key].id+'' , ''+json_results.keys[key].cat+'' );">'+'<br>'+' '+'<font class="big-text"><b>'+' '+json_results.keys[key].lbl[0]+' '+'</font></b>'+' '+'<font class="small-text">'+' '+'<br>'+' '+json_results.keys[key].lbl[1]+' '+'</font>'+'</a>' - listItems.append('<li>'+html+'</li>');
}); // End of each loop
$('#info jsonResponse ul').listview();
$.mobile.pageLoading(true);
$.mobile.changePage( "#info", { transition: "slide"} );
$("#info").page("destroy").page();
}
// Destroy the page - next function call won't break css
}, // End of success function - error: function(jqXHR, textStatus, errorThrown)
- {
$('#errMessage').html('<p class="error"><strong>'+ "Status:" + textStatus + "<br>Please try again" +'</strong> </p>');
$.mobile.pageLoading(true);
}
}); // End of ajax call
}; // Emd of webservice function
Any ideas why this doesn't work are greatly appreciated.
Nick
1
