Ajax code is not working with other than Chrome - javascript

My Ajax code works fine for Chrome but it doesn't give me anything when i try to run it using other browsers like Mozilla , IE7 opera. I am uploading my code here please tell me where is problem
function ajaxFunction(str){
var ajaxRequest; // The variable that makes Ajax possible!
alert("in ajax");
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
ajaxRequest.onreadystatechange = function(){
if((ajaxRequest.readyState == 4)){
var msg=ajaxRequest.responseText
var fld=document.getElementById("prtCnt");
alert('"' + msg + '"');
msg = msg.trim();
if(msg == "not")
{
var msg="This User Name is already taken !!!!";
fld.className="bp_invalid";
// fld.style.color=green;
fld.innerHTML=msg;
}
else if(msg == "yes")
{
var msg="This User Name is available !!!!";
fld.className="bp_valid";
// fld.style.color=green;
fld.innerHTML=msg;
}
//document.myForm.time.value = "";
//document.myForm.time.value = ajaxRequest.responseText;
}
}
var fld =document.getElementById(user);
var url="loadjsp.jsp";
url=url+"?user="+str;
ajaxRequest.open("GET",url, true);
ajaxRequest.send(null);
}
Please tell me if anybody. I am new to ajax. thanx

One thing that might make IE fail is the use of trim as a string method. If you don't have any library that adds support for trim then on IE that line will produce and exception. Try removing the trim method to see if at least something is shown on screen.
Other browsers, at least on their latest versions, support the trim method, so if that's the case you still have to figure out why the rest of the browsers are failing.

You have a missing ";" in the line
var msg=ajaxRequest.responseText
that might be causing the problem on some browsers

Related

How to check browser support ajax or not?

I am using jQuery 1.12 . But my question is how to check browser support ajax or not. If browser support ajax then i want to change page content using ajax.
Almost every browser now support AJAX.
If you still want to test it you can check for XMLHttpRequest
if (window.XMLHttpRequest) {
// Supports Ajax.
} else {
//No.
}
<script language="javascript" type="text/javascript">
<!--
function ajaxFunction(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari (1st attempt)
ajaxRequest = new XMLHttpRequest();
}catch (e){
// IE browser (2nd attempt)
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch (e) {
try{
// 3rd attempt
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch (e){
alert("Failure");
return false;
}
}
}
}
//-->
</script>
Try individually three times to make the XMLHttpRequest object.
If all cases fail, it is sure that the browser is outdated and doesn't support ajax. Hope this helps!
Found this at: http://programmerguru.com/ajax-tutorial/browser-support/
Here is the code snippet which checks if the browser supports AJAX or not.
?
<script type="text/javascript">
var xmlhttp;
function checkAJAXSupport() {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
xmlhttp= new XMLHttpRequest();
alert("Yes. Your browser must be one among them - Mozilla, Safari, Chrome, Rockmelt, IE 8.0 or above");
} else if (window.ActiveXObject) { // IE
try {
xmlhttp= new ActiveXObject("Msxml2.XMLHTTP");
alert("Yes. Your browser must be IE");
}
catch (e) {
try {
xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
alert("Yes. Your browser must be IE");
}
catch (e) {}
}
}
if (!xmlhttp) {
alert("No. Giving up Cannot create an XMLHTTP instance. Your browser is outdated!");
return false;
}
}
</script>

Ajax iframe request only works once in Internet Explorer

