原生JS封装Ajax插件(同域、jsonp跨域)


Posted in Javascript onMay 03, 2016

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢?

最近都在做原生JS熟悉的练习。。。

用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的。。。简单说说思路,如有不正确的地方,还望指正^_^

一、Ajax核心,创建XHR对象

Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0和MSXML2.XMLHttp.6.0。所以创建XHR对象的时候要用兼容性写法:

createXHR:function(){
 if(typeof XMLHttpRequest!='undefined'){
 return new XMLHttpRequest();
 }else if(typeof ActiveXObject!='undefined'){
 if(typeof arguments.callee.activeXString!='string'){
 var versions=["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
 for(i=0,len=versions.length;i<len;i++){
 try{
  new ActiveXObject(versions[i]);
  arguments.callee.activeXString=versions[i];
  break;
 }catch(ex){
 }
 }
 return new ActiveXObject(arguments.callee.activeXString);
 }else{
 throw new Error("No XHR object available.");
 }
}

二、XHR的主要方法属性

方法:

open()方法:接受3个参数,要发送的请求的类型、请求的URL、是否异步发送的布尔值

send()方法:要作为请求主体发送的数据,如果不需要通过请求主体发送数据,则必须传入null

abort()方法:在接收到响应之前调用来取消异步请求。

属性:

responseText:作为响应主体被返回的文本。

status:响应的HTTP状态

statusText:HTTP状态说明

readyState:表示请求/响应过程的当前活动阶段

取值分别为:

0:未初始化。尚未调用open()方法

1:启动。已经调用open()方法,但尚未调用send()方法

2:发送。已经调用send()方法,但未接收到响应。

3:接收。已经接受到部分响应数据

4:完成。已经接受到全部响应数据,而且已经可以在客户端使用了。

本例中的onreadystatechange事件处理函数:

var complete=function(){
 if(xhr.readyState==4){
 if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
 if(params.success){
  params.success(xhr.responseText);//执行调用ajax时指定的success函数
  }
 }else{
 if(params.fail){
 params.fail();//执行调用ajax时指定的fail函数
 }else{
 throw new Error("Request was unsucessful:"+xhr.status);
 }
 }
 }
}

注意:必须在调用open()方法之前指定onreadystatechange事件处理函数才能确保跨浏览器兼容性。

三、同域发送请求

①GET请求

最常见的请求类型,常用于查询某些信息。通过将查询的字符串参数追加到URL的末尾来将信息发送给服务器。get方法请求需要注意的是,查询字符串中的每个参数名称和值都必须使用encodeURIComponent()进行编码,而且所有名-值对都必须由&号分割。

请求方法:

if((this.config.type=="GET")||(this.config.type=="get")){
 for(var item in this.config.data){
 this.config.url=addURLParam(this.config.url,item,this.config.data[item]);//使用encodeURIComponent()进行编码
 }
 xhr.onreadystatechange=complete;
 xhr.open(this.config.type,this.config.url,this.config.async);
 xhr.send(null);
}

②POST请求

通常用于向服务器发送应该被保存的数据,POST请求应该把数据作为请求的主体提交。这里将模仿表单提交。即将Content-Type头部信息设置为application/x-www-form-urlencoded; charset=UTF-8。

序列化函数:

function serialize(data){
 var val="";
 var str="";
 for(var item in data){
  str=item+"="+data[item];
  val+=str+'&';
 }
 return val.slice(0,val.length-1);
 }

请求方法:

if(this.config.type=="POST"||this.config.type=="post"){
 xhr.addEventListener('readystatechange',complete);
 xhr.open(this.config.type,this.config.url,this.config.async);
 if(params.contentType){
  this.config.contentType=params.contentType;
  }
 xhr.setRequestHeader("Content-Type",this.config.contentType);
 xhr.send(serialize(this.config.data));
}

两个请求的一些区别:

 ①GET请求把参数数据写到URL中,在URL中可以看到,而POST看不到,所以GET不安全,POST较安全。

②GET传送的数据量较小,不能大于2kb。POST传送的数据量较大,一般默认为不受限制。

③GET服务器端用Request.QueryString来获取变量的值,POST服务器端用Request.From来获取。

④GET将数据添加到URL中来传递到服务器,通常利用一个?,后面的参数每一个数据参数以“名称=值”的形式出现,参数与参数之间利用一个连接符&来区分。POST的数据是放在HTTP主体中的,其组织方式不只一种,有&链接方式,也有分隔符方式。可以隐藏参数,传递大批数据,比较方便。

四、jsonp跨域发送请求

 首先,跨域是神马情况呢?

一个域名的组成:

http://     www  .  abc.com:   8080  / scripts/AjaxPlugin.js

协议       子域名      主域名      端口号     请求资源地址

~当协议、子域名、主域名、端口号中任意一个不相同时,都算作不同于。

~不同域之间互相请求资源,就算作“跨域”。

所有的浏览器都遵守同源策略,这个策略能够保证一个源的动态脚本不能读取或操作其他源的http响应和cookie,这就使浏览器隔离了来自不同源的内容,防止它们互相操作。所谓同源是指协议、域名和端口都一致的情况。浏览器会阻止ajax请求非同源的内容。

JSONP(JSON with Padding) 是一种跨域请求方式。主要原理是利用了script 标签可以跨域请求的特点,由其 src 属性发送请求到服务器,服务器返回 JS 代码,网页端接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。但是jsonp跨域只支持get请求。

JSONP由两部分组成:回调函数和数据,回调函数一般是由网页端控制,作为参数发往服务器端,服务器端把该函数和数据拼成字符串返回。

jsonp跨域主要需要考虑三个问题:

1、因为 script 标签的 src 属性只在第一次设置的时候起作用,导致 script 标签没法重用,所以每次完成操作之后要移除;

2、JSONP这种请求方式中,参数依旧需要编码;

3、如果不设置超时,就无法得知此次请求是成功还是失败;
由于代码有点长,就放个计时器的代码吧,完整代码见AjaxPlugin

//超时处理
if(params.time){
 scriptTag.timer=setTimeout(function(){
 head.removeChild(scriptTag);
 params.fail&¶ms.fail({message:"over time"});
 window[cbName]=null;
 },params.time);
}

插件详细解析及使用方法见:https://github.com/LuckyWinty/AjaxPlugin

更多精彩内容,请点击《ajax跨域技术汇总》,进行深入学习和研究。

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
jquery uaMatch源代码
Feb 14 Javascript
IE的fireEvent方法概述及应用
Feb 22 Javascript
JavaScript代码复用模式详解
Nov 07 Javascript
深入学习jQuery Validate表单验证(二)
Jan 18 Javascript
js获取所有checkbox的值的简单实例
May 30 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JavaScript必知必会(三) String .的方法来自何方
Jun 08 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
JavaScript中EventLoop介绍
Jan 22 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
Vue使用screenfull实现全屏效果
Sep 17 Javascript
深入浅析Bootstrap列表组组件
May 03 #Javascript
前端jquery部分很精彩
May 03 #Javascript
jQuery代码实现对话框右上角菜单带关闭×
May 03 #Javascript
JS基于clipBoard.js插件实现剪切、复制、粘贴
May 03 #Javascript
搞定immutable.js详细说明
May 02 #Javascript
Immutable 在 JavaScript 中的应用
May 02 #Javascript
基于javascript数组实现图片轮播
May 02 #Javascript
You might like
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
PHP抽象类基本用法示例
2018/12/28 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
正则表达式搭配js轻松处理json文本方便而老古
2013/02/17 Javascript
JS+CSS实现仿触屏手机拨号盘界面及功能模拟完整实例
2015/05/16 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
Window.Open打开窗体和if嵌套代码
2016/04/15 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
js实现3D图片展示效果
2017/03/09 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
基于VUE移动音乐WEBAPP跨域请求失败的解决方法
2018/01/16 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
微信小程序动态添加view组件的实例代码
2019/05/23 Javascript
如何在Express4.x中愉快地使用async的方法
2020/11/18 Javascript
详解JavaScript 中的批处理和缓存
2020/11/19 Javascript
解读Python中degrees()方法的使用
2015/05/18 Python
Python中getattr函数和hasattr函数作用详解
2016/06/14 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python 代码调试技巧示例代码
2020/08/11 Python
通过实例解析Python文件操作实现步骤
2020/09/21 Python
python如何控制进程或者线程的个数
2020/10/16 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
巴西最大的在线约会网站:ParPerfeito
2018/07/11 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
UNIX文件系统常用命令
2012/05/25 面试题
最新的互联网创业计划书
2014/01/10 职场文书
信访工作者先进事迹
2014/01/17 职场文书
工作岗位说明书模板
2014/05/09 职场文书
师范生自荐信模板
2014/05/28 职场文书
网络文明传播志愿者活动方案
2014/08/20 职场文书
国庆节标语大全
2014/10/08 职场文书
小学生通知书评语
2014/12/31 职场文书
spring注解 @PropertySource配置数据源全流程
2022/03/25 Java/Android