前端之ajax解析

2017-10-11 08:00:30来源:CSDN作者:a77321a人点击

分享

最近一直有老哥问我,能不能说一下跨域,讲一下前后端通信,其实我就想说一句,这么大的题你让我怎么说,一时半会也说不完,索性就把各种方法拆开来解析,讲一下它们是如何实现通信,自己封装了几个方法,不定时更新~
今天说一下ajax,ajax到现在应该说除了不能跨域,别的通信功能该有的都有了,但是有的老哥只会用API,怎么实现的都不会,这就有点说不过去了。好了下面贴一个封装好的代码

var opt = {    //这里就是ajax需要用到的参数         url: '',         type: 'get',         data: {},         success: function () {},         error: function () {},     };util.extend(opt, options);     if (opt.url) {     //因为ajax是基于XMLHttpRequest对象,在IE低版本中是基于     //ActiveXObject,首先要做兼容性判断,如果浏览器存在     //XMLHttpRequest对象,则new一个XMLHttpRequest对象,如果不存     //在则创建一个ActiveXObject对象         var xhr = XMLHttpRequest            ? new XMLHttpRequest()            : new ActiveXObject('Microsoft.XMLHTTP');         var data = opt.data,             url = opt.url,             type = opt.type.toUpperCase(),             dataArr = [];         for (var k in data) {             //将需要传递数据封装             dataArr.push(k + '=' + data[k]);         }         //判断get或者post方法,当然还有别的方法我暂时没写         if (type === 'GET') {             url = url + '?' + dataArr.join('&');             //打开ajax连接             xhr.open(type, url.replace(//?$/g, ''), true);             //发送数据             xhr.send();         }         if (type === 'POST') {             xhr.open(type, url, true);             //定义请求头可以忽略             xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');             xhr.send(dataArr.join('&'));         }         //响应onload事件(也就是请求成功)         xhr.onload = function () {             if (xhr.status === 200 || xhr.status === 304) {                 var res;                 if (opt.success && opt.success instanceof Function) {                     res = xhr.responseText;                     if (typeof res ==== 'string') {                     //这里返回数据类型可以自己定义,比如jquery的                     //xml,json等                         res = JSON.parse(res);                         opt.success.call(xhr, res);                     }                 }             } else {             //请求失败                 if (opt.error && opt.error instanceof Function) {                     opt.error.call(xhr, res);                 }             }         };     } };

原理就是如此简单,过几天不定时讲一下jsonp的实现原理。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台