AJAX的基本知识

一、AJAX是什么？
AJAX = Asynchronous JavaScript and XML（异步的JavaScript和 XML）。
AJAX不是新的编程语言，它是一种使用现有标准的新方法，是一种用于创建快速动态网页的技术；通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，也就意味着AJAX是一种在无需重新加载网页的情况下，能够更新部分网页的技术。
（每当用户向服务器端发出请求时，尽管只需要简单的更新一点点局部内容，但是服务端都会将一整个页面进行刷新，并重新生成代码，这样一来程序的性能肯定会有所降低，而如果用了AJAX技术之后，就可以实现局部的变更，而不用进行整体的页面刷新，显然处理的性能要好的多）。
简而言之，AJAX主要用于页面的局部刷新，某一局部的修改，某一局部进行服务器的请求和响应。

二、作用是什么？
AJAX是用来与后台交互的，因此它的作用是为了提高用户体验，来减少网络数据的传输量。

三、Ajax的实现流程是怎样的？
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及传输的信息
(3)设置响应HTTP请求状态变化的函数
(4)发送HTTP请求
(5)获取异步调用返回的数据
(6)使用JavaScript和DOM实现局部刷新

AJAX的操作核心是XMLHttpRequest，核心对象是xmlHttp
XMLHttpRequest对象：
在AJAX中主要是通过XMLHttpRequest对象处理方式异步请求和处理回应的，此对象最早是在IE5中以ActiveX组件的形式出现的，直到2005年才被广泛使用。要想创建一个XMLHttpRequest对象必须使用JavaScript，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新
在创建此对象时一定要考虑浏览器的问题，检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject

//创建XMLHttpRequest对象 需要考虑浏览器兼容的问题
var xmlHttp;
function createXMLHttp(){
     if(window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
     	xmlHttp=new XMLHttpRequest();
     }else{// IE6, IE5
     	xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");	
     }
}

AJAX向服务器发送请求，使用XMLHttpRequest对象的open()和send()方法
open()方法包括三个参数，open(method,url, async)
1、第一个参数method是请求的类型（方式），可以用get,也可以用post，一般用post方式来提交，相对安全稳定。
2、第二个参数url是文件在服务器上的位置（该文件可以是任何类型的文件，比如.xml和.txt，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务））
3、第三个参数async代表是异步（true）还是同步（false）提交
XMLHttpRequest对象如果要用于AJAX的话，open()方法的async参数必须设置为true

xmlhttp.open("GET","test.html",true);

其实很多程序在执行任务的时候都会很耗时，而通过AJAX，JavaScript不需要等待服务器的响应，则是在等待服务器响应是执行其他脚本，当响应就绪后对响应进行处理。
发送请求到服务器，服务器返回内容，那么是通过什么来处理这个内容呢，往往是通过用回调函数onreadystatechange完成
当使用 async=true 时，必须规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：
$.ajax执行异步AJAX 请求
async规定 XML 文件的下载是否应当被异步处理
onreadystatechange 事件：存储函数（或函数名），每当readyState改变时，就会触发onreadystatechange事件
readyState：有五种状态
0，请求没有发出（在调用open()函数之前）
1，请求已经建立但还没有发出（调用send()函数之前）
2，请求已经发出正在处理之中（这里通常可以从响应得到内容头部）
3，请求已经处理，正在接受服务器的信息，响应中通常有部分数据可用，但是服务器还没有完全响应
4，响应已经完成，可以访问服务器响应并使用它（主要是用这个）
Status：状态 200：“ok”,404:未找到页面
在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪

xmlHttp.onreadystatechange=function(){//回调操作函数
    if(xmlHttp.readyState==4){//如果调用完成
   		if(xmlHttp.status==200){//Http状态码操作正常
   	  		document.getElementById("msg").innerHTML=xmlHttp.responseText;
   		}
    }
 }

当async=false（同步）,同步模式发出的请求会暂停所有javascript代码的执行，直到服务器获得响应为止，如果浏览器在连接网络时或者在下载文件时出了故障，页面就会一直挂起。

xmlhttp.open("GET","test.html",false);
xmlhttp.send();
document.getElementById("myTest").innerHTML=xmlhttp.responseText;

不推荐使用async=false，但对于一些小型的请求，也是可以的。
不要编写onreadystatechange函数，把代码放到send()语句后面即可。
XMLHttpRequest 支持同步和异步通信。但是，一般来说，出于性能原因，异步请求应优先于同步请求。同步请求阻止代码的执行，这会导致屏幕上出现“冻结”和无响应的用户体验。
如果你使用XMLHttpRequest发送异步请求,那么当请求的响应数据完全收到之时，会执行一个指定的回调函数，而在执行异步请求的同时,浏览器会正常地执行其他事务的处理
send()向服务器发送请求
send(string) post请求时才使用字符串参数，否则不用带参数（get请求时）
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
• 在等待服务器响应时执行其他脚本
• 当响应就绪后对响应进行处理
服务器响应:
需要获得来自服务器的响应，就会用到XMLHttpRequest对象的responseText或responseXML
responseText获得字符串形式的响应数据（如果来自服务器的响应不是xml，就用responseText属性）
responseXML获得xml形式的响应数据

四、AJAX的优缺点
优点：
1、页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和宽带的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序
缺点：
1、ajax不支持浏览器back按钮，即对浏览器后退机制的破坏。
2、存在安全隐患问题，AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试
原生的JS写法：

 var xmlHttp;
 function createXMLHttp(){
 	if(window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari
 		xmlHttp=new XMLHttpRequest();
 	}else{// IE6, IE5
 		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");	
 	}
 }
 function showMsg(){
 	createXMLHttp();//创建XMLHttp对象
 	//请求
 	xmlHttp.open("POST", "ceshi.html",true);
 	//设置操作的回调函数
 	xmlHttp.onreadystatechange=callBack;
 	xmlHttp.send(null);//发送
 }
 function callBack(){//回调操作函数
	//如果调用完成及Http状态码操作正常
 	if(xmlHttp.readyState==4 && xmlHttp.status==200){ 
 		  document.getElementById("msg").innerHTML=xmlHttp.responseText;
 		}
 	}
 }

JQuery写法：

$.ajax({
	type: "POST",
	url: "${ctx}/servlet/LoginServlet?type=login",
    data:{UserNuber:UserNuber,Password:password,Codekey:Codekey},//发送到服务器的参数
	dataType: "json",//服务器响应的数据类型
	success: function (data) {//成功后回调
	if(data.state){
		layer.alert("登录成功！",{ icon: 0, title: '提示'});
	}
	else{
		layer.alert(data.msg, { icon: 0, title: '提示'});
	}
},
});