[js]ajax-异源请求jsonp
参考:
http://www.cnblogs.com/whatisfantasy/p/6237713.html
http://www.cnblogs.com/freely/p/6690804.html
http://www.cnblogs.com/LetMe/articles/7616267.html
ajax请求-解放每次手动输url
js的XMLHttpRequest对象
我们使用XMLHttpRequest对象来发送一个Ajax请求
用xhr发一个ajax请求
因为我是webstorm,因此自带音响哈.
也就是这个接口 http://localhost:63343/web_learn/ajax/ajax/data.txt 可以被访问到,这里我们不手动访问呢了,用ajax来访问.
这里我们用ajax来请求这个接口,并将内容打印到console口
<script>
var xhr = new XMLHttpRequest(); //1.创建xhr对象
xhr.open('get', 'http://localhost:63343/web_learn/ajax/ajax/data.txt', true); //2.准备发起url,默认异步true
xhr.onreadystatechange = function () { //3.回来的数据该怎么处理?
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(null); //4.开始发射
</script>
同源访问-简写url
<script>
var xhr = new XMLHttpRequest();
xhr.open('get', 'data.txt', true);//这里url可以简写哦,默认代表访问源
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.log(xhr.responseText);
}
};
xhr.send(null);
</script>
异源访问
这里我们访问 http://www.weather.com.cn/data/sk/101010100.html 这个接口
<script>
xhr = new XMLHttpRequest();
xhr.open('get', 'http://www.weather.com.cn/data/sk/101010100.html', true); //跨站访问不允许Access-Control-Allow-Origin' header
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200){
console.log(xhr.responseText);
}
};
xhr.send(null);
</script>
ajax跨源访问是不允许的, 浏览器不允许他这样搞. 也是为了安全的缘故吧.
解决ajax异源请求
浏览器不允许ajax来跨源,但是运行link script img等标签跨源.
借助script标签来解决异源问题.
我们找了个接口
https://suggest.taobao.com/sug?code=utf-8&q=%E5%9B%B4%E5%B7%BE&callback=fn
发现clallback=xx 他返回你传递给他的, 可见后端获取到了这个参数(query),然后作为一部分返回给前端
jsonp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jsonp</title>
</head>
<body>
<script>
//jsonp方式解决异源问题
function fn(data) {
console.log(data);
}
</script>
<script type="text/javascript"
src="https://suggest.taobao.com/sug?code=utf-8&q=%E5%9B%B4%E5%B7%BE&callback=fn"> //这里fn其实是函数名, 返回结果fn(一坨data), 恰好触发了页面的fn函数
</script>
</body>
</html>
/getdata?callback=fn部分自己实现--nodejs实现这个接口
即实现传什么函数名,返回什么
如传fn返回fn(data), 传func,返回func(data)
app.js 我们设置函数名为maotai,返回maotai(data)
var http = require('http'), //导入http url fs模块
url = require('url'),
fs = require('fs');
s1 = http.createServer(function (req, res) {// 创建服务器
var urlObj = url.parse(req.url, true), // 接受req对象
pathname = urlObj['pathname'], // 取出req里的pathname
query = urlObj['query']; //获取参数 /getall?cb=maotai" 里的cb
// 不同的.html .css 返回时候设置http head不同的mime类型
var reg = /\.(HTML|CSS|JS|JSON|TXT|ICO)/i; //正则判断mime类型
if (reg.test(pathname)) {
var suffix = reg.exec(pathname)[1].toUpperCase();//mime统一大写比对
var suffixMIME = null;
switch (suffix) {
case "HTML":
suffixMIME = 'text/html';
break;
case "JS":
suffixMIME = 'text/javascript';
break;
case "CSS":
suffixMIME = 'text/css';
break;
case "JSON":
suffixMIME = 'application/json';
break;
case "ICO":
suffixMIME = 'application/octet-stream';
break;
}
try {
con = fs.readFileSync('.' + pathname);
res.writeHead(200, {'content-type': suffixMIME + ';charset=utf-8'});
res.end(con);
} catch (e) {
res.writeHead(404, {'content-type': 'text/plain;charset=utf-8'});
res.end("file not found")
}
}
if (pathname === "/getall") {
var fnName = query["cb"]; //获取cb=maotai
con = fs.readFileSync('./data.txt', 'utf-8');
con = 'a,b';
res.writeHead(200, {'content-type': 'application/json;charset=utf-8'});
res.end(fnName + '(' + con + ',22)'); // end即返回 maotai(a,b,22)
}
});
s1.listen(1234, function () {
console.log("http://127.0.0.1:1234/getall?cb=maotai");
});
启动nodejs服务端
实现这个接口
http://127.0.0.1:1234/getall?cb=maotai
返回结果
触发页面
<script>
var a = 12;
var b = 13;
function maotai(a,b,num) {
console.log(a,b,num);
}
</script>
<!--//jsonp可以返回任意格式字符串,但一般返回的是json格式字符串-->
<script type="text/javascript" src="http://127.0.0.1:1234/getall?cb=maotai"></script>
访问返会结果.
[js]ajax-异源请求jsonp的更多相关文章
- [js]jquery里的jsonp实现ajax异源请求
同源请求-jquery <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/ ...
- JS跨域请求 JSONP B/S全代码
Ajax直接请求普通文件存在跨域无权限访问的问题,甭管你是静态页面.动态网页.web服务.WCF,只要是跨域请求,一律不准:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有 ...
- js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
最近做了一个项目,需要用子域名调用主域名下的一个现有的功能,于是想到了用jsonp来解决,在我们平常的项目中不乏有这种需求的朋友,于是记录下来以便以后查阅同时也希望能帮到大家,需要了解的朋友可以参考下 ...
- js跨域请求jsonp解决方案-最简单的小demo
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- js ajax同步请求造成浏览器假死的问题
一.问题的起因 今天做一个需求遇到了这么个情况,就是用户个人中心有个功能,点击按钮,可以刷新用户当前的积分,这个肯定需要使用到ajax的同步请求了,当时喀喀喀三下五除二写玩了,大概代码如下: /** ...
- js ajax调用请求
<pre name="code" class="html"> function getAppList(env){ var data = {}; da ...
- JS Ajax异步请求发送列表数据后面多了[]
还在苦逼的写代码,这里就不详细了,直接抛出问题: 如图所示: 前端ajax请求向后端发送数据的时候,给key添加了[]出现很多找不到原因, 后面在说 解决方法: 暂时先这样记录一下,下次方便查找,好了 ...
- 解决js ajax跨越请求 Access control allow origin 异常
// 解决跨越请求的问题 response.setHeader("Access-Control-Allow-Origin", "*");
- js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
随机推荐
- 强化学习-MDP(马尔可夫决策过程)算法原理
1. 前言 前面的强化学习基础知识介绍了强化学习中的一些基本元素和整体概念.今天讲解强化学习里面最最基础的MDP(马尔可夫决策过程). 2. MDP定义 MDP是当前强化学习理论推导的基石,通过这套框 ...
- Java编程的逻辑 (95) - Java 8的日期和时间API
本系列文章经补充和完善,已修订整理成书<Java编程的逻辑>,由机械工业出版社华章分社出版,于2018年1月上市热销,读者好评如潮!各大网店和书店有售,欢迎购买,京东自营链接:http: ...
- linux系统下键盘按键的重新映射——xmodmap工具和xev工具
大家会不会有时候,感觉键盘上的某几个键用起来不是很方便,打字打久了很容易手指头疼呢? 例如大家使用vim编辑器时, 经常需要使用到esc键,而该键在左上角,很不方便的.再比如写程序的时候,经常会使用到 ...
- myeclipse中的项目 如何在项目视窗中显示setting，classpath等配置文件
导入了别人的项目,各种jar包都放好后,path也都build好了,项目也能正常启动,但是就是项目名有红叉,这是为什么呢? 网上有人说Java build path中的jar包missing了,这是一 ...
- SQL开头quoted和ansiNULL
“QUOTED_IDENTIFIER” 当 SET QUOTED_IDENTIFIER 为 ON 时,标识符可以由双引号分隔,而文字必须由单引号分隔. 当 SET QUOTED_IDENTIFIER ...
- 用 wait-notify 写一段代码来解决生产者-消费者问题
在同步块中调用 wait() 和 notify()方法,如果阻塞,通过循环来测试等待条件.请参考答案中的示例代码. [生产者] import java.util.Vector; import java ...
- cocos2dx2.x&3.x部分函数对照表
| v2.1 names | v3.0 names | | ccp | Point | | ccpNeg | Point::- | | ccpAdd | Point::+ | | ccpSub | P ...
- jvm.option是什么,它是如何加载的
jvm.option是一些程序里边的java的配置参数的一个集合,不同的应用都会定义自己的jvm.options用来控制一些jvm的参数 以下,以elasticsearch为例,来说明它是如何加载的 ...
- 进程池的回调函数callback
如下代码: from multiprocessing import Pool def func1(n): print('in func1') return n*n def func2(nn): pri ...
- 用memset设置无穷大无穷小
memeset是以字节为单位进行赋值的,对字符数组可以直接用. 但对于int数组就不行了. 但设置无穷大来说有个技巧: 如果我们将无穷大设为0x3f3f3f3f,那么奇迹就发生了,0x3f3f3f3f ...