Ajax的JSONP解决跨域详解

来源：互联网发布：淘宝事变编辑：程序博客网时间：2024/06/02 04:18

ajax的jsonp实现跨域

- 原由

由于ajax的是通过XMLHttpRequest对象请求数据的，在同源的条件（协议，域名，端口号都相同）下，这没什么问题，但在不同源的情况下，浏览器是不允许XMLHttpRequest对象跨域请求的，所以便提出很多实现跨域的方案，如iframe，jsonp等方法，但jsonp最常用，其实jquery的$.ajax跨域请求就是通过jsonp实现的

- json详解

1.前端代码

<script>    function jsonp(url, arg, fn) {        //1.动态创建script标签，设置src属性            //1.1 地址请求格式： url?page=1&count=10&callback=fn        var srpt = document.createElement('script');        var queryString = '';        for (var key in arg) {            queryString += key + '=' + arg[key] + '&';        }        var funName = 'fun_' + Math.random().toString().substr(3);        window[funName] = fn;        url += '?' + queryString;        url += 'callback=' + funName;        srpt.src = url;     //2.将创建好的script标签添加到页面上        document.body.appendChild(srpt);    }    //url:"",arg:{},callback    jsonp('http://127.0.0.1:3000/home.js', {page: 1, count: 10},            function (data) {                console.log(data.age,1);            }    );//jsonp调用，请求http://127.0.0.1:3000/home.js?age=1&count=10&callback=fun_562156256(函数名是随机生成的，相应回来后，通过该回调函数处理取回的数据)    jsonp('http://127.0.0.1:3000/home.js', {page: 1, count: 10},            function (data) {                console.log(data.age,2);            }    );</script>

后端服务器代码

const express = require('express');const app = express();app.get('/home.js',(req,res)=>{    var funName  = req.query.callback;    res.send(funName+"({name:'jack',age:21,sex:'男'})");});app.listen(3000);

0 0