第一个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,IOException {
		doGet(request,response);
	}

}

后台部分相对简单很多,通过request.getParameter("username"); 来获取到username的值

加以判断,向前台写回username是否在using的结果值,供前台提示用。

相关文章

JS原生Ajax操作(XMLHttpRequest) GET请求 POST请求 兼容性问题 利用iframe模拟ajax 实现表单提交的返回...
AJAX 每日更新前端基础,如果觉得不错,点个star吧 &#128515; https://github.com/WindrunnerMax/E...
踩坑Axios提交form表单几种格式 前后端分离的开发前后端, 前端使用的vue,后端的安全模块使用的SpringSe...
很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈。 为了防止...
需要在服务器上进行哈 jquery的ajax方法: // jquery请求 $.ajax({ url: &quot;./server/slider.js...
Ajax函数封装ajax.js // Get / Post // 参数 get post // 是否异步 // 如何处理响应数据 // URL // var...