Troubleshooting AJAX XMLHTTP object creation - javascript

Troubleshooting this function and having trouble finding an error with it as the ajax stuff is all copy-pasted from a guide I'm following:
function updateStuff() {
// Data validation for a text var called val
var xmlHttp ;
if(window.ActiveXObject){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e)
xmlHttp = false;
}else{
try{
xmlHttp = new XMLHttpRequest();
}catch(e){
xmlHttp = false;
}
}
if(!xmlHttp)
alert("Error : Cannot create xmlHttp object");
else{
alert("Worked");
//xmlHttp.open("GET","update.php?val="+val,true);
//xml.onreadystatechange = handleServerResponse;
//xmlHttp.send();
}
}
}
Right now I'm just trying to get the "Worked" alert to display at the end of the if-statement. I know the JS is all linked correctly because if I take all the ajax out the data validation works properly with alerts.

In order to troubleshoot this, try:
if (window.ActiveXObject) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
console.log(e.name + " " + e.message);
xmlHttp = false;
} else {
try {
xmlHttp = new XMLHttpRequest();
} catch(e) {
console.log(e.name + " " + e.message);
xmlHttp = false;
}
}
The idea to figure out what the errors actually are. Once you are out of the try / catch, you loose track of what went wrong.

Related

Javascript: InvalidStateError:DOM Exception 11

I have below code that handling the HTTP request. But I am getting
Error: InvalidStateError:DOM Exception 11
error.
if (window.XMLHttpRequest) {
req_settings = new XMLHttpRequest();
req_settings.onreadystatechange = processChange;
req_settings.open("GET", url, true);
req_settings.send();
} else if (window.ActiveXObject) {
req_settings = new ActiveXObject("Microsoft.XMLHTTP");
if (req_settings) {
req_settings.onreadystatechange = processChange;
req_settings.open("GET", url, true);
req_settings.send();
}
}
req_settings.onreadystatechange = processChange;
req_settings.send();
Please help.
You're calling send() twice, which is invalid. Your code should be
if (window.XMLHttpRequest) {
var req_settings = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req_settings = new ActiveXObject("Microsoft.XMLHTTP");
} else
throw "environment does not support ajax";
req_settings.onreadystatechange = processChange;
req_settings.open("GET", url, true);
req_settings.send();
The code makes no sense, you would be calling
req_settings.onreadystatechange = processChange;
req_settings.send();
twice, Does it inside the if and outside of it! Remove the ones inside. Also it should be using the native object. Use a library!

AJAX Uncaught reference error

