您的位置:澳门新葡8455最新网站 > 服务器运维 > 原生Javascript封装的八个AJAX函数分享_javascript本领

原生Javascript封装的八个AJAX函数分享_javascript本领

发布时间:2019-12-31 04:27编辑:服务器运维浏览(94)

    今日的做事中涉及到大方的ajax操作,本来该后台做的事也要自身来做了.而今后应用的ajax函数是二个后台职员封装的—-但他又是基于jquery的ajax,所以离开了jquery那几个函数就毫无功效了.何况小编以为,jquery的ajax方法是很周详的了,能够一向用,若是都有jquery了,那么她的ajax就不用白不用了.笔者相当不足的是叁个能在尚未jquery的动静下使用的ajax方法.

    就此自个儿也花一天时间写了一个,参数与调用方法相像于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequest.

    复制代码 代码如下:/** Name: xhr,AJAX封装函数* Description: 叁个ajax调用封装类,仿jquery的ajax调用形式* Author:十年灯*/var xhr = function () { var ajax = function () { return ('XMLHttpRequest' in window) ? function () { return new XMLHttpRequest { return new ActiveXObject; } }(), formatData= function { var res = ''; for { res += f+'='+fd[f]+'&'; } return res.slice; }, AJAX = function { var root = this, req = ajax();

    root.url = ops.url; root.type = ops.type || 'responseText'; root.method = ops.method || 'GET'; root.async = ops.async || true; root.data = ops.data || {}; root.complete = ops.complete || function () {}; root.success = ops.success || function(){}; root.error = ops.error || function { alert(root.url+'->status:'+s+'error!')}; root.abort = req.abort; root.setData = function { for { root.data[d] = data[d]; } } root.send = function () { var datastring = formatData, sendstring,get = false, async = root.async, complete = root.complete, method = root.method, type=root.type; if { root.url+='?'+datastring; get = true; } req.open(method,root.url,async); if { req.setRequestHeader("Content-type","application/x-www-form-urlencoded"); sendstring = datastring; }

    //在send早前重新设置onreadystatechange方法,不然会师世新的一路诉求会进行四遍得逞回调(chrome等在同步央浼时也会执行onreadystatechange卡塔尔国req.onreadystatechange = async ? function (卡塔尔 { // console.log; if { complete(卡塔尔; if { root.success; } else { root.error; } } } : null; req.send; if { //console.log; complete(卡塔尔国; root.success; } } root.url && root.send(State of Qatar; }; return function {return new AJAX;

    1.url:央求地址.能够不填,央浼就不会倡导,但万一不填又强行send,出了错不怪我2.method: ‘GET'或'POST',全大写,暗中认可GET3.data: 要附带发送的数目,格式是多少个object4.async: 是还是不是异步,私下认可true5.type: 再次回到的数据类型,唯有responseText或responseXML,暗中认可responseText6.complete: 诉求实现时推行的函数7.success: 诉求成功时进行的函数8.error: 央浼战败时进行的函数

    注:此中的type参数,并不曾jquery的dataType那么丰盛,唯有原生AJAX有的responseText或responseXML.假使重返的是json数据,你供给在success函数中友好管理一下把text转成json.

    一个实例化的xhr对象有三个函数可采纳,二个是send,调用方法是:xhr.send(卡塔尔,无参数,其意义是发起呼吁进度.假诺开头化时不曾url,则不会举办send方法,那样您就足以在后头再参与url,并手动发起send—-若是send的时候未有url,那么恳求会倒闭而且作者从未管理那个错误,出了错唯有你和谐找了.

    另三个办法是setData,调用方法是xhr.setData,其参数是四个object. setData方法的职能是局地替换xhr的data属性里的值,举例xhr.data中原来就有叁个page:1,你能够用xhr.setData来更新她的值,而不影响data中已存在的别的属性值.

    调用方法:复制代码 代码如下:var a1 = xhr({ url:'2.php', data:{ 'username':'lix', 'password':'123456', 'gender':'male', 'interset':'play' }, async:false, method:'GET', success: function { var obj = JSON.parse;注:不用写new

    通过近些日子的体系经验,小编意识叁个ajax类应该享有一个很遍布的特色:便于重复发起诉求.譬喻项目中自身写分页ajax的时候,每便翻页都要发送央浼,但发送的多寡中除了当前页码和每页条数,别的的都是不会改动的.假若数次这么的伸手,都要重复定义那多少个不改变的参数,无疑是种能源浪费.

    故而这一个xhr函数,就曾经思量了这一个成效.依然拿分页的例证来讲,大家能够在页面加载成功的时候就开始化三个xhr对象,保存为变量a1,当发起翻页央求时,其余的哪些参数都没变,但pageNumber变了,那时就足以调用xhr的setData方法,把pageNumber改掉.

    复制代码 代码如下:a1.setData;

    注:setData的参数也是叁个object.

    当然,你也可以把data全盘替换:

    a1.data = {…};

    岂不过data,你能够对a1这么些早就实例化的xhr对象开展更加的多的变动,比如换掉url,换掉success函数,GET换来POST,同步换来异步…换完事后,再调用a1.send(State of Qatar方法,他就能够按您的安装双重发起倡议了.

    理之当然,假若是全然不相干的另三个ajax要求,就不须要硬要用那几个现存的a1了.大家得以再实例化二个xhr,叫a2哪些的.

    生机勃勃旦您对xhr那一个名字不称心,那就唯有团结力戒了.

    除此以外提供压缩加密版.未压缩版去掉注释大约2kb,压缩版1.00kb.复制代码 代码如下:var xhr=function{return"XMLHttpRequest"in window?function(卡塔尔(قطر‎{return new XMLHttpRequest}:function(卡塔尔国{return new ActiveXObject}}{var t="";for{t+=n+"="+e[n]+"&"}return t.slice{var r=this,i=e();r.url=n.url;r.type=n.type||"responseText";r.method=n.method||"GET";r.async=n.async||true;r.data=n.data||{};r.complete=n.complete||function(){};r.success=n.success||function(){};r.error=n.error||function{alert(r.url+"->status:"+e+"error!")};r.abort=i.abort;r.setData=function{r.data[t]=e[t]}};r.send=function,n,s=false,o=r.async,u=r.complete,a=r.method,f=r.type;if{r.url+="?"+e;s=true}i.open{i.setRequestHeader("Content-type","application/x-www-form-urlencoded");n=e}i.onreadystatechange=o?function{u{r.success}else{r.error}}}:null;i.send;r.success}};r.url&&r.send{return new n

    xhr料定有不圆满的地点,现在采用中假诺发掘了,小编会登时改善的.若是你用得不爽或开采相差,也请不吝提议改进意见.

    本文由澳门新葡8455最新网站发布于服务器运维,转载请注明出处:原生Javascript封装的八个AJAX函数分享_javascript本领

    关键词: