jsonp | 易学教程

Ajax底层原理与jQuery中的Ajax

阅读更多关于 Ajax底层原理与jQuery中的Ajax

Ajax 是异步的xml 和javascript，是一种综合技术。利用 XMLHttpRequest(xhr)和后端进行数据交换。通过js 动态的渲染页面实现网页异步局部更新同步与异步同步代码会按顺序执行，当前面代码未执行完毕，后续代码不会执行，会阻塞代码执行异步不会阻塞代码 XMLHttpRequest(xhr) 创建xml对象 var xhr = new XMLHttpRequest(); 打开HTTP连接 xhr.open(method,url,aync=true) 监听xhr的变化 xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); p.innerHTML = xhr.responseText; } } 设置头信息 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 发送数据 xhr.send(); GET //建立一个xhr对象 var xhr = new XMLHttpRequest(); //打开的方法，地址，是否异步 xhr.open("GET","./be.txt",true); xhr.send()

九种跨域方式实现原理（完整版）

阅读更多关于九种跨域方式实现原理（完整版）

前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳 github博客，纸上得来终觉浅，建议大家动手敲敲代码。一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。同源策略限制内容有： Cookie、LocalStorage、IndexedDB 等存储性内容 DOM 节点 AJAX 请求发送后，结果被浏览器拦截了但是有三个标签是允许跨域加载资源： <img src=XXX> <link href=XXX> <script src=XXX> 2.常见跨域场景当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。常见跨域场景如下图所示：特别说明两点：第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。第二：在跨域问题上，仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 。这里你或许有个疑问：请求跨域了，那么请求到底发出去没有？跨域并不是请求发不出去

原生js实现图片瀑布流布局，注释超详细

阅读更多关于原生js实现图片瀑布流布局，注释超详细

完整代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>瀑布流</title> <style type="text/css"> img { width: 300px; } li { position: absolute; s left: 0 ; top: 0 ; list - style: none; } ul { margin: 0 auto; position: relative; } * { margin: 0 ; padding: 0 ; } </style> </head> <body> <ul></ul> </body> <script src="utils.js"></script> <script> let ul = document.querySelector('ul'), // 获取ul标签 list = ul.children, // 动态更新ul里面的子元素 teep = 10, // 间距 width = 300, // 每张图片的宽度 cols = Math.floor(document.documentElement

Python——爬取人口迁徙数据（以腾讯迁徙为例）

阅读更多关于 Python——爬取人口迁徙数据（以腾讯迁徙为例）

说明： 1.迁徙量是腾讯修改后的数值，无法确认真实性。 2.代码运行期间，腾讯迁徙未设置IP屏蔽和浏览器检测，因此下段代码仅能保证发布近期有效。 3.代码功能：爬取指定一天的四十（此四十是根据自己的城市列表而定，可多可少，并无限制）个城市左右的迁徙量（含迁入、迁出）。 1 import re 2 import urllib.request 3 import xlwt 4 import xlrd 5 6 date = " 20171016 " 7 cityList = xlrd.open_workbook( " E:/city.xls " ).sheet_by_index(0).col_values(0) # ['city', '南昌', '景德镇', '萍乡', ... 8 cityCodeList = xlrd.open_workbook( " E:/city.xls " ).sheet_by_index(0).col_values(1) # ['cityCode', '360100', '360200',... 9 direction = [ " 0 " , " 1 " ] 10 header = [ " from " , " to " , " number " , " car " , " train " , " plane " ] 11 dInd = 0 12 for

1.7 xss之同源策略与跨域访问

阅读更多关于 1.7 xss之同源策略与跨域访问

同源策略：同源策略在web应用的安全模型中是一个重要概念。在这个策略下，web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。源是由URI，主机名，端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。对于普遍依赖于cookie维护授权用户session的现代浏览器来说，这种机制有特殊意义。客户端必须在不同站点提供的内容之间维持一个严格限制，以防丢失数据机密或者完整性。源决定规则 RFC6454 中有定义URI源的算法定义。对于绝对的URIs，源就是{协议，主机，端口}定义的。只有这些值完全一样才认为两个资源是同源的。为了举例，下面的表格给出了与URL " http://www.example.com/dir/page.html " 的对比。对比URL 结果结果 http://www.example.com/dir/page2.html 同源相同的协议，主机，端口 http://www.example.com/dir2/other.html 同源相同的协议，主机，端口 http://username:password@www.example.com/dir2/other.html 同源相同的协议，主机，端口 http://www.example.com:81/dir

