对于AJAX这个玩意儿,一开始学习的时候,根本不知道这是什么,我连AJAX有什么作用,是干什么的都不知道,所以在一开始学习这个的时候是非常蒙B的状态。那么在学习一段时间的AJAX之后,我总结了一些我自己对AJAX的理解,一起共勉。
一、页面访问方式
在学习AJAX之前,我们首先就需要了解页面的访问方式。页面的访问方式有如下两种同步访问和异步访问:
①同步访问:在访问服务器时,只能等待服务器的响应,不能做其他事情。
②异步访问:在向服务器发送请求时,不耽误用户在网页其他操作。相当于在同一时间,用户能做多个事情。
光从字面上理解同步和异步不算太难,下面我为用图打个比方有助于更加深层次的理解同步和异步:
上图反之是同步访问的图解,异步访问我就不再作图了,反之,你想买煎饼和稀饭,你走到卖煎饼的铺子时候,老板说:好的,你的煎饼5分钟后好,你可以5分钟后过来拿。这个时候你就可以在这五分钟去买你要的稀饭,这就是异步访问。
二、什么是AJAX
AJAX的英文全名是:Asynchronous Javascript And Xml
异步的 JS 和 xml
其中的本质:使用JS中XMLHttpRequext(xhr)对象异步的向服务器发送请求,服务器响应回来的部分数据而不是原完整的页面,并可以以“无刷新”的效果来更改页面中的局部内容。为了方便理解,作以下用户名验证的例子图助于理解:
三、获取AJAX对象 ——XMLHttpRequest
在主流浏览器中:new XMLHttpRequest( );
注意:在IE8以下的浏览器不支持XMLHttpRequest
在IE8以下的浏览器中:
new ActiveXObject("Microsoft.XMLHttp");
tip:如果想测试你使用的浏览器是否支持XMLHttpRequest,可以进行如下操作:
1.打开你的浏览器,例如谷歌、360、火狐、欧朋....;
2.按F12,使用开发者工具,在console一栏中输入:console.log(window.XMLHttpRequest);
3.如果浏览器不支持XMLHttpRequest,以上会打印null。
//创建ajax对象
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject("Microsoft.XMLHttp");
}
tip:这段函在编写代码的时候使用的次数很多,通常我们将它封装成函数单独创建一个JS文件,命名为common.js,要使用的时候调用者个js文件就可以了。
未完待续....
暂时写到这里,后面将会写到如何发送异步请求,以及异步对象的属性和方法。