记录自己对ajax\的理解,
首先要明白ajax是为了解决什么问题,简单来讲就是为了局部刷新页面,而不刷新整个界面。就比如现在有一个实时热度的显示,它是不断变化的,所以你肯定要不停的从数据库当中获取热度,进行显示,但是又只是更新热度,没有必要更新整个界面。这时候就用到了ajax,不断的向服务器发送请求,获取热度,之后使用js更新指定元素。那js是怎样更新的呢?
昂,其实直接用jquery就可以了,不过还是学习ajax肯定要对它具体是怎么实现的学习一下呀~
ajax用了 XMLHttpRequest,js,css,dom,xml等技术来实现,说下其中两个:
XMLHttpRequest:js里面的一个对象,能够进行连接服务器,发送请求等操作,可以理解为一个载体,我们所有的操作最终都是由他执行的。
xml:一种语言,其实跟html撒的差不多,只不过它是用来描述结构化数据的的格式,相当于就是存储交换的数据的一种格式,可扩展性更强一些,有它独特的数据结构格式。
下面来看看他的具体步骤吧:分为以下:
1.构建XMLHttpRequest对象
2.设置回调函数
3.和服务器创建连接
4.发送请求
1.构建XMLHttpRequest对象
这一步需要注意的就是ie浏览器和其他浏览器的创建方式的不同,普通浏览器直接创建该对象,而ie浏览器创建ActiveObject对象,并设置响应的参数,代码如下, 很容易理解
if(window.XMLHttpRequest){ //非Ie浏览器
this.req = new XMLHttpRequest();
}else if(window.ActiveXObject){
this.req = new ActiveXObject("Microsoft.XMlHTTP");
}
,创建结束之后,我们就需要调用该对象的方法来完成异步请求了,我们会用到它的open和send方法,
open(“method”,”url”,【asyncFlag】,【username】,【password】);
method:请求的方式,get或者post
后面三个为可选参数,asynvFlag 表示是否异步请求,一般是true
send(params);
将当前连接中的请求发送给服务器,异步的直接返回,同步的话等待响应结束再返回,params是参数,post请求时候用的,另外注意,发送post请求时,要使用 setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);设置请求头参数
还有他的4个属性:
readyState: 请求的状态,从0-4 依次表示:未初始化,加载中,加载完毕,交互中,完成
status: 服务器返回的Http状态码,
responseText,responseXML:服务器返回的内容,xml格式或者字符串格式的,json也可以返回
2.指定回调函数:
回调函数,顾名思义,就是服务器处理完请求之后执行的函数,相当于具体的业务逻辑函数。
XMLHttpRequest.onreadystatechange = 函数名;
这里注意一点:如果是该函数有参数,这样写:
….. = function(){ 函数名(params)};
3.建立与服务器的连接
使用open()函数就行,url就是你请求的服务器地址
4.发送请求,
直接send(null),post请求的话使用send(params),params的格式就是 变量名=具体值&变量名=具体值,这样的,用&分隔
所以呢,整体来讲还是比较容易理解的,下面是一个完整的示例:
var net = new Object();
//构造函数
net.AjaxRequest = function (url, onload, onerror, method, params) {
this.req = null;
this.onload = onload;
this.method = method;
this.onerror = (onerror)? onerror :this.defaultError;
this.loadDate(url ,method, params); //有了这一步所以才能创建实例就进行ajax交互
}
//初始化对象并指定处理函数的方法,prototype添加新的属性
net.AjaxRequest.prototype.loadDate=function (url,method,params) {
if(!method){
method="GET";
}
if(window.XMLHttpRequest){ //非Ie浏览器
this.req = new XMLHttpRequest();
}else if(window.ActiveXObject){
this.req = new ActiveXObject("Microsoft.XMlHTTP");
}
if(this.req){
try{
var loader = this;
this.req.onreadystatechange = function () {//指定回调函数
net.AjaxRequest.onReadyState.call(loader); //call就是说让onReadyState这个函数来执行this对象的函数
}
this.req.open(method, url ,true); //创建连接
if(method == "POST"){ //post\请求设置请求头
this.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
this.req.send(params); //发送信息
}catch (e) {
this.onerror.call(this);
}
}
}
//重构回调函数
net.AjaxRequest.onReadyState = function(){
var req = this.req;
var readyState = req.readyState;
if(readyState == 4){
if(req.status == 200){
this.onload.call(this);
}else{
this.error.call(this);
}
}
}
//重构默认错误处理函数
net.AjaxRequest.prototype.defaultError = function(){
alert("错误数据,回调状态:"+this.req.readyState+",状态:"+this.status);
}
然后我们使用的时候,构建一个 net.AjaxRequest = function (url, onload, onerror, method, params) ,以这个为借口,并且将url,onload等几个参数重构一下就好,能够创建对象就实现ajax交互的原因,是我们在构造函数里面使用了
this.loadDate(url ,method, params); ,这个函数其实就是将我们ajax的所有具体操作整合在了一起,
对回调函数解释一下流程:
首先明白 a.call(b) 函数是让a函数来执行b函数,相当于就是让a函数接收b函数的参数,然后执行b的工作,两个字:重构
net.AjaxRequest.onReadyState.call(loader); 这句话 指定了回调函数为onReadyState,
之后这句代码 this.onload.call(this); 就是让传入的onload函数来重构当前this所指的函数,这里this指的就是回调函数
这块重构过来重构过去就是为了代码更加明了一些吧应该,不过我感觉更加不清晰了,
具体使用时候,
va loader = new net.AjaxRequest(url,回调函数,错误处理函数,请求方法,其他参数..):
之后每隔指定时间,或者根据具体规则来执行该语句就可以啦,