原生JavaScript实现AJAX、JSONP


Posted in Javascript onFebruary 07, 2017

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的。

其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP!

一、AJAX

AJAX的核心是XMLHttpRequest。

一个完整的AJAX请求一般包括以下步骤:

  • 实例化XMLHttpRequest对象
  • 连接服务器
  • 发送请求
  • 接收响应数据

我将AJAX请求封装成ajax()方法,它接受一个配置对象params。

function ajax(params) {  
 params = params || {};  
 params.data = params.data || {};  
 // 判断是ajax请求还是jsonp请求
 var json = params.jsonp ? jsonp(params) : json(params);  
 // ajax请求  
 function json(params) {  
  // 请求方式,默认是GET
  params.type = (params.type || 'GET').toUpperCase(); 
  // 避免有特殊字符,必须格式化传输数据 
  params.data = formatParams(params.data);  
  var xhr = null;  
  // 实例化XMLHttpRequest对象  
  if(window.XMLHttpRequest) {  
   xhr = new XMLHttpRequest();  
  } else {  
   // IE6及其以下版本  
   xhr = new ActiveXObjcet('Microsoft.XMLHTTP');  
  }; 
   // 监听事件,只要 readyState 的值变化,就会调用 readystatechange 事件
  xhr.onreadystatechange = function() { 
   // readyState属性表示请求/响应过程的当前活动阶段,4为完成,已经接收到全部响应数据
   if(xhr.readyState == 4) {  
    var status = xhr.status; 
    // status:响应的HTTP状态码,以2开头的都是成功
    if(status >= 200 && status < 300) {  
     var response = ''; 
     // 判断接受数据的内容类型 
     var type = xhr.getResponseHeader('Content-type');  
     if(type.indexOf('xml') !== -1 && xhr.responseXML) {  
      response = xhr.responseXML; //Document对象响应  
     } else if(type === 'application/json') {  
      response = JSON.parse(xhr.responseText); //JSON响应  
     } else {  
      response = xhr.responseText; //字符串响应  
     }; 
     // 成功回调函数 
     params.success && params.success(response);  
    } else {  
     params.error && params.error(status);  
    }  
   };  
  }; 
  // 连接和传输数据  
  if(params.type == 'GET') {
   // 三个参数:请求方式、请求地址(get方式时,传输数据是加在地址后的)、是否异步请求(同步请求的情况极少);
   xhr.open(params.type, params.url + '?' + params.data, true);  
   xhr.send(null);  
  } else {  
   xhr.open(params.type, params.url, true);  
   //必须,设置提交时的内容类型  
   xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8'); 
   // 传输数据 
   xhr.send(params.data);  
  }  
 } 
 //格式化参数  
 function formatParams(data) {  
  var arr = [];  
  for(var name in data) { 
   //  encodeURIComponent() :用于对 URI 中的某一部分进行编码
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));  
  };  
  // 添加一个随机数参数,防止缓存  
  arr.push('v=' + random());  
  return arr.join('&');  
 }
 // 获取随机数  
 function random() {  
  return Math.floor(Math.random() * 10000 + 500);  
 }
}

在上面的代码中readyState的值表示请求/响应过程的当前活动阶段,其值得含义如下:

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

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

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

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

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

使用实例:

ajax({  
 url: 'test.php',  // 请求地址
 type: 'POST',  // 请求类型,默认"GET",还可以是"POST"
 data: {'b': '异步请求'},  // 传输数据
 success: function(res){  // 请求成功的回调函数
  console.log(JSON.parse(res));  
 },
 error: function(error) {}  // 请求失败的回调函数
});

二、JSONP

同源策略

AJAX之所以需要“跨域”,罪魁祸首就是浏览器的同源策略。即,一个页面的AJAX只能获取这个页面相同源或者相同域的数据。 如何叫“同源”或者“同域”呢?——协议、域名、端口号都必须相同。例如

http://example.com  和  https://example.com 不同,因为协议不同;

http://localhost:8080  和  http://localhost:1000 不同,因为端口不同;

http://localhost:8080  和  https://example.com 不同,协议、域名、端口号都不同,根本不是一家的。

当跨域请求时,一般都会看到这个错误:

XMLHttpRequest cannot load http://ghmagical.com/article/?intro=jsonp%E8%AF%B7%E6%B1%82&v=5520. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. 

那如何跨域请求呢?这时,JSONP就登场了!

JSONP是JSON with Padding(填充式JSON或参数式JSON)的简写,是一种非常常用的跨域请求方式。主要原理是利用了script 标签可以跨域请求的特性,由其 src 属性发送请求到服务器,服务器返回 JavaScript 代码,浏览器接受响应,然后就直接执行了,这和通过 script 标签引用外部文件的原理是一样的。

JSONP由两部分组成:回调函数和数据,回调函数是当响应到来时应该在页面中调用的函数,回调函数的名字一般在请求中指定。当服务器响应时,服务器端就会把该函数和数据拼成字符串返回。

