实现异步局部刷新Ajax详解【2019】

Ajax是什么?

ajax意为 “Asynchronous Javascript And XML”（异步JavaScript和XML），并不是新的技术，只是把原有的技术，整合到一起而已
1.使用CSS和XHTML来表示。
2. 使用DOM模型来交互和动态显示。
3.使用XMLHttpRequest来和服务器进行异步通信。
4.使用javascript来绑定和调用。

Ajax有什么用？

主要作用：网页如果想要刷新局部内容。 那么需要重新载入整个网页。用户体验不是很好。 就是为了解决局部刷新的问题。 保持其他部分不动，只刷新某些地方，实现局部刷新。

数据请求 Get

1.创建对象

function  ajaxFunction(){
			   var xmlHttp;
			   try{ // Firefox, Opera 8.0+, Safari
			        xmlHttp=new XMLHttpRequest();
			    }
			    catch (e){
				   try{// Internet Explorer
				         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
				      }
				    catch (e){
				      try{
				         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
				      }
				      catch (e){}
				      }
			    }
		
				return xmlHttp;
			 }

2. 发送请求

//执行get请求
	function get() {
		
		//1. 创建xmlhttprequest 对象
		var request = ajaxFunction();
		
		//2. 发送请求。
		// http://localhost:8080/day16/demo01.jsp
		//http://localhost:8080/day16/DemoServlet01
		
		/*	
			参数一： 请求类型  GET or  POST
			参数二： 请求的路径
			参数三： 是否异步， true  or false
		*/
		request.open("GET" ,"/day16/DemoServlet01" ,true );
		request.send();
	}

如果发送请求的同时，还想获取数据，那么代码如下

//执行get请求
	function get() {
		
		//1. 创建xmlhttprequest 对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open("GET" ,"/day16/DemoServlet01?name=aa&age=18" ,true );
		
		//3. 获取响应数据 注册监听的意思。  一会准备的状态发生了改变，那么就执行 = 号右边的方法
		request.onreadystatechange = function(){
			
			//前半段表示 已经能够正常处理。  再判断状态码是否是200
			if(request.readyState == 4 && request.status == 200){
				//弹出响应的信息
				alert(request.responseText);
			}
		}
		request.send();
	}

数据请求 Post

<script type="text/javascript">

	//1. 创建对象
	function  ajaxFunction(){
	   var xmlHttp;
	   try{ // Firefox, Opera 8.0+, Safari
	        xmlHttp=new XMLHttpRequest();
	    }
	    catch (e){
		   try{// Internet Explorer
		         xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		      }
		    catch (e){
		      try{
		         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		      }
		      catch (e){}
		      }
	    }
	
		return xmlHttp;
	 }
	
	function post() {
		//1. 创建对象
		var request = ajaxFunction();
		
		//2. 发送请求
		request.open( "POST", "/day16/DemoServlet01", true );
	
		//如果不带数据，写这行就可以了
		//request.send();
		
		//如果想带数据，就写下面的两行
		
		//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
		request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		
		//带数据过去  ， 在send方法里面写表单数据。 
		request.send("name=aobama&age=19");
	}


</script>


	需要获取数据


		function post() {
			//1. 创建对象
			var request = ajaxFunction();
			
			//2. 发送请求
			request.open( "POST", "/day16/DemoServlet01", true );
			
			//想获取服务器传送过来的数据， 加一个状态的监听。 
			request.onreadystatechange=function(){
				if(request.readyState==4 && request.status == 200){
					
					alert("post："+request.responseText);
				}
			}
			
			//如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
			request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
			
			//带数据过去  ， 在send方法里面写表单数据。 
			request.send("name=aobama&age=19");
		}

不得不说的jQuery中的ajax

其实在实际开发过程中最常用的是jQuery中的ajax，因为jq中的ajax写起来方便省事，毕竟write less do more （写得更少，做的更多） 哈哈，

###load

	<a href="" onclick="load()">使用JQuery执行load方法</a>

	有两次刷新，  先走 onClick的方法，取到数据回来之后，赋值显示。 接着 走 href=""的路径，但是这个属性没有给值，所以会把当前的页面重新再刷新一次。所以导致看不见值。


	//找到这个元素， 去执行加载的动作， 加载/day16/DemoServlet02 ， 得到的数据，赋值显示
	$("#aaa").load("/day16/DemoServlet02" , function(responseText , statusTXT  , xhr) {
			//找到id为text01的元素， 设置它的value属性值为 responseText 对应的值
			$("#aaa").val(responseText);
		}); 


###Get


	$.get("/day16/DemoServlet02"  , function(data ,status) {
			$("#div01").text(data);
		});

并且拥有着独特的格式：

* load

  	$("#元素id").load(url地址);

  	$("#div1").load(serlvet); ---> 使用的get请求，回来赋值的时候， 使用text（）;去赋值
* get

  	语法格式 ： $.get(URL,callback);	


		使用案例： $.get("/day16/DemoServlet02"  , function(data ,status) {
			$("#div01").text(data);
		});
* post

  	语法格式：$.post(URL,data,callback);


		function post() {
			$.post("/day16/DemoServlet02", {name:"zhangsan",age:18},function(data,status) {
				//想要放数据到div里面去。 --- 找到div
				$("#div01").html(data);
			});
		}

下一篇用jQuery的ajax实现一些典型案例

https://blog.csdn.net/qq_44543508/article/details/91128225