Yes, as I looked at it further,I found some things that would probably just be transparent, like PHP understanding what to do with name/value pairs passed as POST or GET encoded URI Component data. There are now so many possible arguments, all of which are optional, that I've switched to using an Object to pass them to the function. This makes it a little trickier to use, but really simplifies its use for any particular purpose. See the comments at the beginning of the code for an explanation and example. But say you have a form you want to post to back to the page itself and see the post result in a div with an id of 'result', you could do:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#result {
width: 15em;
height: 1.75em;
border: 1px solid pink;
}
</style>
<script type="text/javascript" src="http_get_post.js"></script>
<script type="text/javascript">
function mcb(){
if (this.success()){
/<\/div>([^<]*)<\/b/.test(this.xmlHttp.responseText);
this.el.innerHTML = RegExp.$1;
}
}
</script>
</head>
<body>
<form action="#" onsubmit="new loadXmlHttp({bust: true, form: this, id: 'result', method: 'post', callback: mcb});return false;">
<input type="text" name="test" value="bob"><br>
<input type="submit" value="Go!">
</form>
<div id="result">
</div>
<?php echo $_POST['test']; ?>
</body>
</html>
Now, the right way to do this would be to add/attach the event to the form. So I will make a function for doing that as part of the overall function. But if you know how to do that, you may do it yourself. If you control the page and know what you are doing, it really doesn't hurt anything doing it this way. Also, knowing me, I'll probably come up with efficiencies and/or other improvements. For now though, here's the function:
Code:
/* loadXmlHttp Script ©2009 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/
/* reqObject Properties - //all optional, comma delimit
url: page_to_fetch //defaults to this page
method: POST_or_GET //defaults to GET
el: element_to_populate //defaults to none, overrides id
id: id_of_element_to_populate //defaults to none, requires no el
form: form_submitting_data //defaults to none, requires no query
data: encoded_data_to_send_with_POST_request //defaults to none, requires POST and no form
query: encoded_data_to_send_with_GET_request //defaults to none, requires GET, overrides form
callback: function_to_run_on_success //defaults to populate, in default mode requires el or id
bust: true_OR_false //defaults to false, add cache busting time stamp to request?
*/
/* Usage:
new loadXmlHttp({reqObject Properties})
Example:
new loadXmlHttp({url: 'somePage.php', method: 'POST', form: document.forms.myform})
*/
function loadXmlHttp(req){
if(loadXmlHttp.xmlHttp){
var f = this, r;
for(r in req){
if((req.hasOwnProperty && req.hasOwnProperty(r)) || !req.hasOwnProperty){
f[r] = req[r];
}
}
f.xmlHttp = loadXmlHttp.xmlHttp();
f.el = f.el || (f.id? document.getElementById(f.id) : null);
f.method = f.method? f.method.toUpperCase() : 'GET';
f.url = f.url || location.href;
f.bustCache();
f.url += f.method === 'GET' && f.query? f.qa + f.query : '';
if(f.method === 'GET' && !f.query && f.form){
f.encodeData();
f.url += f.qa + f.data;
}
f.xmlHttp.open(f.method, f.url, true);
if(f.callback !== null){
f.xmlHttp.onreadystatechange = typeof f.callback === 'function'?
function(){f.callback.apply(f);} : function(){f.stateChanged();};
}
if(f.method === 'POST'){
if(f.form){
f.encodeData();
}
f.xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
f.xmlHttp.setRequestHeader('Content-length', f.data? f.data.length : 0);
f.xmlHttp.setRequestHeader('Connection', 'close');
}
f.xmlHttp.send(f.method === 'POST' && f.data? f.data : null);
}
else alert('Your browser does not support AJAX!'); // substitute your desired request object unsupported code here
}
//setup - while parsing:
loadXmlHttp.xmlHttp = null; loadXmlHttp.re = /^http/.test(location.href); loadXmlHttp.qa = /\?/;
/*@cc_on @*/ // used here and below, limits try/catch to those IE browsers that both benefit from and support it
/*@if(@_jscript_version >= 5) // prevents errors in old browsers that barf on try/catch & problems in IE if Active X disabled
try {loadXmlHttp.ie = window.ActiveXObject}catch(e){};
@end @*/
if (window.XMLHttpRequest && (!loadXmlHttp.ie || loadXmlHttp.re))
loadXmlHttp.xmlHttp = function(){return new XMLHttpRequest();}; // Firefox, Opera 8.0+, Safari, others, IE 7+ when live - this is the standard method
else if (/(object)|(function)/.test(typeof createRequest))
loadXmlHttp.xmlHttp = createRequest; // ICEBrowser, perhaps others
else {
loadXmlHttp.xmlHttp = null;
// Internet Explorer 5 to 6, includes IE 7+ when local //
/*@if(@_jscript_version >= 5)
try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Msxml2.XMLHTTP");};}
catch(e){try{loadXmlHttp.xmlHttp = function(){return new ActiveXObject("Microsoft.XMLHTTP");};}catch(e){}}
@end @*/
}
loadXmlHttp.prototype = {
stateChanged: function(){
if (this.el && this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re)){
this.el.innerHTML = this.xmlHttp.responseText;
}
},
encodeData: function(){
var els = this.form.elements; this.data = '';
for(var i = 0; i < els.length; ++i){
if(els[i].name){
this.data += (i? '&' : '') + els[i].name + '=' + encodeURIComponent(els[i].value);
}
}
},
bustCache: function(){
this.qa = loadXmlHttp.qa.test(this.url)? '&' : '?';
if(this.bust){
this.url += this.qa + 'bustacache=' + new Date().getTime();
this.qa = '&';
}
},
success: function(require_el){
return (this.el || require_el === false) && this.xmlHttp.readyState == 4 && (this.xmlHttp.status == 200 || !loadXmlHttp.re);
}
};
//end setup
I've tested this pretty thoroughly, though it may have some kinks in it yet. If you have questions, problems or suggestions, feel free.
Reply With Quote
Originally Posted by clowes
Bookmarks