第一个ajax小demo
之前转过两篇ajax的文章,今天终于自己动手写了一个ajax的小demo,体验一下ajax的神奇之处,记录下来,纯属个人学习代码,分享给初学的朋友们。
前台部分
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>AjaxDemo</title> </head> <body> <center> <table> <caption>Ajax Demo</caption> <tr><td colspan="3"> </td></tr> <tr> <td>username</td> <td><input name="username" onchange="checkUsername()"></td> <td id="usernameTips"> </td> </tr> </table> </center> <script type="text/javascript"> // 校验username是否被占用 function checkUsername(){ // 定义ajax变量xmlhttp var xmlhttp; // 创建xmlhttp if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest; } else { xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); } // 获取username的输入值 var username = document.getElementsByName("username")[0].value; // 拼接请求URL var url = "checkUsername?username=" + username; xmlhttp.open("get", url); xmlhttp.send(); // 设置回调函数 xmlhttp.onreadystatechange = function() { // 判断请求状态 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 获取返回的responseText 值 if (xmlhttp.responseText === "using"){ // 设置username的提示语 document.getElementById("usernameTips").innerHTML = username + " is using, please change other."; } else { document.getElementById("usernameTips").innerHTML = "Congratulations."; } } } } </script> </body> </html>
页面上方一个table,主要是为了保持username和输入框即提示框的展示。
主要的输入域为username所在的input输入域,绑定的事件为onchange事件,调用方法为checkUsername。
创建XMLHttpRequest对象
创建xmlhttp对象的时候,采取兼容低版本IE浏览器和高版本IE浏览器,火狐,chrome等浏览器的方式
// 创建xmlhttp if (window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest; } else { xmlhttp = new ActiveObject("Microsoft.XMLHTTP"); }
获取username输入值的方法在以前的博文中讲过, document.getElementsByName("username")[0].value 因为这里没有定义id属性,所以采用getElementsByName的方式,拿到集合后再取第0个元素的value值。
get请求
var url = "checkUsername?username=" + username;
拼接URL时,在请求的path中,添加上username的变量值。
其中
// 拼接请求URL var url = "checkUsername?username=" + username; xmlhttp.open("get", url); xmlhttp.send();
为get请求方式,也可换为post请求方式。
post请求
代码修改为
xmlhttp.open("post", "checkUsername", true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("username=" + username);
回调函数
// 设置回调函数 xmlhttp.onreadystatechange = function() { // 判断请求状态 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { // 获取返回的responseText 值 if (xmlhttp.responseText === "using"){ // 设置username的提示语 document.getElementById("usernameTips").innerHTML = username + " is using, please change other."; } else { document.getElementById("usernameTips").innerHTML = "Congratulations."; } } }
回调部分,一定要先判断readyState 值和 status值,否则会得到意想不到的结果。
刚开始的代码,没有判断readyState 和 status,在 xmlhttp.onreadystatechange = function() { 紧接着读取xmlhttp.responseText值,一下子返回三个值。加上readyState 和 status 的判断后,就正常了。
后台部分
package com.ajax; import java.io.IOException; import java.io.PrintWriter; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** * Servlet implementation class CheckUsername */ @WebServlet("/checkUsername") public class CheckUsername extends HttpServlet { private static final long serialVersionUID = 1L; /** * @see HttpServlet#HttpServlet() */ public CheckUsername() { super(); } /** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String username = request.getParameter("username"); PrintWriter out = response.getWriter(); if ("admin".equals(username)){ out.write("using"); } else { out.write("notUsing"); } } /** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
后台部分相对简单很多,通过request.getParameter("username"); 来获取到username的值
加以判断,向前台写回username是否在using的结果值,供前台提示用。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。