----- 030-ajax.php -----
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <title>Ajax</title> 6 <script type="text/javascript" src="js/ajax.js"> 7 </script> 8 </head> 9 <body> 10 <h2>Ajax</h2> 11 <form style="border: 1px solid; width:250px" align="center" id="frm"> 12 姓名：<input type="text" name="user_name"><br/> 13 年龄：<input type="text" name="user_age"><br/> 14 性别：<input type="text" name="user_sex"><br> 15 <input type="button" value="提交" onclick="saveUserInfo()"> 16 </form> 17 <div id="msg"></div> 18 </body> 19 </html> 20 <script type="text/javascript"> 21 function saveUserInfo() 22 { 23 var frm = document.getElementById("frm"); 24 var userName = frm.user_name.value; 25 var userAge = frm.user_age.value; 26 var userSex = frm.user_sex.value; 27 var postString = "user_name="+userName + "&user_age="+userAge + "&user_sex="+userSex; 28 29 30 31 32 33 var xmlHttp = createXMLHttpRequest();//初始化XMLHttpRequest对象 34 xmlHttp.open("POST", "030-ajax2.php"); 35 xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 36 xmlHttp.send(postString);//发送POST数据 37 38 xmlHttp.onreadystatechange = function(){ 39 if(xmlHttp.readyState==4 && xmlHttp.status==200){ 40 document.getElementById("msg").innerHTML = xmlHttp.responseText; 41 } 42 } 43 44 } 45 </script>
----- 030-ajax2.php -----
1 <?php 2 //header("Content-Type: text/html; charset=utf-8"); 3 echo "用户名：", $_POST[‘user_name‘], "<br/>"; 4 echo "年龄：", $_POST[‘user_age‘], "<br/>"; 5 echo "性别：", $_POST[‘user_sex‘], "<br/>"; 6 ?>
----- ajax.js -----
1 function createXMLHttpRequest() 2 { 3 var xmlHttp = null; 4 try{ 5 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 6 alert("创建了Msxml2.XMLHTTP"); 7 }catch($e1){ 8 try{ 9 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 10 alert("创建了Microsoft.XMLHTTP"); 11 }catch($e2){ 12 try{ 13 xmlHttp = new XMLHttpRequest(); 14 alert("创建了XMLHttpRequest"); 15 }catch($e3){ 16 xmlHttp = null; 17 alert("创建XMLHttpRequest失败"); 18 } 19 } 20 } 21 return xmlHttp; 22 }