原生jsonp发送跨域请求

回到文章总目录
同源策略

当前打开的浏览器的url和当前页面ajax请求的url一样才叫同源
协议，端口，域名三者一样满足同源策略

使用jsonp解决跨域
script标签本身具备跨域特性,当我直接打开本地simpel.html文件的时候，那么这个文件的路径，端口，域名，都是和服务端不一致的，但是还是能够拿到服务端返回来的数据。

下面只是第一个按钮【同源发送ajax】是同源发送

下面是示例代码
1.创建在teststhirteen文件夹并在这个文件夹里面
2.创建simpel.html文件
3.创建app.js文件
4.创建server.js文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>同源和跨源</title>
</head>
<body><a href="127.0.0.1:8000/one">启动使用127.0.0.1:8000/one端口打开本网页,获取第一个按钮的数据，属于同源</a><br><button>同源发送AJAX请求</button><h3>jsonp借助script特性进行跨域</h3><p>方案一</p><p>直接使用浏览器打开本simpel.html网页,接获取到app.js文件中的数据</p><p>因为浏览器是执行javascript语言的，会自动执行本页面的代码，在下方的第二个script标签引入了app.js文件</p><p>在控制台中将会打印app.js里面的数据</p><p>方案二</p><p>使用visual studio code编辑器,在simpel页面右键打开 Open with Live Server方式打开网页</p><p>把第二个script标签仅仅只有src="app.js"的注释掉</p><p>第三个script标签的链接换下面这个，也是可以读取数据的，说明script标签可以进行跨域</p><p>http://127.0.0.1:5500/testthirteen/app.js</p><button>跨源自动获取</button><p>app.js里面的第二个</p><div id="resulttwo" style="width: 500px;height: 50px;border: solid 2px teal;"></div><p>第四个script</p><div id="resultthree" style="width: 500px;height: 50px;border: solid 2px teal;"></div><p>第六个script</p><div id="resultsix" style="width: 500px;height: 50px;border: solid 2px teal;"></div><!-- 第一个script --><script>// 把所有的按钮标签都选择const btns = document.querySelectorAll('button');// 第一个按钮btns[0].onclick = function(){// 创建变量const textone = new XMLHttpRequest();// 因为满足同源策略,url可以简写为'/data'   127.0.0.1:8000/datatextone.open("GET",'/two'); // 发送textone.send();// 绑定事件textone.onreadystatechange =function(){if(textone.readyState === 4 ){if(textone.status >= 200 && textone.status < 300){console.log(textone.response);}}}}</script><!-- 第四个script --><script>// 数据处理function handlethree (datathree){// 获取resulttwo 元素const resultthree = document.getElementById('resultthree');resultthree.innerHTML = datathree.name;};// 最后一个方框里面的数据处理// 数据处理function handlesix (datasix){// 获取resulttwo 元素const resultsix = document.getElementById('resultsix');resultsix.innerHTML = datasix.name;};</script><!-- 下方二三script只取一个      因为这个是指向获取数据链接的标签， 需要摆放在最后的script标签内，否则第四个script标签的被容会报错--><!-- 第二个script --><!-- <script src="./app.js"></script> --><!-- 第三个script --><script src="http://127.0.0.1:5500/testthirteen/app.js"></script> <!-- 第五个script标签 --><script src="http://127.0.0.1:8000/five"></script><!-- 第六个script --><script src="http://127.0.0.1:8000/six"></script>
</body>
</html>

// 一
//创建变量
const dataone ={name:'app里面的数据'
} ;
// 执行函数
console.log(dataone);// 二 所有执行代码在 本app.js文件中
const datatwo ={name:'跨源获取http://127.0.0.1:5500/testthirteen/app.js中datatwo的数据'
};
// 数据处理
function handletwo(datatwo){// 获取resulttwo 元素const resulttwo = document.getElementById('resulttwo');resulttwo.innerHTML = datatwo.name;
}
// 执行函数
handletwo(datatwo);// 三  只传递  变量与执行代码
//                  1.创建变量
//                  2.执行handlethree()函数
//                  3.另外的填入代码在simpel.html文件中
const datathree ={name:'服务端传递了1：变量的值2：执行函数'
};handlethree(datathree);

