General javascript code to call a php page
see it working first
The php page that's being called returns a string. The javascript in this example code will pop up an alert containing that string.
There are four methods here that will call the testAjax function, which in turn will create an xmlhttprequest to get the response string from the php page, then pop it up: a submit box in a form with an onsubmit method, a button in a form, a button outside of a form with an onclick method, and a link with an onclick method. Note also the "return false" after every event call.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<script>
function createXMLHttpRequest() {
//create the xmlhttprequest in various browsers
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
function testAjax () {
var req = createXMLHttpRequest();
req.open("post", "test.php", true); //request type, page it goes to, and asynchronous
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//allows php to read variables submitted (below) as it would data submitted through form actions
req.onreadystatechange = function() { //event listener to detect if the php is done running
if (req.readyState != 4) { return; } //4 is done, 1, 2, and 3 mean it's incomplete
alert(req.responseText); //display the response in an alert
//note that it could also be sent to another function for further processing
};
req.send("");//send the request; this would contain POST variables, but none are needed here
//format for these is variable=value&variable=value etc.
}
</script>
</head>
<body onLoad="alert('loaded');">
<form name="testform" onsubmit="testAjax(); return false">
<input type="submit" value="Test Submit"><br>
<button>Test Button 1</button>
</form>
<button onClick="testAjax();">Test Button 2</button><br>
<a href="#" onClick="testAjax()">Link</a>
</body>
</html>
The php page that's being called returns a string. The javascript in this example code will pop up an alert containing that string.
There are four methods here that will call the testAjax function, which in turn will create an xmlhttprequest to get the response string from the php page, then pop it up: a submit box in a form with an onsubmit method, a button in a form, a button outside of a form with an onclick method, and a link with an onclick method. Note also the "return false" after every event call.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test Page</title>
<script>
function createXMLHttpRequest() {
//create the xmlhttprequest in various browsers
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
function testAjax () {
var req = createXMLHttpRequest();
req.open("post", "test.php", true); //request type, page it goes to, and asynchronous
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
//allows php to read variables submitted (below) as it would data submitted through form actions
req.onreadystatechange = function() { //event listener to detect if the php is done running
if (req.readyState != 4) { return; } //4 is done, 1, 2, and 3 mean it's incomplete
alert(req.responseText); //display the response in an alert
//note that it could also be sent to another function for further processing
};
req.send("");//send the request; this would contain POST variables, but none are needed here
//format for these is variable=value&variable=value etc.
}
</script>
</head>
<body onLoad="alert('loaded');">
<form name="testform" onsubmit="testAjax(); return false">
<input type="submit" value="Test Submit"><br>
<button>Test Button 1</button>
</form>
<button onClick="testAjax();">Test Button 2</button><br>
<a href="#" onClick="testAjax()">Link</a>
</body>
</html>
posted by Pam Griffith at 8:31 PM
0 Comments:
Post a Comment
Links to this post:
Create a Link
<< Home