说说Ajax

AJAX全称为Asynchronous JavaScript and XML(异步的JavaScript和XML），这一技术能够向服务器请求额外的数据而无需写在整个页面，会带来良好的用户体验。

XMLHttpRequest
Ajax的核心是JavaScript对象XMLHttpRequest,这个对象为向服务器发送请求和解析服务器相应提供了流畅的接口。XmlHttpRequest可以使用JavaScript向服务器提出请求并处理响应。（使用过程中要注意XMLHttpRequest的兼容性）。

<pre>
//IE6以上
var oAjax=new XMLHttpRequest();
//IE 6
var oAjax=new ActiveXObject("Microsoft.XMLHTTP")
</pre>

XHR对象有两个重要的方法open和send

方法	描述
open(method,url,async)	规定请求的类型、URL以及是否异步处理请求
send(string)	将请求发送到服务器 。string:仅用于POST请求

知道了这些，这两个方法到底怎么使用呢，下面我们举个例子说明下
<pre>
<fieldset>
<legend>简单的GET</legend>
<div id="myDiv1">< h2 >我的名字</ h2 ></div>
<button id="btn1">修改内容</button>
<script>
document.getElementById("btn1").addEventListener('click', function(){
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("myDiv1").innerHTML=xmlhttp.responseText;
console.log("333");
}
console.log("222");
}
xmlhttp.open("GET","ajax_simple.php",true);
xmlhttp.send();
console.log("111");
});
</script>
</fieldset>
</pre>
以上代码中，用到了XMLHttpRequest对象的三个重要属性：
onreadystatechange:存储函数（或函数名），每当readyState属性改变时，会调该函数。
readyState:XMLHttpRequest的状态。从0到4发生变化。
0：请求为初始化；
1：服务器连接已建立；
2：请求已接收；
3：请求处理中；
4.请求已完成，且响应就绪

status:
200:"ok"
404:未找到页面

说到这里我们不得不提一点，那就是ajax的同步和异步有什么区别呢？各自都有什么特点呢？
ajax同步请求：
<code>发送请求-->等待结果-->操作结果-->继续执行后面的代码</code>这是同步请求的大致过程，也就是说同步的链接在同一时刻只会有一个，并且会阻止后续JS代码的执行，JS必须等待同步链接加载完毕后才能继续执行。

ajax异步请求：
<code>发送请求-->继续执行后面的代码-->响应结-->操作结果果接受完毕</code>
异步加载，每次只刷新需要更换部分的内容。

异步加载的优点在于：
1.浏览器可以从服务器同时请求多项内容；
2.浏览器请求返回的速度回快得多；
3.只有页面真正改变的部分得到更新；
4.能够减少服务器流量。

那么GET和POST请求又有什么区别呢？
GET请求是最常见的请求类型，用于向服务器查询信息，必要时可以将查询字符串参数放在URL尾部发送给服务器，如果参数有特殊字符必须正确编码。
POST请求用于把数据作为主体向服务器提交，POST请求主体可以包含多种格式数据，在open方法第一个初始化参数传入“POST”就可以初始化一个POST请求。

版权归王丽峰和饥人谷所有，如有转载，请注明来源