原生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 读取和设置文档元素的样式属性
Apr 14 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
Jun 19 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
jQuery设置和获取select、checkbox、radio的选中值方法
Jan 01 Javascript
js实现常见的工具条效果
Mar 02 Javascript
ng2学习笔记之bootstrap中的component使用教程
Mar 09 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
Mar 13 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
vue-cli webpack配置文件分析
May 20 Javascript
深入解读VUE中的异步渲染的实现
Jun 19 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
php实例分享之mysql数据备份
2014/05/19 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
基于PHP微信红包的算法探讨
2016/07/21 PHP
php简单计算年龄的方法(周岁与虚岁)
2016/12/06 PHP
Laravel框架FormRequest中重写错误处理的方法
2019/02/18 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
nodejs 中模拟实现 emmiter 自定义事件
2016/02/22 NodeJs
关于vue-router路径计算问题
2017/05/10 Javascript
简述Angular 5 快速入门
2017/11/04 Javascript
微信小程序画布圆形进度条显示效果
2020/11/17 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
vue 计算属性和侦听器的使用小结
2021/01/25 Vue.js
在Python程序中实现分布式进程的教程
2015/04/28 Python
pycharm下查看python的变量类型和变量内容的方法
2018/06/26 Python
NLTK 3.2.4 环境搭建教程
2018/09/19 Python
python 对类的成员函数开启线程的方法
2019/01/22 Python
Django 解决model 反向引用中的related_name问题
2020/05/19 Python
pytho matplotlib工具栏源码探析一之禁用工具栏、默认工具栏和工具栏管理器三种模式的差异
2021/02/25 Python
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
eBay英国购物网站:eBay.co.uk
2019/06/19 全球购物
锐步英国官网:Reebok英国
2019/11/29 全球购物
AOP的定义以及作用
2013/09/08 面试题
毕业生自荐书
2014/02/03 职场文书
军校大学生个人的自我评价
2014/02/17 职场文书
幼儿园中班评语大全
2014/04/17 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
钢铁是怎样炼成的读书笔记
2015/06/29 职场文书
mysql如何配置白名单访问
2021/06/30 MySQL
SQL CASE 表达式的具体使用
2022/03/21 SQL Server