原生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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
javascript 有用的脚本函数
May 07 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
May 23 Javascript
捕获键盘事件(且兼容各浏览器)
Jul 03 Javascript
jQuery实现html元素拖拽
Jul 21 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
BootStrap+Angularjs+NgDialog实现模式对话框
Aug 24 Javascript
js生成随机数方法和实例
Jan 17 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
使用JavaScript开发跨平台的桌面应用详解
Jul 27 Javascript
vue技术分享之你可能不知道的7个秘密
Apr 09 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
自动跳转中英文页面
2006/10/09 PHP
php学习之 数组声明
2011/06/09 PHP
php输入流php://input使用示例(php发送图片流到服务器)
2013/12/25 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
PHP使用文件锁解决高并发问题示例
2018/03/29 PHP
PHP开发的文字水印,缩略图,图片水印实现类与用法示例
2019/04/12 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
js实现正方形颜色从下往上升的效果
2014/08/04 Javascript
jQuery中[attribute=value]选择器用法实例
2014/12/31 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
javascript委托(Delegate)blur和focus用法实例分析
2015/05/26 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
Bootstrap基本插件学习笔记之轮播幻灯片(23)
2016/12/08 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
JavaScript算法教程之sku(库存量单位)详解
2017/06/29 Javascript
详解使用Node.js 将txt文件转为Excel文件
2017/07/05 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
[03:11]DOTA2上海特锦赛小组赛第一日recap精彩回顾
2016/02/28 DOTA
python自动化测试实例解析
2014/09/28 Python
python中(str,list,tuple)基础知识汇总
2018/02/20 Python
Python处理CSV与List的转换方法
2018/04/19 Python
python学生信息管理系统(初级版)
2018/10/17 Python
python dumps和loads区别详解
2020/02/04 Python
调整Jupyter notebook的启动目录操作
2020/04/10 Python
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
HomeAway澳大利亚:预订你的度假屋,公寓、度假村、别墅等
2019/02/20 全球购物
历史专业个人求职信范文
2013/12/07 职场文书
活动策划求职信模板
2014/04/21 职场文书
小学生倡议书范文
2014/05/13 职场文书
爱心助学感谢信
2015/01/21 职场文书
亮剑观后感
2015/06/05 职场文书
JS ES6异步解决方案
2021/04/29 Javascript