I'm using an ajax script to show a loading animation in an iframe while a php script runs. Once the php script finishes running the ajax loading script loads the finished php scripts output.
Update: I have resolved this by replacing:
url='action.php?run=go';
http.open("GET",url, true);
with:
http.open( "GET", "go.php?random=" + Math.random(), true);
I read that IE caches each request and doesn't like sending the requests more than once.
<!DOCTYPE html>
<script type="text/javascript">
document.write('<link rel="stylesheet" href="../css/loading.css" type="text/css" /><div id="loading"><br><center>Please Wait...<br><br><img src="loader.gif"/><center></div>');
//Ajax Function
function getHTTPObject() {
var xmlhttp;
if (window.ActiveXObject) {
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
} else {
xmlhttp = false;
}
if (window.XMLHttpRequest) {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
//HTTP Objects..
var http = getHTTPObject();
//Function which we are calling...
function AjaxFunction() {
url = 'action.php?run=go';
http.open("GET", url, true);
http.onreadystatechange = function () {
if (http.readyState == 4) {
//Change the text when result comes.....
document.getElementById("loading").innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body onload="AjaxFunction()">
</body>
Try the xmlhttp = new XMLHttpRequest(); stuff before you test for the ActiveXObject. The latter is used for compatibility with older versions of IE (IE 5 & 6 I believe). However, newer versions of IE support the use of the XMLHttpRequest object. You might also try indenting properly to make your code readable.
Additionally, since you mentioned you're new to JS & AJAX, you really should look into using jQuery which makes using AJAX incredibly easy. I personally use jQuery as well as my own AJAX function, so, in practice, what you're doing is perfectly fine. But if you would rather do without the hassle then jQuery is the way to go.
Can you use jQuery? It has all the boiler plating for ajax you need in $.ajax

Is there AJAX progress event in IE and how to use it?

I tried all I could think of to at least get to the progress function in IE9 but nothing works. All other browsers get inside of the progress function and write test text without any problems. Hopefully someone can help me. Thank you!
var info = document.getElementById('info');
var xhr;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
xhr.attachEvent("onprogress", function(e) {
info.innerHTML += "loading...<br />";
});
/*xhr.addEventListener("progress", function(e) {
info.innerHTML += "loading...<br />";
}, false);*/
xhr.open("GET", "10_MB_File.txt", true);
xhr.send(null);
The onprogress event is part of the XMLHttpRequest Level 2 spec...
http://www.w3.org/TR/XMLHttpRequest2/
http://www.w3.org/TR/XMLHttpRequest2/#event-handlers
... which is not supported by IE 9 and below. However, IE 10 is supposed to support it...
http://msdn.microsoft.com/en-us/library/ie/hh673569(v=vs.85).aspx#Enhanced_Event_Support
For more information on which browsers support XHR Level 2, take a look at caniuse.com...
http://caniuse.com/#feat=xhr2
IE9 and under do not support onprogress, hence why you can not get it to work.
var xhr = new XMLHttpRequest();
console.log('onprogress' in xhr);
You could use the onreadystatechange event and display your message. I'm just suggesting it as a workaround.
xhr.onreadystatechange=function() {
if (xhr.readyState != 4) {
// Display a progress message here.
} else if (xhr.readyState==4 && xhr.status==200) {
// Request is finished, do whatever here.
}
}
Adding to suggestion list, if JQuery is used in your project. It can be achieved by below functions and ofcourse, it needs to be JQuery $.ajax request. Advantage of these client libraries is they have objects instantiated based on browsers. For ex: JQuery takes care of "ActiveXObject("Msxml2.XMLHTTP")" or "ActiveXObject("Microsoft.XMLHTTP")" based on browser.
//displays progress bar
$('#info').ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});

IE6 and 7 issue with innerHTML

IE6 and 7 issue with innerHTML
I have used ajax in the application i have develop, but there are issues with IE6 and IE7, they doesn't support innerHTML. What must be used to fixed this issue and to be a cross browser compatible?
the sample code looks like this.
function showFAQ(src, target){
xhr.onreadystatechange=function(){
if(xhr.readyState == 4 && xhr.status == 200){
document.getElementById('resultDiv').innerHTML=xhr.responseText;
}
}
str = "?action=get&request="+src;
xhr.open("GET", "./requests/data.php"+encodeURI(str), true);
xhr.send();
}
In FireFox, IE8 and other major browsers works fine. Just the problem is with IE6 and 7.
Any help/advice will be appreciated.
Thanks
IE cannot update readonly elements using innerHTML... consider this too.. :)
Try
var xmlHttp;
function getXmlHttpObject() {
var xmlHttp = null;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {
// Internet Explorer 6+
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
var xhr = getXmlHttpObject();
Update
Try adding
xhr.send(null);
after
str = "?action=get&request="+src;
xhr.open("GET", "./requests/data.php"+encodeURI(str), true);
innerHTML is supported as of IE5. I think you problem is the use of the xmlhttprequest object. That one is only supported as of IE7. You can however ActiveXObject as stealthyninja's code uses.

problem using AJAX call in IE6 and IE7 -- I am asking the same question again, cause i did not get any solution before

I have this code, which is working fine in FireFox, chrome and IE8 but is it not working on IE6 and IE7.
function GetXmlHttpObject() {
//var xmlHttp = null;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function login()
{
alert("Entered Login()");
var url="http://server.com/ALUauth.php";
xmlhttp.onreadystatechange=statechangedLogin;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function statechangedLogin()
{
if(xmlhttp.readyState==4)
{
alert("Entered State Changed Login");
if (xmlhttp.responseText=="Please <a href=http://server.com/ALUauth.php?login>login</a>")
{
document.getElementById("ALUauth").innerHTML=xmlhttp.responseText;
}
else
{
GetEmailId();
}
}
}
function GetEmailId()
{
alert("Entered GetEmailId()");
var url="http://server.com/GetPostEmail.php";
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=statechangedLogin2;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function statechangedLogin2()
{
if(xmlhttp.readyState==4)
{
alert("Enter State Changed Login 2");
if(xmlhttp.responseText=="Login again")
{
window.location="http://server.com/profile.html";
}
}
}
When I run the code in any other browser except for IE6 and 7 the output shows me all the alert boxes starting from: - Entered Login() - Entered State Changed Login - Entered GetEmailId() - Enter State Changed Login 2
and then the window location changes to http://server.com/profile.html
but when I run the same thing on IE 6 or 7, the code does not go into the statechangedLogin2(), and so the only alerts I get here are:
* Entered Login()
* Entered State Changed Login
* Entered GetEmailId()
I am unable to figure out why this issue is occuring. Why is it happening, and what should I change? The project is working absolutely fine on other browsers include IE8.
Can some one help me figure this issue of mine.
Hello i am sorry to post my question again. but i was not getting any solution there so i tried to do this. thou i am sorry about it.
Anyways i was able to solve the situation with the help of my boss.
all i did was to give GetEmailId function its own session. something like this:
function GetEmailId()
{
alert("Entered GetEmailId()"); xmlhttpTwo=GetXmlHttpObject() var url="http://server.com/GetPostEmail.php"; url=url+"&sid="+Math.random(); xmlhttpTwo.onreadystatechange=statechangedLogin2; xmlhttpTwo.open("GET", url, true); xmlhttpTwo.send(null); }
I tried this and it works absolutely fine on IE 6 n 7 ... :)
Best Zeeshan
Can you use JQuery, Prototype, Ext JS Base, or one of the other freely-available Javascript frameworks to do this instead?
There are a huge number of little browser inconsistencies to work around, so I don't recommend re-inventing the wheel--I know, I've done it before.

Categories