ajax介绍和使用

一、什么是ajax

• Ajax：
  （Asynchronous JavaScript And XML）指异步 JavaScript 及 XML，不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术，是基JavaScript、XML、HTML、CSS新用法
• Ajax：只刷新局部页面的技术
  JavaScript：更新局部的网页
  XML：一般用于请求数据和响应数据的封装
  XMLHttpRequest对象：发送请求到服务器并获得返回结果CSS：美化页面样式
  异步：发送请求后不等返回结果，由回调函数处理结果

JavaScript中XMLHttpRequest对象是整个Ajax技术的核心，它提供了异步发送请求的能力

• 构造方法
  不同浏览器，甚至相同浏览器的不同版本，获取该对象的方式是不同的。

var xmlhttp;
if(window.XMLHttpRequest){
	//IE7+ FireFox Chrome Opear Safari
	xmlhttp = new XMLHttpRequest();
}else{
	xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

• 方法：

• open(method,URL,async) 建立连接。“get|post” ，“url?name=tom” ，“true|false”

• send(content) 发送请求 。可以带参数 或 null

• setRequestHeader(header,value)

• 属性
  readyState：类型short；只读
  responseText：类型String；只读
  responseXML：类型Document；只读
  status：类型short；只读

• 事件处理器
  onreadystatechange

二、常用方法

• open(method,URL,async) 建立与服务器的连接
  method：指定请求的HTTP方法,典型的值是GET或POST
  URL：指请求的地址
  async：指定是否使用异步请求，其值为true或false

• send(content) 发送请求
  content：指定请求的参数

• setRequestHeader(header,value) 设置请求的头信息

三、常用属性

• onreadystatechange：指定回调函数
• readyState: XMLHttpRequest的状态信息，就绪状态码

• status：HTTP的状态码

• responseText：获得响应的文本内容
• responseXML：获得响应的XML文档对象 documednt

就绪状态是4而且状态码是200，才可以处理服务器数据

实现邮箱验证

//my.js
function getXMLHttpRequest(){
	var xmlhttp;
	if(window.XMLHttpRequest){
		//IE7+ FireFox Chrome Opear Safari
		xmlhttp = new XMLHttpRequest();
	}else{
		xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
	}
	return xmlhttp;
}

//register.jsp
window.onload = function(){
//得到email标签
	var emailNode = document.getElementsByName("email")[0];
//注册实践
	emailNode.onblur = function(){
		var val = this.value;//得到email的文本
		var emailMsg = document.getElementById("emailMsg");//得到span标签	
		emailMsg.innerHTML = "";//清空span标签
		if(val==""){
		emailMsg.innerHTM = "email不能为空"//给span赋值
		return ;
		}
	}
	//创建XMLHttpRequest对象
			var xhr = getXMLHttpRequest();
			//处理结果
			xhr.onreadystatechange = function(){
				if(xhr.readyState==4){//请求一切正常
					if(xhr.status==200){//服务器响应一切正常
						if(xhr.responseText=="true"){
							emailMsg.innerHTML =  "邮箱已被占用";
							emailMsg.style.color="red";//动态调用样式
						}else{
							emailMsg.innerHTML = "可以使用";
							emailMsg.style.color="green";//动态调用样式
						}
					}
				}
			}
			//与服务器创建连接
			xhr.open("get","${pageContext.request.contextPath }/servlet);
			//发送请求
			xhr.send(null);
			}
}

//servlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		PrintWriter out = response.getWriter();
		String email = request.getParameter("email");
		UserServiceImpl = usi = new UserServiceImpl();
		try{
		boolean b = usi.findEmain(email);//查询email是否存在
		out.print(b);
		} catch (SQLExcption e){
			e.printStackTrace();
		}
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);
	}
}