Script.js:
var request = new XMLHttprequest();
request.open('GET','data.txt',false);
if(request.status===200) {
console.log(request);
document.writeln(request.responseText);
}
This is my javascript file. I am getting this error:
Uncaught reference error:XMLHttprequest is not defined
Please help.
Sincere thanks.
I tried this it's simple mistake,
var request = new XMLHttpRequest();
dont use the simple letter for xmlHttpRequest. It should be a XMLHttpRequest. Also your simple r should be a capital R. it's work for me.Also try a different version of browser.
This line:
var request = new XMLHttprequest();
Should be:
var request = new XMLHttpRequest();
//^ Capital 'R'
Case in JavaScript, like most languages, matters
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//this is for ie
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//this is for ie
} catch (E) {
try{
xmlhttp =new XMLHttpRequest();//for browsers other than ie
}
catch(e)
{
}
}
For browsers like ie XMLHttpRequest doesnt work
Try the following method to get your XML HTTP Request:
function GetXmlHttpObject()
{
try {
var xmlHttp = null;
if (window.XMLHttpRequest)
{
// If IE7, Mozilla, Safari, etc: Use native object
xmlHttp = new XMLHttpRequest()
}
else
{
if (window.ActiveXObject)
{
// ...otherwise, use the ActiveX control for IE5.x and IE6
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
} catch(e)
{
alert(e.message);
}
}

Webpages on Firefox works well but no on IE

I have following code snippet:
self.xmlHttpReq = new XMLHttpRequest();
self.xmlHttpReq.onreadystatechange = function()
{
if(self.xmlHttpReq.readyState == 4 && self.xmlHttpReq.status == 200)
{
xmlDoc = self.xmlHttpReq.responseXML;
var xmlVar1 = xmlDoc.getElementsByTagName('var1')[0].childNodes[0].nodeValue;
var xmlVar2 = xmlDoc.getElementsByTagName('var2')[0].childNodes[0].nodeValue;
}
}
In IE the error code says:
object required, ajax request.js line num, char num
However, this same ajax request works fine in Firefox.
IE and Firefox have different object names for the XMLHttpRequest, you have to check your browser and declare the new object based on that.
Try something like this:
function getXHR() {
var xhr = false;
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 = false;
}
}
}
return xhr;
}
I got this from Jeremy Keith some time ago, it has never failed me.
Internet Explorer doesn't have the XMLHttpRequest object. Instead it uses an ActiveX object for the same functionality. So, you need to change this line:
self.xmlHttpReq = new XMLHttpRequest();
to:
if (window.ActiveXObject) {
try {
self.xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {
self.xmlHttpReq = new ActiveXObject('Msxml2.XMLHTTP'); // for really old versions of IE. You can leave the try/catch out if you don't care to support browsers from the '90s.
}
}
else
self.xmlHttpReq = new XMLHttpRequest();

XML ActiveXObject IE. Object doesn't support this action

I am trying to work with xml and javascript. In firefox it works great using XMLHttpRequest but in IE (6-8) I am getting the error:
Object doesn't support this action
I am using the following function:
function createRequestObject(){
var request;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
return request;
}
And then calling it with:
var xhttp = createRequestObject();
xhttp.open("GET","myfile.xml",false);
...
Any thoughts??
Try specifying a local variable for request, var request ( although it doesn't look like it should solve it ).
I would use this fn for light-weight XHR:
/** XHConn - Simple XMLHTTP Interface - bfults#gmail.com - 2005-04-08 **
** Code licensed under Creative Commons Attribution-ShareAlike License **
** http://creativecommons.org/licenses/by-sa/2.0/ **/
function XHConn()
{
var xmlhttp, bComplete = false;
try { xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); }
catch (e) { try { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
catch (e) { try { xmlhttp = new XMLHttpRequest(); }
catch (e) { xmlhttp = false; }}}
if (!xmlhttp) return null;
this.connect = function(sURL, sMethod, sVars, fnDone)
{
if (!xmlhttp) return false;
bComplete = false;
sMethod = sMethod.toUpperCase();
try {
if (sMethod == "GET")
{
xmlhttp.open(sMethod, sURL+"?"+sVars, true);
sVars = "";
}
else
{
xmlhttp.open(sMethod, sURL, true);
xmlhttp.setRequestHeader("Method", "POST "+sURL+" HTTP/1.1");
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
}
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && !bComplete)
{
bComplete = true;
fnDone(xmlhttp);
}};
xmlhttp.send(sVars);
}
catch(z) { return false; }
return true;
};
return this;
}
Usage:
var myConn = new XHConn();
if (!myConn) alert("XMLHTTP not available. Try a newer/better browser.");
var fnWhenDone = function (oXML) { alert(oXML.responseText); };
myConn.connect("mypage.php", "POST", "foo=bar&baz=qux", fnWhenDone);
I think you need to put a var in front of request:
function createRequestObject(){
var request;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
return request;
}
IE often has problems with global variables.

IE8 is breaking my AJAX... FF is fine

Feeling very proud of myself after creating a form with an AJAX submit, I test it in IE8 and get "Message: 'quantity' is undefined". I've read that it could be something to do with the fact that earlier versions of IE used ActiveX for AJAX requests, but I'm very new to JS and have no real understanding of the problem, let alone the ability to implement a fix.
Here's my code:
var time_variable;
function getXMLObject() //XML OBJECT
{
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP") // For Old Microsoft Browsers
}
catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") // For Microsoft IE 6.0+
}
catch (e2) {
xmlHttp = false // No Browser accepts the XMLHTTP Object then false
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest(); //For Mozilla, Opera Browsers
}
return xmlHttp; // Mandatory Statement returning the ajax object created
}
var xmlhttp = new getXMLObject(); //xmlhttp holds the ajax object
function ajaxFunction() {
var getdate = new Date(); //Used to prevent caching during ajax call
if(xmlhttp) {
var txtname = document.getElementById("txtname");
xmlhttp.open("POST","slots.php",true); //calling testing.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("quantity=" + quantity.value + "&price=" + price.value + "&slot=" + slot.value + "&store=" + store.value); //Posting txtname to PHP File
}
}
function handleServerResponse() {
if (xmlhttp.readyState == 4) {
if(xmlhttp.status == 200) {
document.getElementById("message").innerHTML=xmlhttp.responseText; //Update the HTML Form element
}
else {
alert("Error during AJAX call. Please try again");
}
}
}
From your last comment on your question, I suspect you are not defining 'quantity' anywhere and assuming that it will reference the form field. Try this:
if(xmlhttp) {
var txtname = document.getElementById("txtname");
var quantity = document.getElementById("quantity");
var price = document.getElementById("price");
var store = document.getElementById("store");
xmlhttp.open("POST","slots.php",true); //calling testing.php using POST method
xmlhttp.onreadystatechange = handleServerResponse;
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send("quantity=" + quantity.value + "&price=" + price.value + "&slot=" + slot.value + "&store=" + store.value); //Posting txtname to PHP File
}
If quantity is a form field you need to get it using getElementById before using it just like you did with txtname:
var quantity = document.getElementById("quantity");
You cant use it directly from the form.

Categories

Resources