<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script> function getXmlHttpRequest(){ var xhr=null; if((typeof XMLHttpRequest)!='undefined'){ xhr=new XMLHttpRequest(); }else{ xhr=new ActiveXObject("Microsoft.XMLHttp"); } return xhr; } function valiUsername(){ var xhr=getXmlHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4){ if(xhr.status==200){ var doc=xhr.responseText; document.getElementById('username_msg').innerHTML=doc; }else{ document.getElementById('username_msg').innerHTML='sorry,system error...'; } }else{ document.getElementById('username_msg').innerHTML='checking...'; } } var url="valiusername.do"; xhr.open("post",url,true); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("username="+document.getElementById('n1').value); } </script> </head> <body> <form action="register.do" method="post"> username:<input type="text" name="username" id="n1" onblur="valiUsername();"> <span style="color:red" id="username_msg"></span><br> password:<input type="password" name="password"><br> <input type="submit" value="register"> </form> </body> </html>与上篇文章的get请求相比,post请求有3点不同: @H_301_0@① xhr.open("post",true);这里将get 改为了post。
@H_301_0@② xhr.send("username="+document.getElementById('n1').value);这里参数不再为null,对于post请求,要传递的参数放在send方法里。
@H_301_0@③ 最重要的一点,必须在open和send方法之间加上代码:xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");