Forum Moderators: open
I am new to the XmlHttpRequest methods and am trying it for the first time.
I used a very simple request tutorial and have modified it for my needs, pretty much the only thing left in-tact is the xmlHttpRequest object initializer function.
Here is my "doRating" function which submits some variables and should post back the newest rating which replaces whats inside <div id="rating">.
function doRating(type,id){
var http = getHTTPObject();
var rating = document.ratingForm.rating.value;
var params = 'ajax=true&type='+type+'&id='+id+'&rating='+rating;
http.open("POST", "script.php", true);//Send the proper header infomation along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function(){
switch(http.readyState){
case 4:
if(http.status == 200){
document.getElementById('rating').innerHTML = http.responseText;
}else{
document.getElementById('rating').innerHTML = 'An error occurred.';
}
break;
case 3:
document.getElementById('rating').innerHTML = 'Processing...';
break;
}
//alert(http.readyState);
}
http.send(params);
}
This code works great for my test page, which just contains this HTML:
<html>
<head>
<script type="text/javascript" src="../js/ajax.js"></script>
</head>
<body>
<h1>Rate This Station</h1>
<div style="margin: 5px;" id="rating">
<form name="ratingForm">
<select name="rating" onChange="doRating('radio',4);">
<option value="0.0" selected="selected">Rate This Station</option>
<option value="1.0">1</option><option value="2.0">2</option>
<option value="3.0">3</option>
<option value="4.0">4</option>
<option value="5.0">5</option>
</select>
</form>
</div>
</body>
</html>
However, on the page I really want this to work on, it does not.
responseText returns the HTML from the page that sent the request instead of a number similar to this: "3.50". Everything is the same except for the HTML/CSS formatting on the real page. Again, my test page works perfectly, and the only logical reason I can think of is that all the HTML/CSS on the real page is interfering with something or this XmlHttpRequest method doesn't work properly inside a popup window (going out on a limb, I doubt this is the case).
Any thoughts?
Second, your method looks fairly different from the one I implemented.
Here's a snippet from my queue class, which works very, very well:
c_ajax_object.prototype._CallXMLHTTPObject = function ( in_url, in_method ) {
try {
var sVars = null;
// Split the URL up, if this is a POST.
if ( in_method == "POST" ) {
var rmatch = /^([^\?]*)\?(.*)$/.exec ( in_url );
in_url = rmatch[1];
sVars = unescape ( rmatch[2] );
}
this._dm_committed = false;
this.GetNewRequestObject();
this._dm_xmlhttprequestobject.open(in_method, in_url, true);
if ( in_method == "POST" ) {
this._dm_xmlhttprequestobject.setRequestHeader("Method", "POST "+in_url+" HTTP/1.1");
this._dm_xmlhttprequestobject.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
}
this._dm_xmlhttprequestobject.onreadystatechange = Handle_HTTP_Response;
this._dm_xmlhttprequestobject.send(sVars);
return true;
}
catch ( z ) { }
return false;
};
I just don't understand why it's not working on the real page where the only difference is the HTML/CSS.
* "responseText" returns a whole lot of HTML code instead of a string that should be similar to "3.50" when I "alert()" it, like it does on my test page.
Yeah I don't really understand your function
We probably read different reference books. I'm pretty sure this came from swik.net.
The bit at the beginning is to strip parameters if it's a POST submission. If you are always using GET, then you can yank most of the guts out. This is also part of a larger class (I SMed you the link), so not everything will make sense out of context.
Here is is boiled down to just a simple standalone GET:
CallXMLHTTPObject ( in_request_object, in_callback_function_ptr, in_url, in_method ) {
try {
in_request_object.open(in_method, in_url, true);
in_request_object.onreadystatechange = in_callback_function_ptr;
in_request_object.send();
return true;
}catch ( z ) { }
return false;
};
In that case, it may have something to do with the content-type, or quote mismatches. I suspect that your request may be fine. It looks like you did your homework.
I'm a little unclear on how the returned text is actually different from what you expect. Are you saying that the function returns the HTML SOURCE of the calling page?
If so, I'd look to see if your server-side function is reading the page, or not stripping stuff out.
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
It is sending from a form, but just to get the value of a drop-down box.
I am saying that "responseText" is returning the HTML source from the calling page, it's weird because my test page with the same code, except less HTML/CSS is returning something similar to "3.50" (what it should be).
Here is an image of the test page:
[sloaner.net...]
Here is what the real page looks like before the ajax request is sent:
[sloaner.net...]
This is what the real page looks like after the request is returned:
[sloaner.net...]
[sloaner.net...]
It certainly looks like your browser-side stuff is OK. I think the server-side code is spewing back a file. It may be because the request to the server is not executing. If you indicate a file that the Web server doesn't recognize as a Web file (.html, .php, etc), it will just spew the entire file back. I actually use this from time to time to fill pages in response to clicking a link.
Also, I didn't see something that would let me put images in my post, so it was the only way, I needed to visualize the problem :) Sorry Moderators!
UPDATE: The url is fine, didn't change by using url.php.
If you don't have your .htaccess file set with a DirectoryIndex, then you may not get what you expect. It's always a good idea to directly and explicitly reference a file in AJAX work.
<script type="text/javascript" src="../js/ajax.js"></script>
It works because if that path was wrong, the ajax wouldn't even send.
You are right, the test page is in a sub-directory and the real page is 1 directory up, in the "root" directory for the site, on my localhost.
The open command is as follows:
http.open("POST", "../rate/", true);
http.send('var1=var&var2=varTwo&etc=etc..');
Also, the server-side PHP script is good because on the test page it returns the "3.50" (or similar) rating like it should.
Ahhh, running out of ways to solve it, lol.
I put the test page back in the root folder and it didn't work so that's how I figured out that problem, grr.
Thanks for all your help, I feel foolish, lol.
this._dm_xmlhttprequestobject.setRequestHeader("Method", "POST "+in_url+" HTTP/1.1");I probably just put it in there by rote, but, if you tried the class I SMed you, you'll see it works pretty well.
I also don't send these:
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
