【Ajax技术】使用XHR对象发送和接受数据

紧接着上一篇，我们获取XMLHttpRequest之后，就要使用XHR对象发送和接受数据了，继续完善我们的javascript脚本文件：
verifyown.js:

//用户名校验的方法
//这个方法使用AMLHttpRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
	//1.使用最基本的DOM_API来获取文本框中的值
	//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML
	//页面中的一个标签，.value可以获取一个元素节点的value属性值
	//
	var username=document.getElementById("username").value;
	
	//2.创建XMLHttpRequest对象
	//这是XMLHttpRequest对象五步使用中最复杂的一步
	//这是由于各种浏览器兼容问题造成的，要使用各种库来屏蔽掉这种差异
	//下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
	if(window.XMLHttpRequest){
		//针对FireFox、Mozillar、Opera、Safari、IE7、IE8
		xmlhttp=new XMLHttpRequest();
		//修复类似Mozillar浏览器的bug
		if(xmlhttp.overrideMimeType){
			xmlhttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//所有的IE中window.ActiveXObject条件都成立
		//针对IE6、IE5.5、IE5(现在没人用了，可以把这条if分支删除)
		//两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中
		//排在前面的版本最新
		var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0;i

回顾一下html：

  
    
    
  
  
  
    
 用户校验ajax实例

    请输入用户名:

    
    
    
    
    
    
    
    

    
    
    
    
  

服务端的servlet：

import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;


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




public class AjaxServer extends HttpServlet {


	 protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
	        doGet(httpServletRequest, httpServletResponse);
	 }


	 protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
	        try{


	            httpServletResponse.setContentType("text/html;charset=utf-8");
	            PrintWriter out = httpServletResponse.getWriter();


	            //inte用来记录验证次数
	            Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
	            int temp = 0;
	            if (inte == null) {
	                temp = 1;
	            } else {
	                temp = inte.intValue() + 1;
	            }
	            httpServletRequest.getSession().setAttribute("total",temp);


	            //1.取参数
	            String old = httpServletRequest.getParameter("name");
	            //String name = new String(old.getBytes("iso8859-1"),"UTF-8");
	            String name = URLDecoder.decode(old,"UTF-8");
	            //2.检查参数是否有问题
	            if(old == null || old.length() == 0){
	                out.println("用户名不能为空");
	            } else{


	                if(name.equals("hpu")){
	                    //4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
	                    //写法没有变化，本质发生了改变
	                    out.println("用户名[" + name + "]已经存在，请使用其他用户名, " + temp);
	                } else{
	                    out.println("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp);
	                }
	            }
	        } catch(Exception e){
	            e.printStackTrace();
	       } 
	 }


}

最后在浏览器编辑框中输入123，点击“校验”，返回结果：
用户名[123]尚未存在，可以使用该用户名注册, 1

自己写的ajax测试成功！

转载请注明出处：http://blog.csdn.net/acmman/article/details/47667211