博客园某开源主题暗藏私货？

阅读更多关于博客园某开源主题暗藏私货？

2020/05/13 14:50更新在评论的驱使下我仔细去看了下，有几处确实用到了后端接口 loadBlogTalk: (page) => { return forwardXmlJsonp("https://ing.cnblogs.com/u/" + blogConst.blogAcc + "/" + page, parseTalkList); }, loadBlogSearch: (keyword) => { return forwardXmlJsonp("https://zzk.cnblogs.com/s/blogpost?w=" + encodeURI("blog:" + blogConst.blogAcc + " " + keyword), parseSearchKeyWord); }, loadFollowers: (page) => { let url = "https://home.cnblogs.com/u/" + blogConst.blogAcc + "/relation/followers/"; if (page && page > 1) { url += "?page=" + page; } return forwardXmlJsonp(url, parseFollowers); }, 这三个接口是走的php后端的api，理由是能自洽的

vue处理跨域

阅读更多关于 vue处理跨域

1.什么是跨域跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域。协议跨域 http://a.baidu.com访问https://a.baidu.com；端口跨域 http://a.baidu.com:8080访问http://a.baidu.com:80；域名跨域 http://a.baidu.com访问http://b.baidu.com； 2.跨域产生的背景现在很多公司都是采用前后分离的方式开发，那么出现经常和会跨域打交道。跨域的处理方案： A. Jsonp(只能处理Get请求)，B. cors(后端开启)，C. 代理服务器(vue项目中vue.config.js中配置) 下面我详细讲讲第三种代理服务器方式。假设请求的API地址：https://localhost:44369/api/Index/GetMuserList 配置在vue.config.js中的内容，配置好之后要Ctrl+C取消，然后cnpm run dev重启前端服务 module . exports = { devServer : { host : 'localhost' , //前端地址 port : 8081 , // 前端端口号 open : true , //自动启动浏览器 proxy : { // 配置跨域处理

博客园某开源主题暗藏私货？

阅读更多关于博客园某开源主题暗藏私货？

React.lazy懒加载组件

阅读更多关于 React.lazy懒加载组件

1. React.lazy的用法 React.lazy方法可以异步加载组件文件。 const Foo = React.lazy(() => import('../componets/Foo)); React.lazy不能单独使用，需要配合React.suspense，suspence是用来包裹异步组件，添加loading效果等。 <React.Suspense fallback={<div>loading...</div>}> <Foo/> </React.Suspense> 2. React.lazy原理 React.lazy使用import来懒加载组件，import在webpack中最终会调用requireEnsure方法，动态插入script来请求js文件，类似jsonp的形式。来源： oschina 链接： https://my.oschina.net/u/4266023/blog/4279013

jq使用jsonp实现百度搜索

阅读更多关于 jq使用jsonp实现百度搜索

项目实现：还原百度搜索功能；项目原理：利用json回调页面传参; 什么是jsonp ：就是利用<script>标签的src地址，让目标页面回调本地页面，并且带入参数，也解决了跨域问题；代码如下： html（css代码不提供） 1 < div class ="box" > 2 < input type ="text" /> 3 < div class ="ssk" ></ div > 4 < button > × </ button > 5 </ div > js 1 var script,ids; 2 $(".box>input").on("input" ,inputHandler) 3 function inputHandler(e){ 4 if (ids) return ; 5 ids = setTimeout( function () {//节流 6 clearTimeout(ids); 7 ids=0 ; 8 if (script) { // 删除上一次创建script标签 9 script.remove(); 10 script = null ; 11 } 12 script=$("<script><\/script>").attr("src",`https: // sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=

订阅 jsonp