// 1. 引入express
const express = require('express');
// 2.创建对象
const app = express();
// 3.创建路由规则  里面的形参 request与response   (自己可以随便定义名字的)
//  建议写成  request与response  因为可以见名思意，方便自己看
// request  对请求报文的封装
// responst 对响应报文的封装
//  请求路径为'/server'// 一：访问simpel.html页面的路径为[127.0.0.1:8000/one]
app.all('/one', (request, response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');// 使用sendFile()函数发送// 启动服务端后，直接访问127.0.0.1:8000端口返回一个simpel.html模板页面// __dirname:意思是绝对路径,本服务端启动文件的位置response.sendFile(__dirname +'/simpel.html');
});// 二：访问[127.0.0.1:8000/two]路径获取字符串数据
app.all('/two', (request, response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');response.send('127.0.0.1:8000/two链接返回来的字符串格式数据');
});
// html第五个标签获取的数据
app.all('/five', (request, response)=>{response.setHeader('Access-Control-Allow-Origin','*');response.setHeader('Access-Control-Allow-Headers','*');response.send("console.log('第五个script标签链接，这里返回去给浏览器的是一个执行类型的json代码，而不是数据')");
});
// html第六个标签获取数据
app.all('/six',(request,response)=>{const datasix = {name: 'fetch函数通用ajax请求的post请求方法，服务端设置了json格式返回'};// 把数据转化为字符串let str = JSON.stringify(datasix);// 下面这里的代码注意了[`]为键盘esc下方的符号response.end(`handlesix(${str})`);
});// 4. 监听端口启动服务
// 这里listen(8000)后面添加了一个回调，用来提示，告诉自己是否监听成功
app.listen(8000, ()=>{console.log("本条信息为回调，说明服务已经启动，8000端口监听中......");
});

原生jsonp发送跨域请求相关推荐

自定义原生jsonp跨域请求
由于同源策略,跨域(协议.域名.端口均相同的为同域)之间是不允许请求资源的,但是scrapt标签不收跨域约束,如论是jQuery中的jsonp还是angularjs中的jsonp都是通过script来 ...
原生JS实现Ajax和JSONP跨域请求
背景: 对接身份证录入和门锁卡号录入设备中,安装驱动完成后,提供的接口服务是http://localhost:8099/?cmd=readbcardid&charset=gbk,返回的数据格式 ...
Vue（八）发送跨域请求
使用vue-resource发送跨域请求 axios不支持跨域 1 安装vue-resource并引入 cnpm install vue-resource -S 2 基本用法使用this.$http ...
JS的jsonp是什么？5分钟学会jsonp跨域请求
一.jsonp是什么? jsonp是解决跨域请求的一种技术.浏览器为了防止CSRF攻击会采用同源策略(协议/主机/端口均相同)限制,对非同源发起http请求(即跨域请求)会被浏览器阻止. 二.json ...
IE8和IE9发送跨域请求
IE8和IE9跨域请求"拒绝访问" 页面中偶尔会有跨域的需求,之前使用过jsonp格式的,但是这次后端提供了可以跨域访问的接口. 接口表现如下: 1.在谷歌浏览器和火狐浏览器上正常 ...
java学习笔记——众筹项目练习——前台系统的实名认证功能、ajax发送跨域请求、后台manager系统的实名认证人工审核
实名认证功能前面的文章中我们实现了后台manager系统中的流程管理功能,并且将实名认证的流程上传到 ...
.net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
JSONP跨域请求数据报错 “Unexpected token :”的解决办法
原文 http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 "Uncaught SyntaxError ...
Jsonp 跨域请求实例
Jsonp 跨域请求实例关于jsonp的一个实例,其实自己也不是很了解,今天下午稍微研究了一下: 简单来说,jsonp就是为了两个不同网站之间数据传递而产生的,主要用于js脚本,因为浏览器本身是禁止 ...

原生jsonp发送跨域请求

原生jsonp发送跨域请求相关推荐

最新文章

热门文章