1.创建XMLHttpRequest的对象(注意IE浏览器的低版本问题)。通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式
2.设置调回函数。通过onreadystatechange属性设置回调函数,其中回调函数需要自定义
3.初始化XMLHttpRequest对象。通过open()方法设置请求的发送方式和路径
4.使用XMLHttpRequest对象发送请求。sen() 方法。当为get方式提交是 该值为null
- get方式提交时
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> var xmlHttp = null; //1.创建xmlHttpRequest对象 function xmlHttpRequest(){ if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return new XMLHttpRequest("Microsoft.XMLHTTP"); } } function valss(){ var name = $("#email").val(); if(name==null||name.trim()==""){ $("#div").html("邮箱不能为空"); }else{ $("#div").html(" "); } xmlHttp=xmlHttpRequest(); //2.设置回调函数 xmlHttp.onreadystatechange = context; //3.初始化XMLHttpRequest组件 var url = "/ch10/servlet?name="+ name;//服务器端地址,name值 alert(name); xmlHttp.open("GET",url,true); alert(url); //发射请求 xmlHttp.send(null); //回调函数 function context() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { var date = xmlHttp.responseText;//拿到返回的数据类型 alert(date); if (date == "true") { $("#div").html("邮箱已经存在"); } else { $("#div").html("邮箱可以使用"); } } } } </script>
- 使用post提交时 get和post提交这里主要看send()的参数是否为空
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> var xmlHttp = null; //1.创建xmlHttpRequest对象 function xmlHttpRequest(){ if (window.XMLHttpRequest) { return new XMLHttpRequest(); } else { return new XMLHttpRequest("Microsoft.XMLHTTP"); } } function valss(){ var name = $("#email").val(); if(name==null||name.trim()==""){ $("#div").html("邮箱不能为空"); } xmlHttp=xmlHttpRequest(); //2.初始化XMLHttpRequest组件 var url = "/ch10/servlet";//服务器端地址,name值 alert(name); xmlHttp.open("POST", url, true); xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xmlHttp.send("name="+name); //3设置回调函数 xmlHttp.onreadystatechange = context; //4回调函数 function context() { if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { var date = xmlHttp.responseText;//拿到返回的数据类型 alert(date); if (date == "true") { $("#div").html("邮箱已经存在"); } else { $("#div").html("邮箱可以使用"); } } } } </script>
- 使用$.ajax()方法 (get提交)
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> function valss(){ var name=$("#email").val(); if(name==null||name.trim()==""){ $("#div").html("邮箱不能为空"); }else{ $.ajax({ "url":"/ch10/servlet",//要提交的URL路径 "type":"GET",//提交的方式 "data" :"name="+name,//要发送到服务器的数据 "dataType":"text",//指定返回的数据格式 "success":callBack,//响应成功后要执行的代码 "error" :function(){//请求失败后腰之子执行的代码 alert("请求出错,请联系客服人员"); } }); function callBack(data){ if(data=="true"){ $("#div").html("该邮箱已经使用"); }else{ $("#div").html("该邮箱可以使用"); } } } } </script>
- 使用$.ajax()方法 (post提交)
<script type="text/javascript" src="js/jquery-1.12.4.js"></script> <script type="text/javascript"> function valss(){ var name=$("#email").val(); if(name==null||name.trim()==""){ $("#div").html("邮箱不能为空"); }else{ $.ajax({ "url":"/ch10/servlet",//要提交的URL路径 "type":"POST",//提交的方式 "data" :"name="+name,//要发送到服务器的数据 "dataType":"text",//指定返回的数据格式 "success":callBack,//响应成功后要执行的代码 "error" :function(){//请求失败后腰之子执行的代码 alert("请求出错,请联系客服人员"); } }); function callBack(data){ if(data=="true"){ $("#div").html("该邮箱已经使用"); }else{ $("#div").html("该邮箱可以使用"); } } } } </script>
5.以上代码都对应有一个共同的页面(光标失去事件)
<form action="#" method="post" name="form">
<table>
<tr>
<td>
注册邮箱:<input type="email" name="email" id="email" onblur="valss()"/>
</td>
<td> <div id="div"></div></td>
</tr>
<tr>
<td>
用户名:<input type="text" name="username" id="username"/>
</td>
</tr>
<tr>
<td>
密码:<input type="password" name="pwd" id="pwd"/></td>
</tr>
<tr>
<td>
确认密码:<input type="password" name="pwds" id="pwds"/></td>
</tr>
<tr>
<td>
<input type="submit" value="注册"/></td>
</tr>
</table>
</form>
6.创建servlet类
package org.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Servlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String email=request.getParameter("name");//name要跟URL中的key一致
String[] array={"123@qq.com","456@qq.com","789@qq.com"};
boolean infor=false;
for (int i = 0; i < array.length; i++) {
if(array[i].equals(email)){
infor=true;
}
}
response.setContentType("text/html;charset=utf-8");
PrintWriter out =response.getWriter();
out.print(infor);//将得到的数据输出的页面
out.flush();//刷新缓存
out.close(); //关闭out输出
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}