原生javascript封装ajax和jsonp
在我们请求数据时,完成页面跨域,利用原生JS封装的ajax和jsonp:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//ajax 和jsonp 跨域的封装
var $={
//封装ajax,堪比jquery中的ajax
ajax:function(option){
//判断输出的async真假
var async=typeof(option.async)==="undefined"?true:option.async;
var xhr=null;
//判断在各浏览器的请求
if(window.XMLHttpRequest){
// 主流浏览器
xhr=new XMLHttpRequest();
}else if(window.ActiveXObject){
// IE浏览器
xhr=new ActiveXObject("Microsoft.XMLHttp");
}
//打开
xhr.open(option.type || "get",option.url,async);
xhr.onreadystatechange=function(){
// 请求成功执行的
if(this.readyState==4 && this.status==200){
var data=this.responseText;
if(option.dataType=="json"){
// data=JSON.parse(data);
data=eval("("+data+")");
}
option.success && option.success(data);
}
};
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//发送
xhr.send();
},
loadScript:function(url){
//创建一个script标签
var script=document.createElement("script");
script.src=url;
//插入到head标签中
document.getElementsByTagName('head')[0].appendChild(script);
},
jsonp:function(option){
//利用随机数给函数其一个函数名
var cbName="JSONCallback"+Math.random().toString().substr(2,10);
//将url中的callback=?替换成callback=生成的函数名
option.url=option.url.replace(/callback=\?/,'callback='+cbName);
//创建一个用cbName作为函数名的函数
window[cbName]=function(data){
option.success && option.success(data);
window[cbName]=null; //window清空 ,避免污染全局变量
}
//调用loadScript方法,生成script的标签,设置src;
this.loadScript(option.url);
}
}
$.ajax({
url:"json.php",
type:"post",
async:false,
dataType:"json",
success:function(data){
console.log(data)
},
error:function(){ }
}) $.jsonp({
url:"http://www.bjuga.com/demo.php?callback=?",//后台给得接口
success:function(data){
console.log(data)
}
})
</script>
</body>
</html>
原生javascript封装ajax和jsonp的更多相关文章
- 原生JavaScript实现AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 原生JavaScript 封装ajax
原生JavaScript 封装ajax function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...
- 原生 JavaScript 实现 AJAX、JSONP
相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的 ...
- 原生JavaScript封装Ajax
第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...
- 原生JavaScript封装的jsonp跨域请求
原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...
- 用原生JS实现AJAX和JSONP
前端开发在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的.其实,原生 ...
- 原生JavaScript写AJAX
前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...
- 原生javaScript完成Ajax请求
使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...
- 原生JS封装Ajax插件(同域&&jsonp跨域)
抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...
随机推荐
- Visual Studio 2015将在7月20号RTM
(此文章同时发表在本人微信公众号"dotNET每日精华文章",欢迎右边二维码来关注.) 题记:用了3个多月的VS 2015终于要迎来RTM了,不过感觉有点淡淡的忧伤(为什么呢?请看 ...
- web开发的步骤
前端知道是浏览器呈现的部分,相对于前端,后台你可以理解为服务器端专门处理.读取.存储数据库数据的部分. 因为网站是基于B\S架构,即浏览器---服务端架构,就程序来讲,可笼统划分为前端程序和服务器端程 ...
- hdu 4597 + uva 10891(一类区间dp)
题目链接:http://vjudge.net/problem/viewProblem.action?id=19461 思路:一类经典的博弈类区间dp,我们令dp[l][r]表示玩家A从区间[l, r] ...
- supervisor(一)基础篇
这两天干的活,是让楼主写一个supervisor的listener,用来监控supervisor所管理子进程的状态,当子进程异常退出时,楼主写的这个listener将会触发报警.在这里总结下super ...
- jdk 1.8 Executors
Class Executors java.lang.Object java.util.concurrent.Executors public class Executors extends Objec ...
- vim 分屏功能
分屏启动Vim 使用大写的O参数来垂直分屏. vim -On file1 file2 ... 使用小写的o参数来水平分屏. vim -on file1 file2 ... 注释: n是数字,表示分成几 ...
- poj 2115 Looooops
C Looooops Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 23637 Accepted: 6528 Descr ...
- Inversion Sequence(csu 1555)
Description For sequence i1, i2, i3, … , iN, we set aj to be the number of members in the sequence w ...
- vs2008/2010安装无法打开数据文件解决方案
本人在安装VS2008或2010时,在开始的第一个页面(进度条大约加载到75%左右),提示“无法打开数据文件 'C:/Documents and Settings/Administrator/Loca ...
- 1、Delphi 打开目录和txt文件模块
//1.打开目录和打开txt文件 procedure TMainForm.bbtnOpenLoClick(Sender: TObject); var sLogName: string; begin s ...