Ajax(异步的javascript和XML),若干年以前它的出现使得javascript重新得到程序员们的重视,它终结了用户“单击,等待”的交互过程,通过异步模式,让用户在单击(形如表单提交,添加购物车等需要与后台交互的动作)之后仍能进行其他操作而不是要等服务器响应完后才能进行后续操作。
Ajax的核心—XMLHttpRequest
可以说Ajax的精华部分就是它的XMLHttpRequest对象,为了方便起见简称XHR对象。
既然是对象,那么它就有原生的属性和方法
readyState:请求/响应过程的当前活动阶段
0:未初始化,尚未调用open()方法
1:启动,已经调用open(),但尚未调用send()
2:发送,已经调用send,但尚未接收到响应
3:接受,已经接受部分响应数据
4:完成,已经接受全部数据,而且已经可以在客户端使用status:响应的Http状态,例如200,404,304等
open方法:接收三个参数,分别是:请求方式,请求的url,同步还是异步(false or true)
send方法:接收一个参数,如果用get方式的话参数可以不写或者是null,如果用post方式的话参数是请求的数据。
responseText:服务器返回的数据
onreadystatechange事件:每当readystate的值发生改变都会触发一次该事件。
打开控制台可以看到Http头部信息
一个简单的Ajax实例:
document.getElementById('ajax').addEventListener('click',function()
{
var xml=new XMLHttpRequest();
xml.onreadystatechange=function()
{
if(xml.readyState==4 && xml.status==200)
{
console.log(xml.responseText);
}
};
xml.open("get","user.json");
xml.send();})
细说POST和GET的区别
GET请求
- GET方式直接将请求的数据添加在URL的末尾
xml.open('GET',"ajax.php?number="+document.getElementById('keybord').value);
xml.send();
2.GET请求发送数据量小
3.请求数据,用于查询信息,也就是取数据
4.GET请求发送后被缓存
POST请求
- POST方式模仿form的表单提交,所以要设置Content-Type头部信息为application/x-222-form-urlencoded
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.open('POST','ajax.php');
var data="name="+document.getElementById("stuffname").value+
"&number="+document.getElementById("stuffnumber").value+
"&sex="+document.getElementById("stuffsex").value+
"&job="+document.getElementById("stuffjob").value;
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.send(data);
- POST请求发送数据量大
- 用于向服务器发送被保存的数据,也就是存数据
- POST没有缓存
注意:如果post的是表单,则需要先对表单对象进行序列化,可以使用jQuery中的serialize()方法,也可以用原生的js封装。