AJAX即“Asynchronous JavaScript and XML”（异步JavaScript和XML),AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
Ajax的核心是JavaScript对象XmlHttpRequest。通过 AJAX，您的 JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面的情况与 Web 服务器交换数据(也就是说主要结合HTML5,JS和服务器达到页面的局部刷新的技术)。AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
以下代码是用户注册与AJAX的运用.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>用户注册页面</title>
<script type="text/javascript">
function senduser(){ //用户名的AJax验证
var userinput=document.getElementById("username");
var xmlHttp=false;
//IE获取XMLHttpRequest对象
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//非IE浏览器获取XMLHttpRequest对象
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange=function(){//当服务器返回消息(响应)时触发该事件
if(xmlHttp.readyState==4 && xmlHttp.status==200){
var text=xmlHttp.responseText;
document.getElementById("userlabel").innerHTML=text;
}
}
xmlHttp.open("post", "ValidateServlet",true);//打开连接
//如果是get提交,则打开连接和发送请求是如下两行代码
//xmlHttp.open("get","ValidateServlet?username="+userinput.value,"true");
//xmlHttp.send(null);
//如果是POST提交，必须加入下面的请求头才可以传递参数到服务器.
//设置请求头一定要放在打开连接之后进行
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("username="+userinput.value);//发送请求
}
function sendcode(){//随即验证码的Ajax验证
var codeinput=document.getElementById("yanzhengma");
var xmlHttp=false;
//IE获取XMLHttpRequest对象
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//非IE浏览器获取XMLHttpRequest对象
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
var codetext=xmlHttp.responseText;
document.getElementById("codelabel").innerHTML=codetext;
}
}
xmlHttp.open("post", "CodeValidateServlet",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("yanzhengma="+codeinput.value);
}
function changeCode(){//随即验证码的产生
document.getElementById("codimg").src="RandomCodeServlet?"+Math.random();
}
function checkpwd(){
var pwd1=document.getElementById("password1");
var pwd2=document.getElementById("password2");
if(pwd1.value !=pwd2.value){
document.getElementById("pwdlabel").innerHTML="两次输入的密码不一致,请重新输入!";
}
}
</script>
</head>
<body>
<form action="RigestServlet" method="post">
<p>用户名:<input type="text" id="username" name="username" οnblur="senduser()"/><label id="userlabel"></label></p>
<p>密码:<input type="password" id="password1" name="password"/></p>
<p>确认密码:<input type="password" id="password2" οnblur="checkpwd()"/><label id="pwdlabel"></label></p>
<p>电子邮件:<input type="text" id="email" name="email"/></p>
<p>验证码:<input type="text" id="yanzhengma" οnblur="sendcode()" name="yanzhengma" /><img src="RandomCodeServlet" id="codimg" />
<a href="#" οnclick="changeCode()">看不清换一张</a><label id="codelabel"></label>
</p>
<p><input type="submit" value="注册 " /></p>
</form>
</body>
</html>
public class ValidateServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public ValidateServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;cahrset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out=response.getWriter();
String useninput=request.getParameter("username");
if("abc".equals(useninput)){
out.print("this username is exites!");
}
else{
out.print("rigester");
}
out.flush();
out.close();
}
}
随机码的产生代码和随即验证码的Ajax验证所请求的服务器代码略.
public class RigestServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public RigestServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("text/html;cahrset=utf-8");
request.setCharacterEncoding("utf-8");
String yanzhegnma=request.getParameter("yanzhengma");
HttpSession session=request.getSession();
String randcode=(String) session.getAttribute("codes");
if(yanzhegnma.equalsIgnoreCase(randcode)){
String userinput=request.getParameter("username");
String password=request.getParameter("password");
String email=request.getParameter("email");
UserBean bean=new UserBean();
bean.setUsername(userinput);
bean.setPwd(password);
bean.setEmail(email);
MyService service=new MyService();
service.adduserinfo(bean);
request.getRequestDispatcher("/success.jsp").forward(request, response);
}
}
}
2004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
