【Ajax技术】使用XHR对象发送和接受数据-阿里云开发者社区

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

2015-08-14 1271

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

紧接着上一篇，我们获取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<activeName.length;i++){
			try{
				//获取一个控件名进行创建，如果创建成功就终止循环
				//如果创建失败，会抛出异常，然后就可以继续循环，继续尝试创建
				xmlhttp=new ActiveXObject(activeName[i]);
				break;
			}catch(e){
				//仍然不能创建，抛出异常后，给出友好提示
			}
		}		
	}
	//确认XMLHttpRequest对象创建成功
	if(!xmlhttp){
		alert("XMLHttpRequest对象创建失败！！");
	}else{
		alert(xmlhttp);
	}


	//2.注册回调函数
	//后面写的是函数名，千万不要加括号，会把
	//回调函数的返回值给XHR的回调函数对象
	xmlhttp.onreadystatechange=callback;
	
	//3.设置连接信息
	//包括传输方式(get/post)，请求的url地址，异步还是同步方式(true/false)，账号和密码(可不写)
	xmlhttp.open("GET","AjaxServer?name="+username, false);
	
	/**
	 * Post方式
	 * req.open("POST", action, false);
	 * req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
	 * var str="name="+username;
	 * req.send(str);
	 * */
	
	//4.发送数据，开始和服务器端进行交互
	//同步方式下，send这句话会在服务器端数据回来之后才执行
	//异步方式下，send这句话会立即完成执行
	xmlhttp.send(null);
}


//回调函数
function callback(){
	//判断对象的状态是交互完成
	//XHR的交互状态readyState代号有：
	/**
	  * 监听服务器返回的状态一共有五个状态：
	  * 0,1,2,3,4
	  * 0是啥都没有连接的时候
	  * 1是open方法还没被调用
	  * 2是open方法调用了，send方法没有执行
	  * 3是open方法执行了，send方法也执行了
	  * 4是返回结果的时候的状态(status) 
	  * */
	if(xmlhttp.readyState==4){
		//判断http的交互是否成功
		if(xmlhttp.status==200){
			//获取服务器端返回的数据
			//一种是纯文本的形式，一种是DOM对象
			var responseText=xmlhttp.responseText;
			//将数据显示在界面上
			//通过DOM的方式找到div标签对应的元素节点
			var divNode=document.getElementById("result");
			//设置元素节点中的html内容
			divNode.innerHTML=responseText;
		}
	}
}

回顾一下html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>用户校验ajax实例</title>
    <script type="text/javascript" src="js/verifyown.js"></script>
  </head>
  
  <body>
    <h1> 用户校验ajax实例</h1><br>
    请输入用户名:<br/>
    <!-- ajax不需要使用表单进行数据提交，因此不用写表单标签 -->
    
    <!-- ajax不需要name属性，只需要一个id的属性 -->
    <input type="text" id="username"/>
    <input type="button" value="校验" onclick="verify()"/>
    <!-- 这个div用于存放服务器返回的信息，开始为空 -->
    <!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 -->
    <div id="result">
    
    </div>
    <!-- div和span的值的差异，div的内容独占行，span的内容和其他内容相处良好 -->
    
  </body>
</html>

服务端的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

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

热门文章

最新文章

相关课程

相关电子书