ajax jsonpclaaback,[js]ajax-异源请求jsonp

ajax请求-解放每次手动输url

7e3331a7596511e90e923dfe3c9c3c2e.png

js的XMLHttpRequest对象

我们使用XMLHttpRequest对象来发送一个Ajax请求

用xhr发一个ajax请求

35d12d2fccada2f2f91099413a0b8431.png

因为我是webstorm,因此自带音响哈.

这里我们用ajax来请求这个接口,并将内容打印到console口

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.开始发射

a7591ffd0fc5c5246e784f4ff7542763.png

aa3cfce1e0f0911f6df8b26129e8eb8e.png

同源访问-简写url

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);

异源访问

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);

ajax跨源访问是不允许的, 浏览器不允许他这样搞. 也是为了安全的缘故吧.

be30445bf0d6262e975c2793f9cc8f69.png

解决ajax异源请求

浏览器不允许ajax来跨源,但是运行link script img等标签跨源.

c9bbd5fcf1b3de106e27370138d7edaf.png

借助script标签来解决异源问题.

我们找了个接口

https://suggest.taobao.com/sug?code=utf-8&q=%E5%9B%B4%E5%B7%BE&callback=fn

发现clallback=xx 他返回你传递给他的, 可见后端获取到了这个参数(query),然后作为一部分返回给前端

3c2eb4f78c944b5a2d1508d92963149e.png

9f203246b490dde586dee1153f3a3184.png

5f367d647ffc7016b48d0ad908415ab0.png

jsonp.html

jsonp

//jsonp方式解决异源问题

function fn(data) {

console.log(data);

}

cc6f9e96d0c3448d75aee103e4944896.png

/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

返回结果

7a11d8a815fb1d510bc8bfbc289d8337.png

触发页面

var a = 12;

var b = 13;

function maotai(a,b,num) {

console.log(a,b,num);

}

访问返会结果.

b364912d5ea02c5cb1271c3da3e55c3e.png

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值