zoukankan      html  css  js  c++  java
  • 自己写的封装好的简单的AJAXjavascript (改良版)

     
    //Ajax Function
     
    var reqObj; //Creat Null Instence
     
    //var whichRequest;
     
    //Run Ajax (string urladdress,bool IsAsy,string method,string parameters,string whichRequest)
    function DoRequest(url,isAsy,method,parStr,callBackFun) 
    {
     
        reqObj = false;
       
        //whichRequest = whichReq;
     
        if (window.XMLHttpRequest) //compatible Mozilla, Safari,...
        {
           
            reqObj = new XMLHttpRequest();              //Creat XMLHttpRequest Instance
           
            if (reqObj.overrideMimeType)                //if Mime Type is false ,then set MimeType 'text/xml'
            {
                reqObj.overrideMimeType('text/xml');
            }
       
        }
       
        else if (window.ActiveXObject) //compatible IE
        {
       
            try
            {
                reqObj = new ActiveXObject("Msxml2.XMLHTTP"); //Creat XMLHttpRequest Instance
            }
            catch (e)
            {
                try
                {
                    reqObj = new ActiveXObject("Microsoft.XMLHTTP"); //Creat XMLHttpRequest Instance
                }
                catch (e)
                {}
            }
       
        }
     
        //if reqObj is false,then alert warnning
        if (!reqObj)
        {
           
            alert('Giving up :( Cannot create an XMLHTTP instance');
            return false;
       
        }
       
       
        reqObj.onreadystatechange = function(){GetRequest(callBackFun)}; //set onreadystatechange Function
       
        reqObj.open(method, url, isAsy);        //set open Function
       
        reqObj.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //set RequestHeader
       
        reqObj.send(parStr);   //do send and send parameters
     
    }
     
     
    //get Service Response information Function
    function GetRequest(callBackFun)
    {
     
        //judge readystate information
        if (reqObj.readyState == 4)
        {
            //judge status information
            if (reqObj.status == 200)
            {
           
                eval(callBackFun+"(reqObj)");
                   
            }
            else
            {
                alert('There was a problem with the request.'+reqObj.status); //else alert warnning
            }
      
        }
     
    }
       
    改良的部分:DoRequest 增加 callBackFun参数,通过设置此参数,可以动态的设置onreadystatechange 时需要调用的方法,另外,在onreadystatechange 属性设置上采用function(){GetRequest(callBackFun)},这样就将DoRequest的callBackFun作为参数传递给GetRequest,在GetRequest中执行判断reqObj.readyState 状态后,在调用callBackFun所指定的函数,这里,由于作为参数的callBackFun是表达式的字符串形式的,所以使用eval函数将其构建并转换成表达式。(eval在javascript里的作用是将一个字符串形式表现的表达式转换为真正的表达式,所以eval("functionName()")就等于是functionName()  ,如果是var i=eval("1+2")那么就等同于 i=1+2 结果是i=3。)
    实际工作过程是
    将创建XMLHttp对象,设置相关属性及onreadystatechange ,执行Open请求,得到正确的响应后执行onreadystatechange 所设置的 function(){} ,function(){}没有其他操作,只是调用GetRequest,通常情况下,我们是写一个函数的命在onreadystatechange 属性里,例如 onreadystatechange =FunctionName,可是,这样是不能再这个函数上设置参数的,但是这里使用function(){}也就是直接执行{}里的操作,因此,我们可以借以这个方式,将DoReqeust里的局部变量(包括参数)传递给另一个onreadystatechange 完成后执行的函数。之后,在GetRequest里检查XMLHttp获得的响应状态,如果是成功的,那么再调用一个callBackFun所指定的用户函数,实际上看起来不用着这么复杂及时是onreadystatechange 所调用的函数需要参数,我们也可以直接在GetReuqest里进行响应后的操作,但是,这里,我们是想把这一系列封装起来,以后再用的时候不必重写,另外,不同XMLHttp请求,也许我们需要做不同的操作,所以,在这里,将callBackFun作为参数,指明这次请求完成后,我们调用哪个处理函数。
    使用示例
    <div onclick="DoRequest('http://www.xxx.com',true,'get','','ResponseOK')">do something with ajax</div>
    <div onclick="DoRequest('http://www.xxx.com',true,'get','','ResponseOK2')">do another with ajax</div>
    <script>
    function ResponseOK(reqObj)
    {
    //something
    }
    function RequestOK2(reqObj)
    {
    //something
    }
    </script>
    这样就很方便的使用了AJAX并可以指定不同的回调函数,需要注意到是,callBackFun参数只需要填写函数名,但在编写callBackFun的时候,需要加以个reqObj参数,这是响应返回的XMLHttp对象。
    当然,还可以进行改良,例如在callBackFun所制定的函数中再加入参数,那都是可以到,不过在我目前的项目中还用不上!
  • 相关阅读:
    机器学习---14
    机器学习---13
    机器学习--10
    机器学习--9
    机器学习--8
    机器学习--7
    机械学习--6
    大数据应用技术课程实践--选题与实践方案
    15.手写数字识别-小数据集
    14.深度学习-卷积
  • 原文地址:https://www.cnblogs.com/ZetaChow/p/2237367.html
Copyright © 2011-2022 走看看