基于ajax和jsonp的原生封装(实例)


Posted in Javascript onOctober 16, 2017

最近在学ajax和跨域,于是就自己封装了一个,虽然有点粗糙但还是可以用的。其实jsonp的本质就是:动态创建script标签,然后通过src属性发送跨域请求,然后服务器端响应的数据格式为【函数调用(foo(实参))】,所以在发送请求之前必须先声明一个函数,并且函数的名字与参数中传递的名字要一致。这里声明的函数是由服务器响应的内容(实际就是一段js代码-函数调用)来调用。

其他的就不多说了,直接上代码。

'use strict';
function ajax(obj){
var defaults = {
type:'get',
url:'#',
dataType:'text',
jsonp:'callback',
data:{},
async:true,
success:function(data){console.log(data);}
};
for(var k in obj){
defaults[k] = obj[k];
}
if(defaults.dataType == 'jsonp') {
//调用jsonp
ajaxForJsonp(defaults);
}
else {
//调用ajax json
ajaxForJson(defaults);
}
}

//json数据格式
function ajaxForJson(defaults){
//1、创建XMLHttpRequset对象
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}
else {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
var param = '';
for(var key in defaults.data) {
param += key + '='+ defaults.data[key] + '&';
}
if(param){
param = param.slice(0, param.length-1);
}
// 处理get请求参数并且处理中文乱码问题
if(defaults.type == 'get') {
defaults.url += '?' + encodeURI(param);
}
//2、准备发送(设置发送的参数)
xhr.open(defaults.type,defaults.url,defaults.async);
// 处理post请求参数并且设置请求头信息(必须设置)
var data = null;
if(defaults.type == 'post') {
data = param;
//设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
}
// 3、执行发送动作
xhr.send(data);
//处理同步请求,不会调用回调函数
if(!defaults.async) {
if(defaults.dataType == 'json'){
return JSON.parse(xhr.responseText);
}
else {
return xhr.responseText;
}
}
//// 4、指定回调函数(处理服务器响应数据)
xhr.onreadystatechange = function() {
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText;
if(defaults.dataType == 'json'){
data = JSON.parse(data);
}
defaults.success(data);
}
}
}
}

//跨域jsonp
function ajaxForJsonp(defaults){
//cbName默认的是回调函数名称
var cbName = 'jQuery' + ('1.12.2' + Math.random()).replace(/\D/g,'') + '_' + (new Date().getTime());
if(defaults.jsonpCallback) {
cbName = defaults.jsonpCallback;
}
//这里就是回调函数,调用方式:服务器响应内容来调用
//向window对象中添加一个方法,方法名是变量cname的值
window[cbName] = function(data) {
defaults.success(data);//这里success的data是实参
}
var param = '';
for(var key in defaults.data){
param += key + '=' + defaults.data[key] + '&'; 
}
if(param){
param = param.slice(0, param.length-1);
param = '&' + param;
}
var script = document.createElement('script');
script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}

以上这篇基于ajax和jsonp的原生封装(实例)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery AJAX回调函数this指向问题
Feb 08 Javascript
jquery实现更改表格行顺序示例
Apr 30 Javascript
JavaScript字符串对象toLowerCase方法入门实例(用于把字母转换为小写)
Oct 17 Javascript
JavaScript中window.open用法实例详解
Apr 15 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
Vue.js每天必学之计算属性computed与$watch
Sep 05 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
解决vue接口数据赋值给data没有反应的问题
Aug 27 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
微信小程序swiper左右扩展各显示一半代码实例
Dec 05 Javascript
AngularJS实现注册表单验证功能
Oct 16 #Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 #Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 #Javascript
Vue 2.0学习笔记之Vue中的computed属性
Oct 16 #Javascript
angular4中关于表单的校验示例
Oct 16 #Javascript
原生JS实现小小的音乐播放器
Oct 16 #Javascript
jQuery实现简单的回到顶部totop功能示例
Oct 16 #jQuery
You might like
用DBSQL类加快开发MySQL数据库程序的速度
2006/10/09 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
Mootools 1.2教程 Fx.Tween的使用
2009/09/15 Javascript
JQuery1.6 使用方法三
2011/11/23 Javascript
jquery ready函数、css函数及text()使用示例
2013/09/27 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
js中typeof的用法汇总
2013/12/12 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
2014/05/11 Javascript
辨析JavaScript中的Undefined类型与null类型
2016/05/26 Javascript
全面解析Bootstrap中form、navbar的使用方法
2016/05/30 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
利用jquery给指定的table动态添加一行、删除一行的方法
2016/10/12 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
深入理解Vue 的钩子函数
2018/09/05 Javascript
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
vue+element UI实现树形表格带复选框的示例代码
2019/04/16 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
python对数组进行反转的方法
2015/05/20 Python
pandas 空的dataframe 插入列名的示例
2018/10/30 Python
网易2016研发工程师编程题 奖学金(python)
2019/06/19 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
美国知名户外用品畅销中心:Sierra Trading Post
2016/07/19 全球购物
Perfume’s Club中文官网:西班牙美妆在线零售品牌
2020/08/24 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
挂职思想汇报
2013/12/31 职场文书
幼儿园保育员辞职信
2014/01/12 职场文书
文科教师毕业的自我评价
2014/01/16 职场文书
村班子对照检查材料
2014/08/18 职场文书
相亲活动方案
2014/08/26 职场文书
中学语文教学反思
2016/02/16 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
Vue详细的入门笔记
2021/05/10 Vue.js
教你快速构建一个基于nginx的web集群项目
2021/11/27 Servers