基于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中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
浅析jquery的作用与优势
Dec 02 Javascript
JS保留两位小数,多位小数的示例代码
Jan 07 Javascript
javascript实现存储hmtl字符串示例
Apr 25 Javascript
ExtJS4 动态生成的grid导出为excel示例
May 02 Javascript
jQuery的animate函数实现图文切换动画效果
May 03 Javascript
javascript 应用小技巧方法汇总
Jul 05 Javascript
JavaScript操作 url 中 search 部分方法函数
Jun 15 Javascript
JQuery EasyUI的一些常用组件
Jul 12 jQuery
Vue实现动态添加或者删除对象和对象数组的操作方法
Sep 21 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
详解如何在JS代码中消灭for循环
Dec 11 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
shell脚本作为保证PHP脚本不挂掉的守护进程实例分享
2013/07/15 PHP
PHP和MYSQL实现分页导航思路详解
2017/04/11 PHP
封装好的省市地区联动控件附下载
2007/08/13 Javascript
javascript 继承实现方法
2009/08/26 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
Js实现滚动变色的文字效果
2014/06/16 Javascript
JS使用parseInt解析数字实现求和的方法
2015/08/05 Javascript
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
2016/08/04 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
移动端使用localStorage缓存Js和css文的方法(web开发)
2016/09/20 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
2017/09/11 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
2017/12/27 Javascript
jquery3和layui冲突导致使用layui.layer.full弹出全屏iframe窗口时高度152px问题
2019/05/12 jQuery
使用express获取微信小程序二维码小记
2019/05/21 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
用Python实现命令行闹钟脚本实例
2016/09/05 Python
Python多线程中阻塞(join)与锁(Lock)使用误区解析
2018/04/27 Python
python使用scrapy发送post请求的坑
2018/09/04 Python
python中的tcp示例详解
2018/12/09 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
python实现PID算法及测试的例子
2019/08/08 Python
Django admin禁用编辑链接和添加删除操作详解
2019/11/15 Python
如何基于python3和Vue实现AES数据加密
2020/03/27 Python
ONLY德国官方在线商店:购买时尚女装
2017/09/21 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
综合办公室个人的自我评价
2013/12/22 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
运动会广播稿100字
2014/09/14 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
MySQL库表名大小写的选择
2021/06/05 MySQL
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python
Python基本知识点总结
2022/04/07 Python
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL