Ajax - 笔记 - 代码天地

Ajax是什么？

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成：

使用CSS和XHTML来表示。
使用DOM模型来交互和动态显示。
使用XMLHttpRequest来和服务器进行异步通信。
使用javascript来绑定和调用。

在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

Ajax的作用

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
对于传统网页，更新局部信息就需要整个重载页面。而Ajax则避免了这种情况。
常见的应用场景：注册界面中判定用户输入的用户名是否已被注册过

Ajax使用方法

提交数据

一. Get方式

创建XmlHttpRequest 对象

 			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;
 		}

发送请求，并且接收响应的数据

 //一个名为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方式
相对于Get方式，发起请求的时候，数据传输方式不同。Get可以直接在URL后面拼接。但是Post需要通过send方式，而且还多了一个响应头的设定。

创建XmlHttpRequest 对象（同Get创建对象代码）

发送请求

  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");

}

获取响应数据

在通过Get或者Post方式发送了请求之后，就需要考虑接收请求响应回来的数据，那如何通过Ajax接收？

这里通过xmlhttprequest的事件 onreadystatechange方法来监听我们发送的请求的状态，如果成功了，就执行什么样的逻辑（如接收返还的数据）。如果失败了，就执行什么样的模块。

 //获取 xmlhttprequest 对象 代码跟以前一样，此处不再赘述。
 var request = ajaxFunction();

 // 参数一： 执行 get 请求 ， 参数二 ： 请求的地址 ， 参数三：　是否是异步请求。
 request.open("GET", "Demo01", true);

 
 //对请求的状态 进行监听。
 request.onreadystatechange = function(){
 	if(request.readyState == 4 && request.status == 200 ){
 		//设置节点id为 myDiv的标签 结果为 我们请求得到的响应文字
 		document.getElementById("myDiv").innerHTML=request.responseText;
 	}
 }

 //发送请求。
 request.send();

以用户名注册判定为例，说明Ajax的工作流程

Ajax只是在不需要用户点击的情况下，通过光标的位置变化来触发判定条件，同样需要进行常规操作： servlet → service → dao 。并非不需要操作数据库，它只是省去了用户手动点击来触发查询的这一层，同时，也达到了局部更新的效果。这样做的好处有两个：自动检测、局部刷新

传统方式

输入用户名，
点击一个按钮，校验。
把数据提交给服务器
服务器在后台帮助我们完成校验，并且反馈信息。
浏览器接收反馈信息，并呈现给用户

Ajax方式

通过JS 获取文本框内输入的值
通过XmlHttpRequest 去执行请求。
请求结束后，接收请求返回的数据
根据返回的数据，配合 JS 和 CSS 完成提示

Ajax - 笔记