AJAX基础,AJAX验证邮箱是否存在的例子。

2019独角兽企业重金招聘Python工程师标准>>>

例子：

function loadXMLDoc(email_){
	
	var xmlhttp;
	if(window.XMLHttpRequest){//判断浏览器是否支持XMLHttpRequest（）对象。
		xmlhttp=new XMLHttpRequest();//
	}else{//不支持的话创建ActiveXObject（）对象。
		xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()//状态改变时调用
	{
		if(xmlhttp.readyState==4&&xmlhttp.status==200){
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
		else{document.getElementById("myDiv").innerHTML="用户名拉取失败";}
			
		
	}
	var url="do/user?email="+email_;
	xmlhttp.open("GET",url,true)
	xmlhttp.send();
}
function getValue(){//用来获取ID的值。
	var str=document.getElementById("email").value;
	loadXMLDoc(str);
}

一下为servlet的代码：

package cn.wodeschool.school.web.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import cn.wodeschool.school.model.entity.User;
import cn.wodeschool.school.model.servicer.imple.ServiceFactory;
@WebServlet("/do/user")
public class LoginUserServlet extends HttpServlet{

	private static final long serialVersionUID = -2726821096314314651L;

	protected void doPost(HttpServletRequest request,HttpServletResponse response)
	throws ServletException,IOException{
		String op =request.getParameter("op");
		String email=request.getParameter("email");
		String password=request.getParameter("password");
		User user=new User();
		user.setEmail(email);
		user.setPassword(password);

		if("reg".equals(op)){
			doRegister(request, response,user);
		}else if("login".equals(op)){
			doLogin(request,response,user);
		}
	}

	@SuppressWarnings("unchecked")
	private void doLogin(HttpServletRequest request, HttpServletResponse response,User user) throws IOException {
		List<User>	list=ServiceFactory.getService("user").findByConditions(user.getEmail());
				if(list.isEmpty()||!list.get(0).getPassword().equals(user.getPassword())){
					response.getWriter().write("用户名或者密码错误");
					return;
				}
				request.getSession().setAttribute("user", list.get(0));
				response.getWriter().write("登录成功");
		}

	private void doRegister(HttpServletRequest request, HttpServletResponse response,User user) throws IOException {
		String phone=request.getParameter("phone");
		String name=request.getParameter("name");
		String profession=request.getParameter("profession");
		user.setName(name);
		user.setPhone(phone);
		user.setProfession(profession);
		@SuppressWarnings("unchecked")
		List<User> list=ServiceFactory.getService("user").findByConditions(name);
		if(!list.isEmpty()){
			response.getWriter().write("该邮箱已经被注册");
			return;
		}
		int row=ServiceFactory.getService("user").save(user);
		//request.getSession().setAttribute("users", user);
		System.out.println(row);
	}

	protected void doGet(HttpServletRequest request,HttpServletResponse response)
			throws ServletException,IOException{
		String email=request.getParameter("email");
		System.out.println(email);
		@SuppressWarnings("unchecked")
		List<User> list=ServiceFactory.getService("user").findByConditions(email);
		if(list.isEmpty()){
			response.getWriter().write("邮箱可用");
			return ;
		}else{
			response.getWriter().write("该邮箱已经被注册");
		}
	}
}

XMLHttpRequest是ajax的基础，创建xmlhttprequest的方法是：老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new XMLHttpRequest(); variable=new ActiveXObject("Microsoft.XMLHTTP");

在使用时首先判断浏览器是否支持XMLHttpRequest对象if(window.XMLHttpRequest)。

如果需要向服务器发送请求，使用XMLHttpRequest对象的open（）和send（）方法。

xmlhttp.open("method","url"async);
xmlhttp.send();

method表示请求的方式，post或者get，url请求的地址。async：true(异步)或false(同步).

send(string)将请求发送到服务器，string仅用于POST请求。

简单的POST请求。

xmlhttp.open("POST","demo_a",true);
xmlhttp.send();

如果要想HTML表单那样post数据，使用setRequestHeader（）来添加HTTP头。

xmlhttp.open("POST","ajax_test.html",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value) header.规定头的名称，value：规定头的值。

xmlhttp.responseText;//获得字符串形式的响应数据；

 

onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

下面是 XMLHttpRequest 对象的三个重要的属性：

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

 

菜鸟教程的例子：http://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html

转载于:https://my.oschina.net/wang520/blog/740524