ajax 故名思议,局部刷新,完成动态数据的提交 ,验证,反馈
第一步 写html 里面的form表单
<form>
姓名:<input type="text"name="txtName" id="txtName"onblur="testName()"/>
<span id="rrSpan"name="rrSpan"/></span>
</form>
第二步 编写js 代码
<script type="text/javascript"language="javacript">
var xmlHttp;
//创建xmlhttprequest对象
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHttp");
}
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
}
//毁掉函数
function process(){
if(xmlHttp.readystate==4){
//服务器返回响应
if(xmlHttp.status==200){
//返回正常反应
var nrSpan=document.getElementByIdx_x("rrSpan");
nrSpan.innerHTML=xmlHttp.responseText();
}
}
}
function testName(){
//获取用户输入
vartxtName=document.getElementByIdx_x("txtName");
//非空判断
if(txtName=="")
{
var nrSpan=document.getElementByIdx_x("rrSpan");
nrSpan.innerHTML="姓名不能为空";
}
else{
//创建xmlhttprequest对象
//调用方法创建
createXMLHttpRequest();
xmlHttp.open("post","example.jsp");
xmlHttp.onreadystatechange=process();//回调的函数
xmlHttp.setRequestHeader("Content-Type","application/x-w-form-urlencoded");
xmlHttp.send("uname="+txtName);
}
}
</script>
第三步 编写处理页面 example.jsp
<%
String name=request.getParameter("uname");
//进行判断
if(name.equals("lkl")){
out.println("用户名已经存在");
}
else{
out.print("可以使用,同意注册");
}
%>
就此三步,以上代码是纯手工输入,没有在编译器里运行 ,不保证不会出现输入错误,请谅解,原文来自北大青鸟,谢谢。
第一步 写html 里面的form表单
<form>
</form>
第二步
<script type="text/javascript"language="javacript">
//创建xmlhttprequest对象
function createXMLHttpRequest(){
}
//毁掉函数
function process(){
}
}
}
function testName(){
if(txtName=="")
var nrSpan=document.getElementByIdx_x("rrSpan");
nrSpan.innerHTML="姓名不能为空";
}
else{
//创建xmlhttprequest对象
//调用方法创建
createXMLHttpRequest();
xmlHttp.open("post","example.jsp");
xmlHttp.onreadystatechange=process();//回调的函数
xmlHttp.setRequestHeader("Content-Type","application/x-w-form-urlencoded");
xmlHttp.send("uname="+txtName);
}
}
</script>
第三步
<%
String name=request.getParameter("uname");
//进行判断
if(name.equals("lkl")){
out.println("用户名已经存在");
}
else{
out.print("可以使用,同意注册");
}
%>
就此三步,以上代码是纯手工输入,没有在编译器里运行 ,不保证不会出现输入错误,请谅解,原文来自北大青鸟,谢谢。