在我们请求数据时,完成页面跨域,利用原生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的更多相关文章

  1. 原生JavaScript实现AJAX、JSONP

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

  2. 原生JavaScript 封装ajax

    原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type ...

  3. 原生 JavaScript 实现 AJAX、JSONP

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

  4. 原生JavaScript封装Ajax

    第一次开个人技术博客了,发的第一篇技术文章,欢迎指点…… 欢迎访问本人的独立博客:蓝克比尔 Ajax的实现主要分为四部分: 1.创建Ajax对象 // 创建ajax对象 var xhr = null; ...

  5. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

  6. 用原生JS实现AJAX和JSONP

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

  7. 原生JavaScript写AJAX

    前端JavaScript: function ajaxGet(url, obj) { var request; if(window.XMLHttpRequest) { request = new XM ...

  8. 原生javaScript完成Ajax请求

    使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; i ...

  9. 原生JS封装Ajax插件(同域&&jsonp跨域)

    抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正 ...

随机推荐

  1. linux command file/type which/whereis

    今天遇到几个命令,初见时感觉好像啊,不太能区分其具体功能和区别,因此特来记录一下. 1. file和type file: 查看文件类型 type: display information of com ...

  2. 在Salesforce中处理Email的发送

    在Salesforce中可以用自带的 Messaging 的 sendEmail 方法去处理Email的发送 请看如下一段简单代码: public boolean TextFormat {get;se ...

  3. javase基础笔记1——简介和发展

    软件分为 系统软件 windows linux类 (unix)mac(麦金塔).数据库管理系统 unix linux 开源os(open source) 免费 开放 free os operation ...

  4. 学习linux内核时常碰到的汇编指令(1)

     转载:http://blog.sina.com.cn/s/blog_4be6adec01007xvg.html 80X86 汇编指令符号大全 +.-.*./∶算术运算符. &∶宏处理操作符. ...

  5. zookeeper源码分析(一) 工作原理

    来自:http://www.codedump.info/?p=207 阅读zookeeper代码一段时间(注:是很长一段时间,断断续续得有半年了吧?)之后,我要开始将一些积累下来的东西写下来了,鉴于我 ...

  6. hdu1114 完全背包

    题意:给出钱罐的重量,然后是每种钱的价值和重量,问钱罐里最少可能有多少钱. 完全背包. 代码: #include<iostream> #include<cstdio> #inc ...

  7. 分享Kali Linux 2016.2第43周镜像

    分享Kali Linux 2016.2第43周镜像Kali Linux官方于10月23日如约发布了2016.2第43周镜像.和以往一样,此次镜像包含了11个镜像文件,包含PC端的32和64位镜像,还有 ...

  8. 学习 Message(5): 关于 TApplicationEvents.OnMessage 的第二个参数 可以屏蔽 TWebBrowser右键菜单:

    http://www.cnblogs.com/del/archive/2008/10/25/1319318.html TApplicationEvents.OnMessage 的第二个参数 Handl ...

  9. 泛型容器单元(Generics.Collections)[2]: TQueue<T> 队列列表

    TQueue 和 TStack, 一个是队列列表, 一个是堆栈列表; 一个是先进先出, 一个是先进后出. TQueue 主要有三个方法.一个属性:Enqueue(入列).Dequeue(出列).Pee ...

  10. https://www.nginx.com/blog/introduction-to-microservices/

    https://www.nginx.com/blog/introduction-to-microservices/