Ajax 异步

•AJAX是 ：Asynchronous javascript and XML

•异步传输是AJAX技术的最大特色之一

•借助javascript内部的XMLHttpRequest对象可以进行异步数据传输，使用户在等待服务器返回数据的同时，可以进行页面的其他操作。

 

Ajax工作原理：

一、创建XMLHttpRequest的异步方式：

1、创建XMLHttpRequest对象

补充：

•IE高版本创建XMLHTTP  XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");

•IE低版本创建XMLHTTP  XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");

•兼容非IE浏览器，直接创建XMLHTTP对象  XMLHttpReq = new XMLHttpRequest();

<script type="text/javascript">
    // 由于浏览器不同采用try catch方式创建
    var xhr = null;
	try{
		xhr = new XMLHttpRequest();
	}catch(e){
		try{
		 	xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}
</script>

2、Ajax流程：从web中获取数据->建立要连接的URL->打开到服务器的链接->设置服务器在运行完成后要运行的函数->发送请求

补充：

<script type="text/javascript">
    //创建对象
	var xhr = null;
	try{
		xhr = new XMLHttpRequest();
	}catch(e){
		try{
		 	xhr = new ActiveXObject("Msxml2.XMLHTTP");
		}catch(e){
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		}
	}


	//get方式提交数据
	function checkUser(usernameInput){
		var reqUrl = "${pageContext.request.contextPath}/checkUserName?username="+usernameInput.value;
        //open()创建请求
		xhr.open("get",reqUrl,true);
        
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				var respText = xhr.responseText;  //responseText 属性是由服务器返回的字符串数据
				usernameInput.nextSibling.innerHTML=respText;
			}
		}
        //send()发送请求
		xhr.send();
	}

    // post方式提交
	function checkUserByPost(userNameInput){
		var reqUrl = "${pageContext.request.contextPath}/checkUserName";
		var param = "username=" + userNameInput.value;
		
		//true 异步，  false 表示同步
		xhr.open("post",reqUrl,true);
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
		xhr.onreadystatechange=function(){
			if(xhr.readyState == 4 && xhr.status == 200){
				//JSON.parse() 将JSON格式的字符串转化为 js对象。
				var resMsg = JSON.parse(xhr.responseText);
				userNameInput.nextSibling.innerHTML=resMsg.msg;
			}
		}
		xhr.send(param);
	}

</script>

二、jQuery的异步操作

$.ajax({
			type:"post",
			data:{username:"小强", passwd:"123456"},
			url:"jqueryAjaxGetData.do",
			dataType:"JSON",
			success:function(data){
				
		});

 type：request请求的方式  “get”或“post”等

data：向服务器传输的数据

url ：服务器的URL连接地址

dataType：服务器回应请求的数据类型

success：异步成功后要执行function(data){

}

<script type="text/javascript">
	$(function(){
		$("input[name = 'username']").change(function(){
			$.ajax({
				type:"post",
				data:{username:$("input[name = 'username']").val()},
				url:"jqueryAjaxGetData.do",
				dataType:"JSON",
				success:function(data){
					$("input[name = 'username']")[0].nextSibling.innerHTML=data.msg;
				}
			});
			
		});
	})
</script>