ajax具体实现学习记录

Posted 2022-06-15 eenio

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

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