本系列博客汇总在这里：AJAX 汇总

AJAX 的 get 请求

  • 一、前端页面
  • 二、后台 servlet
  • 三、配置文件 web.xml
  • 四、效果展示

 

一、前端页面 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//定义xmlhttprequest
var xmlHttp;
function ajaxFunction()
{
	try
	{
	   xmlHttp=new XMLHttpRequest();
	}
	catch (e)
	{
		try 
		{
	     	xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
	    }
	    catch (e)
	    {
		    try
		    {
		       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		    }
		    catch (e)
		    {
		      alert("您的浏览器不支持AJAX！");
		       return false;
		    }
     	}
  	}
}
function validUser(obj)
{
	//创建XMLHttpRequest
	ajaxFunction();
	var url = "/ajax_demo/valid?username="+obj.value;
	//打开连接,第一个参数是请求方式，第二个参数是请求地址，第三个参数是同步还是异步，true同步，false是异步
	xmlHttp.open('get', url, false);
	//接受服务器 的响应
	xmlHttp.onreadystatechange = _callback;
	//发送数据,如果是get请求数据是在url上传递，不需要发送数据,send必须在最后调用。
	xmlHttp.send(null);
}

function _callback()
{
	//readyState==4请求完成
	if(xmlHttp.readyState == 4)
	{
		//服务器响应正确
		if(xmlHttp.status == 200)
		{
			//接收服务器的响应数据
			var result = xmlHttp.responseText;
			if(result == 'error')
			{
				document.getElementById('tip').innerHTML = '用户名已存在';
			}
			else
			{
				document.getElementById('tip').innerHTML = '';
			}
		}
	}
}
</script>
</head>
<body>
<form>
	<table>
		<tr>
			<td>用户名</td>
			<td><input id="username" type="text" onblur="validUser(this)"><span id='tip'></span></td>
		</tr>	
	</table>
</form>
</body>
</html>
二、后台 servlet 
package cn.wyx.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class ValidServlet extends HttpServlet
{
	protected void doGet(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException
	{
		doPost(request, response);
	}
	protected void doPost(HttpServletRequest request,
			HttpServletResponse response) throws ServletException, IOException
	{
		String username = request.getParameter("username");		
		if("wyx".equals(username))
		{ 
			response.getWriter().print("error");
		}
		else
		{ 
			response.getWriter().print("ok"); 
		}			
	}
}
三、配置文件 web.xml 
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <servlet>
    <servlet-name>ValidServlet</servlet-name>
    <servlet-class>cn.wyx.servlet.ValidServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>ValidServlet</servlet-name>
    <url-pattern>/valid</url-pattern>
  </servlet-mapping>
</web-app>
四、效果展示

AJAX（3）_AJAX 的 get 请求_服务器
如有错误，欢迎指正！