How to make XMLHttpRequest work over HTTPS on Firefox? - ajax

When I try to send an HTTP GET request through XMLHttpRequest it works on non-secure HTTP.
But when sent over HTTPS, different browsers gave different results:
On Firefox 3.0.2:
- The GET request doesn't reach the web server.
On IE 7:
- The GET request reached the web server.
Does this have something to do with Firefox 3 getting stricter with untrusted certificates?
Is there a way around this?
I've already added the URL as an exception in Firefox's Certificate Manager.
The error console doesn't report any error.
I've added a try-catch around XMLHttpRequest's open() and send. No exception is thrown.
Using both absolute and relative URL path doesn't work.
Here's the code snippet:
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e)
{
return false;
}
}
}
// we won't be handling any HTTP response
xmlHttp.onreadystatechange=function()
{
// do nothing..
}
// send HTTP GET request
try
{
xmlHttp.open("GET", "/[relative path to request]", true);
xmlHttp.send(null);
}
catch (e)
{
alert('Error sending HTTP GET request!');
return false;
}
Thanks,
Kenneth

Try placing your closure after the open:
// send HTTP GET request
try
{
xmlHttp.open("GET", "/[relative path to request]", true);
}
catch (e)
{
alert('Error sending HTTP GET request!');
return false;
}
// we won't be handling any HTTP response
xmlHttp.onreadystatechange=function()
{
// do nothing..
}
// Then send it.
xmlHttp.send(null);
A little googling found confirmation:
http://www.ghastlyfop.com/blog/2007/01/onreadystate-changes-in-firefox.html
Although that document says to attach the function after .send(null), I've
always attached after open.

By any chance, are you requesting a non-HTTPS URL in an HTTPS page? Do any messages appear in the error log/console?

Related

XHR/AJAX Won't Handle 404 Error - XHR Stops Working

I'm having a surprisingly difficult time handling a simple 404 error response with XHR (AJAX)...
Basically, I have an "infinite scroll" page, where users scroll down the page and AJAX loads the next 50 results. At some point it will run out of results, and my PHP script is purposely set up to return a header 404 status when there are no more results. This is what I have:
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if(this.status == 200) {
console.log('display next results list');
}
else if(this.status == 404) {
console.log('end of list');
}
}
}
xhttp.open("GET", "index.php?page=101", true);
xhttp.send();
Problem: When a 404 is returned, I'm seeing the red "GET" 404 error in Chrome's dev console. When I click the error in console to see where it happens in the source, it specifically happens on this line xhttp.send(); The worst part about it is this seems to kill off XHR. So if I scroll back up again to see previous pages, XHR no longer works after it receives a 404. XHR just dies...
How do I fix this? How do I get XHR to see the 404 response and simply follow the else if(this.status == 404) { function without completely crashing???
Thanks

ajax request 'Access Control Allow Origin'

I am facing a issue of cross origins. I have googled and found some solutions but they are not working in this case. I wonder why.
I am hosting my application in apache tomcat server. And On the application side I am using XMLHttpRequest for request but I am getting "XMLHttpRequest cannot load http://localhost:8888/systeminfo. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access."
Here is the Application js file
function testget()
{
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
alert(xhr.responseText);
}
}
alert('Getting data');
xhr.open('GET', 'http://localhost:8888/systeminfo', true);
xhr.setRequestHeader('Access-Control-Allow-Origin','*');
xhr.setRequestHeader('Access-Control-Allow-Methods','GET');
xhr.send();
}
I am running node js server on local_host:8888 and sending json response when accessed url like 'http://localhost:8888/systeminfo' .
And here is the json response that I am forming and sending from server
function GetSystemInfo(express)
{
express.namespace('/systeminfo', function(){
express.get('/', function(req, res){
var SYSTEM_INFO = 1;
var jsonres = '{\"event\" : [{ \"apiID\" : \"{0}\" }],\"data\":[{ \"manufacturerName\" : \"MNAME\",\"serialNo\" : \"123456\",}] }'.format(SYSTEM_INFO);
res.setHeader('Access-Control-Allow-Origin','*');
res.send(jsonres);
res.end();
});
});
}
Please Help.
Regards,
Techtotie.

handling http 302 redirect in nyroModal

I'm using nyroModal v2 in an ASP.NET MVC3 application. The application forces users to authenticate and the auth cookie has max. lifetime of two hours. When the auth cookie expires all requestes are redirected to a login page (using http status code 302).
When a user opens a link in a modal "window" (using jQuery plugin nyroModal) and the auth cookie is expired nyroModal shows "an error has occoured". I managed to add a callback function to handle all errors
$(this).nyroModal({
callbacks: {
error: function (nm) {
alert("some error");
}
});
but I don't see a way to decide what kind of error (http status code) has happened. Is there an error object in nyroModal?
What I want to achieve is: close the modal window and redirect the browser window to the login page.
Thanks in advance!
Thomas
$(window).ajaxComplete(function(ev, xmlhr, options){
try {
var json = $.parseJSON(xmlhr.responseText);
}
catch(e) {
console.log('Session OK');
return;
}
if ($.isPlainObject(json) && json.SESSION == 'EXPIRED') {
console.log('Session Expired');
return;
}
console.log('Session OK');
});

Upload file with AJAX

I have the script:
#
var xmlhttp;
var params = "file=Not sure what is it";
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if (xmlhttp.status==200)
alert('Upload done');
else
alert('Error!!!');
}
}
xmlhttp.open("POST", "http://localhost/ajax2.php", true);
//Send the proper header information along with the request
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
#
This script send a POST request to server, now I just wonder that how can I set params as a file content to upload?
You can't do this solely with JavaScript, for security reasons. Try SWFUpload, Uploadify, or similar. These are Flash-based solutions that you can interact with via JavaScript.
Look how this library does it

Ajax doesn't work on remote server

when I Implemented chatting Function , I use Ajax to send messages between file to another .
so ,
it is working well on local host .
but , when I upload it in to remote server it doesn't work.
can U tell me ,why ?
is an Ajax need Special configuration ?
Ajax code :
function Ajax_Send(GP,URL,PARAMETERS,RESPONSEFUNCTION){
var xmlhttp
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")
}
catch(e) {
try{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
catch(e){
try{
xmlhttp=new XMLHttpRequest()
}
catch(e){
alert("Your Browser Does Not Support AJAX")
}
}
}
err=""
if (GP==undefined) err="GP "
if (URL==undefined) err +="URL "
if (PARAMETERS==undefined) err+="PARAMETERS"
if (err!=""){alert("Missing Identifier(s)\n\n"+err);return false;}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState == 4){
if (RESPONSEFUNCTION=="") return false;
eval(RESPONSEFUNCTION(xmlhttp.responseText))
}
}
if (GP=="GET"){
URL+="?"+PARAMETERS
xmlhttp.open("GET",URL,true)
xmlhttp.send(null)
}
if (GP="POST"){
PARAMETERS=encodeURI(PARAMETERS)
xmlhttp.open("POST",URL,true)
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
xmlhttp.setRequestHeader("Content-length",PARAMETERS.length)
xmlhttp.setRequestHeader("Connection", "close")
xmlhttp.send(PARAMETERS)
}
}
Two points really,
Firstly, If the URL is on a different domain, default security model in your browser might stop that working.
Secondly, have a look at JQuery, this bulk of code would be reduced to 2 or 3 lines.
Have a look here: http://docs.jquery.com/Tutorials

Resources