Ajax异步请求

一、javaScript 发送异步请求

/*
 * XMLHttpRequest对象的使用
 * 利用XMLHttpRequest接收纯文本的内容
*/
var xmlhttp; //XMLHttpRequest
/*
  * 用户名校验方法3
  * 使用XMLHttpRequest对象来进行Ajax的异步交互
  */
function verify3() {
 	//使用dom的方式获取文本框的值
	var username = document.getElementById("name").value;
 	
 	//1、创建XMLHttpRequest对象
 	//这是XMLHttpRequest对象使用五步中最复制的一步
	if (window.XMLHttpRequest) {
 		//针对FireFox、Molillar、Opera、Safari、IE7、IE8
		xmlhttp = new XMLHttpRequest();
 		//针对莫些特定浏览的bug进行修正
		if (xmlhttp.overrideMimeType) {
			xmlhttp.overrideMimeType("text/xml");
		}
	} else {
		if (window.ActiveObject) {
			//针对IE6、IE5、
			//两个可以用于创建XMLHttpRequest对象的空间名称，保存在一个js的数组中
			//排在前面的是新版本
			//通过尝试的方式创建XMLHttpRequest对象
			var activexname = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
			for(var i = 0; i < activexname.length;i++){
				try{
					//取出一个控件名进行创建，如果创建成功就终止循环
					//如果创建失败，会抛出异常，然后可以继续循环，继续创建
					xmlhttp = new ActiveObject(activexname[i]);
					break;
				}catch(e){
					
				}
			}		
		}
	}
	
	//判断xmlhttprequest是否创建成功
	if(!xmlhttp){
		alert("XMLHttpRequest对象创建失败！");
		return;
	}else{
		alert(xmlhttp.readyState);
	}
	
	//2、 注册回调函数 - callback_02
	//注册回调函数时，只需要函数名，不需要加括号
	//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
	//onreadystatechange 请求状态改变的触发器,状态一改变就会调用回调函数
	xmlhttp.onreadystatechange = callback_02;
	
	//3、设置连接信息
	//第一个参数表示http的请求方式，支持的http请求方式主要是get、post
	//第二个参数表示的是请求的url地址，get方式请求参数也在url中
	//第三个参数表示采用异步还是同步方式交互，ture表示异步
	
	//get方式发送请求
	//xmlhttp.open("GET","AjaxServerlet?name=" + username,true);
	
	//post方式请求
	xmlhttp.open("POST","AjaxServerlet",true);
	//post方式需要自己设置请求头
	xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");

	//4、发送数据，开始和服务器端进行交互
	//同步方式下，send这句换会在服务器端数据回来后才执行
	//异步方式下，send这句话会立即完成执行
	//post方式发送数据
	xmlhttp.send("name=" + username);
}

//创建回调函数callback_02
function callback_02(){
	alert(xmlhttp.readyState);
	//5、接收响应数据
	//判断对象的状态是交付完成：'4'表示交互完成 readyState（请求状态）有5个状态0、1、2、3、4
	//分别表示未初始话、open方法调用成功以后、服务器已答应客服端的请求、交互中（http头已经接收，相应数据尚未接收）、完成（数据接收完成）
	if(xmlhttp.readyState==4){
		//status服务器返回状态吗
		//判断http的交互是否成功:'200'表示成功交互
		if(xmlhttp.status==200){
			//获取服务器返回的数据
			//获取服务器端输出的纯文本的数据
			//responseText接收服务器返回的文本内容
			//responseXML接收服务器返回的兼容DOM的XML内容
			var responseText = xmlhttp.responseText;
			//将数据显示在页面上
			document.getElementById("result").innerHTML = responseText;
		}
	}
}

 

二、jquery方式发送异步请求

 

//ajax用户名校验
//定义用户名校验的方法1
function verify1() {
	//1、获取文本框中的内容
	var username = $("#name").val();
	//2、将文本框中的内容发送给服务器端的servlet
	//使用jquery的XMLHTTPrequset对象get请求的封装
	//callback回调函数，只是函数名不要写括号,故参数也不用写
	//get请求，解决中文乱麻问题的方法1，页面端发出的数据作一次encodeURI，服务器段使用new String(oldUserName.getBytes("iso8859-1"),"UTF-8");
    //get请求，解决中文乱麻问题的方法2，页面端发出的数据作两次encodeURI，服务器段使用URLDecoder.decode(oldUserName,"UTF-8")
	var url = "AjaxServerlet?name=" + encodeURI(encodeURI(username));
	//var url = "AjaxServerlet?name=" + username;
	$.get(url,null,callback);
}
/*
 * 回调函数
 * data即服务器返回的数据
 */
function callback(data) {
	//3、接收服务器端返回的数据
	var callData = data;
	//4、将服务器端返回的数据动态的显示在页面上
	$("#result").html(callData);
}

/*
 * 用户名方法校验2
 * 将上面的jquery运用精简为
 * function(callData){}为匿名函数
 */
function verify2() {
	$.get("AjaxServerlet?name=" + $("#name").val(), null, function (callData) {
		$("#result").html(callData);
	});
}


/*
 * jquery 方法读取服务器端的XML文件
 * 用jquery的ajax方法请求数据
*/
function verifyXML(){
	//1、读取文本框中的内容，并进行编码
	var username = $("#name").val();
	//var username = $("#name").val();
	//javaScript中一个简单的对象定义方法
	//解决中文乱码问题，agax请求一次encodeURI(username)服务器端URLDecoder.decode(oldUserName,"UTF-8")解码
	var data = {name:encodeURI(username),age:20};
	$.ajax({
		type:"post",			//http请求方式
		url:"AjaxXMLServlet",	//服务器端url地址
		data:data,				//发送给服务器端的数据
		dataType:"xml",			//告诉jquery返回的数据格式
		success:callbackXml		//定义交互完成，并且服务器正确返回数据时调用的回调函数
	})
	
}

function callbackXml(data) {
	//需要将data这个dom对象中的数据解析出来
	//首先需要将dom的对象转换为jquery对象
	//data为服务器端返回的数据
	var jqueryobj = $(data);
	//获取message节点
	var message = jqueryobj.children();
	//获取文本内容
	var text = message.text();
	//将内容输出到页面	
	$("#result").html(text);
}