入门级别的Ajax小例子

入门级别的AJAX小例子

实现方式：最原始的JS，Jquery

返回形式：字符串，XML

 

JSP页面：

<input type="text" name="user" id="username" size="20"/>
<input type="button" name="check" id="check" value="校验" onclick="verify()"/><br /><br />
<div id="result"></div>

 

1、返回类型是字符串的情况：

 

Servlet

public void doGet(HttpServletRequest request, HttpServletResponse response)
		  throws ServletException, IOException {
	this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
		   throws ServletException, IOException {
	response.setContentType("text/html;charset=utf-8");
	PrintWriter out = response.getWriter();
	String name = request.getParameter("name");
	if(name==null || name.length()==0){
		out.println("用户名不能为空！");
	}else {
		if(name.equals("admin")){
			out.println("用户名"+name+"已经存在，请选择其他的用户名进行注册！");
		}else{
			out.println("用户名"+name+"尚未存在，你可以使用该用户名");
		}
	}
	out.flush();
	out.close();
	}

 

使用最原始的JS方法进行请求：

var xmlHttp ;
function verify(){
	//通过dom方式获取文本框中的值
	var name = document.getElementById("username").value;
	//1、创建XMLHTTPRequest对象
	//针对IE和其他类型的浏览器建立这个对象的不同方式写代码
	if(window.XMLHttpRequest){ //针对于Firefox，Mozilalr，Opera，Safari，IE7，IE8
		 xmlHttp = new XMLHttpRequest();
		//针对某些特定版本的Mozillar浏览器的BUG进行修正
		if(xmlHttp.overrideMimeType){
			xmlHttp.overrideMimeType("text/xml");
		}
	}else if(window.ActiveXObject){
		//针对于IE6，IE5.5，IE5
		//两个可以用于创建XMLHttpRequest对象的挂件名称保存在一个加js的数据里，前面的版本较新
		var activexName =["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
		for(var i=0;i<activexName.length;i++){
			try{
				 xmlHttp = new ActiveXObject(activexName[i]);
				break;
			}catch(e){
				
			}
		}
	}
	
	if(!xmlHttp){
		alert("XMLHttpRequest创建失败！");
		alert(xmlHttp);
		return ;
	}
	
	//2、注册回调函数
	xmlHttp.onreadystatechange = callback;
/****************GET方式请求开始*********************************/
	//3、设置连接信息
	//第一个参数：http的请求方式，支持所有http的情切方式，主要使用get和post
	//第二个参数：请求的URL，get方式请求的参数也在url中，当需要传递很多参数时，可以在URL后面罗列
	//第三个参数：采用异步还是同步方式交互，true表示异步
	//xmlHttp.open("GET","AjaxTest?name="+name,true);
	
	//4、发送数据，开始跟服务器进行交互
	//同步方式下，send这句话会在服务器端数据回来之后执行
	//异步方式下，send这句话会立即完成执行
	//xmlHttp.send(null);
/****************GET方式请求结束*********************************/

/****************POST方式请求开始*********************************/
	//POST方式请求数据
	xmlHttp.open("POST","AjaxTest",true);
	//设置http的请求头
	xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
	//发送数据：POST方式传递多个参数时，如果使用多个send方法进行传递是不起作用的，可以借鉴于get方法，将需要传递的参数在send方法后面罗列，如xmlHttp.send(“name=” +name+”&sex=”+sex+”&age=”+age)
	xmlHttp.send("name="+name);//所有的参数都通过这个方法传给服务器
/****************POST方式请求结束*********************************/
	
}

//回调函数：处理返回的结果
function callback(){
	//判断对象的状态是交互完成
	if(xmlHttp.readyState==4){
		//判断http的交互是否成功
		if(xmlHttp.status == 200){
			//获取服务器端返回的数据
			//获取服务器端输出的纯文本数据
			var responseText = xmlHttp.responseText;
			//将数据显示在页面上
			document.getElementById("result").innerHTML = responseText;
			//document.getElementById("username").value=" ";
		}
	}
}

 

使用Jquery的GET方法进行请求（POST方法类似）：

function verify(){
	//1.获取文本框中的内容
	//dom方式：name=document.getElementById("username");
	//jquery查找节点的方式
	var name = $("#username").val();
	alert("获取到的数据为："+name);
	//2、将文本框中的数据发送给服务器的servlet
	//使用jquery的XMLHTTPRequest对象get请求的封装
	//第一个参数表示要连接的URL，
	//第二个为传过去的数据，此处因为在第一个参数中已经带了数据，所以第二个就不要传参了
	//第三个是回调函数，data从服务器返回的数据
	$.get("AjaxTest?name="+name,null,function(data){
		$("#result").html(data);
		
	});
}

//回调函数，相当于上面的function(data)，这个是把回调函数独立成了一个方法。
function callback(data){
	alert("回调函数！");
	//3、接收服务器返回的数据
	alert("返回的数据是："+data);
	//4、将服务器返回的数据动态的显示到jsp页面中
	$("#result").html(data);
}

 

 2、返回形式是XML的情况：

 

Servlet：

public void doGet(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	this.doPost(request, response);
}

public void doPost(HttpServletRequest request, HttpServletResponse response)
		throws ServletException, IOException {
	//response.setContentType("text/html;charset=utf-8");
	//修改点1：修改相应的content-type必须是text/xml格式的
	response.setContentType("text/xml;charset=utf-8");
		
	PrintWriter out = response.getWriter();
	String name = request.getParameter("name");
		
	//修改点2：返回的数据必须拼接成xml格式的
	StringBuffer builder = new StringBuffer();
	builder.append("<message>");
	if(name==null || name.length()==0){
		builder.append("用户名不能为空").append("</message>");
	}else {
		if(name.equals("admin")){
			builder.append("用户名["+name+"]已经存在，请选择其他的用户名进行注册！").append("</message>");
		}else{
			builder.append("用户名["+name+"]尚未存在，你可以使用该用户名").append("</message>");
		}
	}
	out.println(builder.toString());
	out.flush();
	out.close();
	}

 

原始JS的Ajax请求跟字符串的类似，就是回调函数不一样，也就是处理方式不一样。

// 回调函数
function callback() {
// 判断对象的状态是交互完成
	if (xmlHttp.readyState == 4) {
		// 判断http的交互是否成功
		if (xmlHttp.status == 200) {
			// 使用responseXML的方式来接收XML数据对象的DOM对象
			var responseXml = xmlHttp.responseXML;
			if(responseXml!=null){
				// 获取根元素节点:使用dom中的getElementsByTagName根据标签名来获取元素节点，返回的是一个数组
				var messageNodes = responseXml.getElementsByTagName("message");
				if(messageNodes.length!=0){
					// message标签中的文本在dom中是message标签所在的元素节点的子节点，通过firstChild方法获取它的第一个子节点
					// 通过以下方式可以获取到文本内容所对应的节点
					var textNode = messageNodes[0].firstChild;

					// 对于文本节点，可以通过nodeValue的方式返回文本节点的文本内容
					var c = textNode.nodeValue;

					// 将数据显示在页面上
					document.getElementById("result").innerHTML = responseMessage;
					// document.getElementById("username").value=" ";
				}else{
					alert("XML数据格式错误，原始文本为："+xmlHttp.responseText);
				}
				
			}else{
				alert("XML数据格式错误，原始文本为："+xmlHttp.responseText);
			}
		}
	}
}

 

Jquery的POST方法进行处理：

Ajax：
$.ajax({
	type:"POST",		//请求方式
	url:"AjaxTestXML", 	//请求路径
	data:"name="+name,  //传递给服务器的数据
	dataType:"xml",		//告诉jquery返回的数据格式
	success:callback	//定义交互完成，并且服务器正确返回数据时调用的回调函数
	});
//回调函数，相当于上面的function(data)
function callback(data){
//	alert("回调函数！");
	//3、接收服务器返回的数据
//	alert("返回的数据是："+data);
		
	//因为是xml格式的数据，需要将data这个dom对象中的数据解析出来
	//首先需要将dom对象转换成jquery对象
	var jqueryObj = $(data);
	
	//获取message节点
	var message = jqueryObj.children();
	//获取message中的文本信息
	var text = message.text();
	
	//4、将服务器返回的数据动态的显示到jsp页面中
	//$("#result").html(data);
	$("#result").html(text);
}

 这个例子是最简单的，却不是最好的解决方法。随着Jquery的越来越牛X，把Ajax包装的越来越好，Ajax的请求和处理也越来越简单，越来越丰富化。当然咱们要学的也就越多了！哎，祝咱们好运吧！