从实现HTML页面局部刷新到JSONP
也可以用iframe方法发get请求,但是目前iframe基本已经被弃用,所以此处就不介绍这个方法。
方案一:用图片造 get 请求
button.addEventListener('click', function(e){
let image = document.createElement('img')
image.src = '/pay'
image.onload = function(){ // 状态码是 200~299 则表示成功
alert('成功')
}
image.onerror = function(){ // 状态码大于等于 400 则表示失败
alert('失败')
}
})
方案二:用 script 造 get 请求
- 用script发请求有个问题,不管成功或者失败,都会生成一个<script>并执行其中的内容。
button.addEventListener('click', function(e){
let script = document.createElement('script')
script.src = '/pay'
document.body.appendChild(script) //一定要.body
script.onload = function(e){ // 状态码是 200~299 则表示成功
//删除新生成的<script>
e.currentTarget.remove()
}
script.onerror = function(e){ // 状态码大于等于 400 则表示失败
e.currentTarget.remove()
}
})
//后端代码
...
if (path === '/pay'){
let amount = fs.readFileSync('./db', 'utf8')
amount -=
fs.writeFileSync('./db', amount)
response.setHeader('Content-Type', 'application/javascript')
//如果是image发请求,上一列最后一个参数'image/png',并且需要write传入一个真的图片才能成功
response.write('amount.innerText = ' + amount)
response.end() }
...
方案三:JSONP
button.addEventListener('click', (e)=>{
let script = document.createElement('script')
let functionName = 'dsfnd'+ parseInt(Math.random()* ,)
window[functionName] = function(){ // 每次请求之前搞出一个随机的函数
amount.innerText = amount.innerText - -
}
script.src = '/pay?callback=' + functionName
document.body.appendChild(script)
script.onload = function(e){ // 状态码是 200~299 则表示成功
e.currentTarget.remove()
delete window[functionName] // 请求完了就kill掉这个随机函数
}
script.onload = function(e){ // 状态码大于等于 400 则表示失败
e.currentTarget.remove()
delete window[functionName] // 请求完了就kill掉这个随机函数
}
})
//后端代码
...
if (path === '/pay'){
let amount = fs.readFileSync('./db', 'utf8')
amount -=
fs.writeFileSync('./db', amount)
let callbackName = query.callback
response.setHeader('Content-Type', 'application/javascript')
response.write(`
${callbackName}.call(undefined, 'success')
`)
response.end()
}
...
请求方:aaa.com 的前端程序员(浏览器)
响应方:bbb.com 的后端程序员(服务器)
假设有aaa.com、bbb.com 两个网站,aaa.com的前端想要访问bbb.com 的后端,aaa.com的前端可在请求的“/pay”前面加上bbb.com 的域名。通过跨域SRG。
后端不需要太了解前端的代码,如果太了解,就叫前端后端耦合,需要解耦。
解耦的方法:后段调用前端提供的一个函数。 什么是JSONP?
请求方创建 script,src 指向响应方,同时传一个查询参数 ?callbackName=yyy
响应方根据查询参数callbackName,
构造形如 yyy.call(undefined, '你要的数据') yyy('你要的数据') 这样的响应
浏览器接收到响应,就会执行 yyy.call(undefined, '你要的数据')
请求方就知道了他要的数据
这就是 JSONP 。简单说就是script加callback参数。
JSONP的主要方法是通过动态创建<script>
标签并配置的src
属性,然后加入页面,触发浏览器加载并执行相应的 JavaScripts 代码,以实现无刷新数据交互的效果。
约定:
callbackName -> callback
yyy -> 随机数 frank12312312312321325()
方案四:jQuery
$.ajax({
url: "http://jack.com:8002/pay",
dataType: "jsonp",
success: function( response ) {
if(response === 'success'){
amount.innerText = amount.innerText -
}
}
}) $.jsonp()
JSONP 为什么不支持 POST?
因为JSONP是通过动态创建Script实现的,动态创建Script的时候只能用GET,不能用POST。
从实现HTML页面局部刷新到JSONP的更多相关文章
- jquery实现页面局部刷新
后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...
- 使用ajax与iframe嵌套实现页面局部刷新
使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.1. [代码]javascript代码 function cj_start(depname,gr ...
- 浅析PHP页面局部刷新功能的实现小结(转)
转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...
- Webform——页面局部刷新
有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控 ...
- ASP.Net用jQuery ajax实现页面局部刷新
刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...
- HTML页面局部刷新
/.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服 ...
- spring mvc + ajax上传文件,页面局部刷新
1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...
- pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新
最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...
- AjaxAnyWhere 实现页面局部刷新,局部分页
这个比較jquery.单纯ajax异步简单多了.不多说了直接上代码. 须要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa ...
随机推荐
- (转)基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理
http://www.cnblogs.com/wuhuacong/p/4777720.html 在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能 ...
- <转>python 发送邮件实例
文件形式的邮件 #!/usr/bin/env python3 #coding: utf-8 import smtplib from email.mime.text import MIMEText fr ...
- window path 的基本配置
%JAVA_HOME%\bin;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\ ...
- 移动端APP UI规范
- 【转载】使用JSONObject生成和解析json
1. json数据类型 类型 描述 Number 数字型 String 字符串型 Boolean 布尔型 Array 数组 Object 对象 null 空值 (1)json中不区分整数.小数等类型, ...
- echarts 中 请求后台改变数据
function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...
- C#datetime判断日期输入是否正确
//7.输入年月日,看看格式是否正确.利用DateTime. //(1) //DateTime dt=DateTime.Now; //Console.Write("请输入现在的年:" ...
- [NOIP模拟赛]b
组合数学+容斥原理 设f[i][j]表示第i个序列中的j的倍数的个数. 然后以j为gcd的贡献就是(π(f[i][j]+1) )-1 然后从大到小枚举j,删去j的倍数的贡献即可.
- idea整合eclipse后快捷键
- Git 基础教程 之 Bug分支和Stash
在Git中,每个Bug都可以通过一个新的临时分支修复,修复后,合并分支,然后删除. ① 当接到一个Bug任务时,但dev上进行的工作还没有提交时: ② git stash 把现场工作“储藏 ...