码迷,mamicode.com
首页 > Web开发 > 详细

ajax具体实现学习记录

时间:2019-08-06 15:36:03      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:UNC   date   自己   cte   alt   响应   width   状态码   http状态码   

记录自己对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,回调函数,错误处理函数,请求方法,其他参数..):

之后每隔指定时间,或者根据具体规则来执行该语句就可以啦,

 

ajax具体实现学习记录

标签:UNC   date   自己   cte   alt   响应   width   状态码   http状态码   

原文地址:https://www.cnblogs.com/eenio/p/11309160.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!