原生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 相关文章推荐
用javascript实现点击链接弹出&quot;图片另存为&quot;而不是直接打开
Aug 15 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
javascript中注册和移除事件的4种方式
Mar 20 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
对js eval()函数的一些见解
Aug 15 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
vue中用动态组件实现选项卡切换效果
Mar 25 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
vue事件修饰符和按键修饰符用法总结
Jul 25 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
深入浅析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
php限制上传文件类型并保存上传文件的方法
2015/03/13 PHP
PHP实现接收二进制流转换成图片的方法
2017/01/10 PHP
论坛特效代码收集(落伍转发-不错)
2006/12/02 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
jquery批量设置属性readonly和disabled的方法
2014/01/24 Javascript
JavaScript获取鼠标移动时的坐标(兼容IE8、chome谷歌、Firefox)
2014/09/13 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
jquery插件bxslider用法实例分析
2015/04/16 Javascript
学习Bootstrap组件之下拉菜单
2015/07/28 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
canvas实现环形进度条效果
2017/03/23 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
vue中defineProperty和Proxy的区别详解
2020/11/30 Vue.js
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
python抓取京东商城手机列表url实例代码
2013/12/18 Python
Python对象体系深入分析
2014/10/28 Python
基于wxpython开发的简单gui计算器实例
2015/05/30 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
django 2.0更新的10条注意事项总结
2018/01/05 Python
python PyTorch预训练示例
2018/02/11 Python
PyCharm的设置方法和第一个Python程序的建立
2019/01/16 Python
Django中的session用法详解
2020/03/09 Python
关于python中导入文件到list的问题
2020/10/31 Python
python如何实现递归转非递归
2021/02/25 Python
Lands’ End官网:经典的美国生活方式品牌
2016/08/14 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
总经理职责
2013/12/22 职场文书
爱岗敬业演讲稿
2014/05/05 职场文书
毕业典礼演讲稿
2014/05/13 职场文书
乡镇党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
化验员岗位职责
2015/02/14 职场文书
获奖感言怎么写
2015/07/31 职场文书