JSONP的请求过程:

  • 请求阶段:浏览器创建一个 script 标签,并给其src 赋值(类似 http://example.com/api/?callback=jsonpCallback)。
  • 发送请求:当给script的src赋值时,浏览器就会发起一个请求。
  • 数据响应:服务端将要返回的数据作为参数和函数名称拼接在一起(格式类似”jsonpCallback({name: 'abc'})”)返回。当浏览器接收到了响应数据,由于发起请求的是 script,所以相当于直接调用 jsonpCallback 方法,并且传入了一个参数。

在这里讲解一下用原生JavaScript如何实现。

依旧是ajax()方法里添加JSONP,后面会将两者整合在一起,JSONP的配置参数主要多了一个jsonp参数,它就是你的回调函数名。

function ajax(params) {  
 params = params || {};  
 params.data = params.data || {};  
 var json = params.jsonp ? jsonp(params) : json(params);   
 // jsonp请求  
 function jsonp(params) {  
  //创建script标签并加入到页面中  
  var callbackName = params.jsonp;  
  var head = document.getElementsByTagName('head')[0];  
  // 设置传递给后台的回调参数名  
  params.data['callback'] = callbackName;  
  var data = formatParams(params.data);  
  var script = document.createElement('script');  
  head.appendChild(script);  
  //创建jsonp回调函数  
  window[callbackName] = function(json) {  
  head.removeChild(script);  
  clearTimeout(script.timer);  
  window[callbackName] = null;  
  params.success && params.success(json);  
  };  
//发送请求  
  script.src = params.url + '?' + data;  
  //为了得知此次请求是否成功,设置超时处理  
  if(params.time) {  
   script.timer = setTimeout(function() {  
    window[callbackName] = null;  
    head.removeChild(script);  
    params.error && params.error({  
     message: '超时'  
    });  
   }, time);  
  }  
 };  
 //格式化参数  
 function formatParams(data) {  
  var arr = [];  
  for(var name in data) {  
   arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));  
  };  
  // 添加一个随机数,防止缓存  
  arr.push('v=' + random()); 
  return arr.join('&');  
 }  
 // 获取随机数  
 function random() {  
  return Math.floor(Math.random() * 10000 + 500);  
 }
}

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

使用实例:

ajax({  
  url: 'test',  // 请求地址
 jsonp: 'jsonpCallback', // 采用jsonp请求,且回调函数名为"jsonpCallbak",可以设置为合法的字符串
 data: {'b': '异步请求'},  // 传输数据
 success:function(res){  // 请求成功的回调函数
  console.log(res);  
 },
 error: function(error) {}  // 请求失败的回调函数
});

虽然JSONP非常简单易用,不过,它也存在两点不足

  • JSONP是从其他域加载代码执行,如果其他域不安全,可能会夹带一些恶意代码,而此时除了完全放弃JSONP调用之外,没办法追究
  • 要确认JSONP请求是否失败并不容易

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
JavaScript类和继承 this属性使用说明
Sep 03 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
基于javascript实现图片预加载
Jan 05 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
javascript实现二叉树遍历的代码
Jun 08 Javascript
原生js二级联动效果
Jun 20 Javascript
jquery 一键复制到剪切板的实例
Sep 20 jQuery
关于layui 弹出层一闪而过就消失的解决方法
Sep 09 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
[原创]SyntaxHighlighter自动识别并加载脚本语言
Feb 07 #Javascript
javascript表达式和运算符详解
Feb 07 #Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 #Javascript
原生js和css实现图片轮播效果
Feb 07 #Javascript
bootstrap输入框组使用方法
Feb 07 #Javascript
angularjs使用directive实现分页组件的示例
Feb 07 #Javascript
Bootstrap下拉菜单样式
Feb 07 #Javascript
You might like
PHP中将数组转成XML格式的实现代码
2011/08/08 PHP
谈谈PHP中substr和substring的正确用法及相关参数的介绍
2015/12/16 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
php报错502badgateway解决方法
2019/10/11 PHP
关于Laravel参数验证的一些疑与惑
2019/11/19 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
javascript 快速排序函数代码
2012/05/30 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
JavaSacript中charCodeAt()方法的使用详解
2015/06/05 Javascript
跟我学习javascript的定时器
2015/11/19 Javascript
JS 全屏和退出全屏详解及实例代码
2016/11/07 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
JS二级菜单不同实现方法分析【4种方法】
2018/12/21 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
jQuery+ajax实现用户登录验证
2020/09/13 jQuery
[56:57]LGD vs VP 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第一场 8.20.mp4
2019/08/22 DOTA
python处理json数据中的中文
2014/03/06 Python
Python求解平方根的方法
2015/03/11 Python
Python实现截屏的函数
2015/07/26 Python
Python函数中*args和**kwargs来传递变长参数的用法
2016/01/26 Python
详解Python判定IP地址合法性的三种方法
2018/03/06 Python
Python采集猫眼两万条数据 对《无名之辈》影评进行分析
2018/12/05 Python
Python3中_(下划线)和__(双下划线)的用途和区别
2019/04/26 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
Hotels.com台湾:饭店订房网
2017/09/06 全球购物
台湾屈臣氏网路商店:Watsons台湾
2020/12/29 全球购物
工作表扬信的范文
2014/01/10 职场文书
学生会主席事迹材料
2014/01/28 职场文书
植物生产学专业求职信
2014/08/08 职场文书
教师正风肃纪剖析材料
2014/10/20 职场文书
幼儿园开学家长寄语(2016春季)
2015/12/03 职场文书