* It shows that the page is updated without any action of users or refresh.
see here
Showing posts with label ajax. Show all posts
Showing posts with label ajax. Show all posts
Thursday, 15 November 2007
Sunday, 19 August 2007
Ajax example for communicating with service side
Requested file :
* test.html - main html test page
* echo.php - php file as a source for display
* jslb_ajax.js - ajax component javascript file
******* jslb_ajax.js ***********
Download jslb_ajax.js
******* echo.php *****
<?php
//get Post request
$data = $_POST['data'];
$data = "receive ".$data." value now.";
// HTML entity (change < to ....)
$data = htmlspecialchars($data, 0, "UTF-8");
// URI encoding
$data = rawurlencode($data);
// setup UTF-8 for output
mb_http_output ('UTF-8');
// output
echo($data);
?>
**** test.html ****
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="jslb_ajax.js" charset="utf-8"></script>
<script type="text/javascript">
function clickButton() {
sendRequest(load_xmlFile, '&data=abcd', 'POST', './echo.php', true, true);
}
function load_xmlFile(oj) {
var xmlDoc = oj.responseXML;
var nodes = xmlDoc.getElementsByTagName("testdata");
alert(nodes[0].firstChild.nodeValue);
}
</script>
<title>Test page</title>
</head>
<body>
<br>
<form>
<input type="button" value="send abcd to server side" onclick="clickButton()">
</form>
</body>
</html>
* test.html - main html test page
* echo.php - php file as a source for display
* jslb_ajax.js - ajax component javascript file
******* jslb_ajax.js ***********
Download jslb_ajax.js
******* echo.php *****
<?php
//get Post request
$data = $_POST['data'];
$data = "receive ".$data." value now.";
// HTML entity (change < to ....)
$data = htmlspecialchars($data, 0, "UTF-8");
// URI encoding
$data = rawurlencode($data);
// setup UTF-8 for output
mb_http_output ('UTF-8');
// output
echo($data);
?>
**** test.html ****
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="jslb_ajax.js" charset="utf-8"></script>
<script type="text/javascript">
function clickButton() {
sendRequest(load_xmlFile, '&data=abcd', 'POST', './echo.php', true, true);
}
function load_xmlFile(oj) {
var xmlDoc = oj.responseXML;
var nodes = xmlDoc.getElementsByTagName("testdata");
alert(nodes[0].firstChild.nodeValue);
}
</script>
<title>Test page</title>
</head>
<body>
<br>
<form>
<input type="button" value="send abcd to server side" onclick="clickButton()">
</form>
</body>
</html>
AJax example for reading xml file
Requested file :
* test.html - main html test page
* test.xml - xml file as a source for reading
* jslb_ajax.js - ajax component javascript file
******** test.xml *******
<?xml version="1.0" encoding="UTF-8"?>
<testdata> this is the text source part </testdata>
******* jslb_ajax.js ***********
download ajax component
***** test.html ******
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="jslb_ajax.js" charset="utf-8"></script>
<script type="text/javascript">
function clickButton() {
sendRequest(load_xmlFile, '', 'GET', 'test.xml', true, true);
}
function load_xmlFile(oj) {
var xmlDoc = oj.responseXML;
var nodes = xmlDoc.getElementsByTagName("testdata");
alert(nodes[0].firstChild.nodeValue);
}
</script>
<title>Test page</title>
</head>
<body>
<br>
<form>
<input type="button" value="read test.xml and display it" onclick="clickButton()">
</form>
</body>
</html>
* test.html - main html test page
* test.xml - xml file as a source for reading
* jslb_ajax.js - ajax component javascript file
******** test.xml *******
<?xml version="1.0" encoding="UTF-8"?>
<testdata> this is the text source part </testdata>
******* jslb_ajax.js ***********
download ajax component
***** test.html ******
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="Javascript" src="jslb_ajax.js" charset="utf-8"></script>
<script type="text/javascript">
function clickButton() {
sendRequest(load_xmlFile, '', 'GET', 'test.xml', true, true);
}
function load_xmlFile(oj) {
var xmlDoc = oj.responseXML;
var nodes = xmlDoc.getElementsByTagName("testdata");
alert(nodes[0].firstChild.nodeValue);
}
</script>
<title>Test page</title>
</head>
<body>
<br>
<form>
<input type="button" value="read test.xml and display it" onclick="clickButton()">
</form>
</body>
</html>
Subscribe to:
Posts (Atom)