01.<html>
02.<head>
03.<title>ThaiCreate.Com Ajax Tutorial</title>
04.</head>
05. <script language="JavaScript">
06. var HttPRequest = false;
07.
08. function doCallAjax() {
09. HttPRequest = false;
10. if (window.XMLHttpRequest) {
11. HttPRequest = new XMLHttpRequest();
12. if (HttPRequest.overrideMimeType) {
13. HttPRequest.overrideMimeType('text/html');
14. }
15. } else if (window.ActiveXObject) {
16. try {
17. HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
18. } catch (e) {
19. try {
20. HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
21. } catch (e) {}
22. }
23. }
24.
25. if (!HttPRequest) {
26. alert('Cannot create XMLHTTP instance');
27. return false;
28. }
29.
30. var url = 'post.php';
31. var pmeters = 'myName='+document.getElementById("txtName").value;
32.
33. HttPRequest.open('POST',url,true);
34.
35. HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
36. HttPRequest.setRequestHeader("Content-length", pmeters.length);
37. HttPRequest.setRequestHeader("Connection", "close");
38. HttPRequest.send(pmeters);
39.
40.
41. HttPRequest.onreadystatechange = function()
42. {
43.
44. if(HttPRequest.readyState == 3)
45. {
46. document.getElementById("mySpan").innerHTML = "Now is Loading...";
47. }
48.
49. if(HttPRequest.readyState == 4)
50. {
51. document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
52. }
53.
54. }
55.
56.
57.
58.
59.
60. }
61. </script>
62.<body>
63. <input type="text" name="txtName" id="txtName" value="">
64. <input name="btnButton" id="btnButton" type="button" value="Click" onClick="JavaScript:doCallAjax();">
65. <br>
66. <span id="mySpan"></span>
67.</body>
68.</html>
