也可以用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的更多相关文章

  1. jquery实现页面局部刷新

    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...

  2. 使用ajax与iframe嵌套实现页面局部刷新

    使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.​1. [代码]javascript代码 function cj_start(depname,gr ...

  3. 浅析PHP页面局部刷新功能的实现小结(转)

    转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...

  4. Webform——页面局部刷新

    有一些数据控件,每次更改它的值后,都会重新查询数据库,然后再重新显示出来. 这样每次都会刷新全部页面,如果是一些信息量很庞大的页面,就会出现卡顿的现象,为了避免这种情况,就用到了局部刷新. 所用到的控 ...

  5. ASP.Net用jQuery ajax实现页面局部刷新

    刚开始的时候使用asp的updatepanel控件实现局部刷新,而且在本地运行正确,但是部署到服务器上就变成整个页面全部刷新了.服务器用的是Windows server2000,本地机子上用的是win ...

  6. HTML页面局部刷新

    /.事件响应刷新:有请求才会刷新 1.通过JS HTML DOM或jQuery获取HTML元素,通过DOM方法或jQuery方法监听页面事件,获取用户请求: 2.通过Ajax将用户请求提交至服务器,服 ...

  7. spring mvc + ajax上传文件,页面局部刷新

    1.点击上传按钮进行如下操作,通过表单名称以及input名称获取相应的值,对于上传的文件,使用.files来获取, 因为包含文件的上传,所以采用FormData的形式来进行数据交互,通过append将 ...

  8. pushState()、popstate事件配合ajax实现浏览器前进后退页面局部刷新

    最近研究pushState,看了网上的文章还是不怎么会用,于是自己摸索着理解使用,终于实现局部刷新同时前进后退. 首先说说pushState(),这个函数将当前的url等信息加入history堆栈中: ...

  9. AjaxAnyWhere 实现页面局部刷新,局部分页

    这个比較jquery.单纯ajax异步简单多了.不多说了直接上代码. 须要引入:ajaxanywhere-1.2.1.jar (最新)和 /ajaxAnyWhereDemo/WebRoot/js/aa ...

随机推荐

  1. (转)基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理

    http://www.cnblogs.com/wuhuacong/p/4777720.html 在很多系统模块里面,我们可能都需要进行一定的数据交换处理,也就是数据的导入或者导出操作,这样的批量处理能 ...

  2. <转>python 发送邮件实例

    文件形式的邮件 #!/usr/bin/env python3 #coding: utf-8 import smtplib from email.mime.text import MIMEText fr ...

  3. window path 的基本配置

    %JAVA_HOME%\bin;%SystemRoot%\system32;%SystemRoot%;%SystemRoot%\System32\Wbem;%SYSTEMROOT%\System32\ ...

  4. 移动端APP UI规范

  5. 【转载】使用JSONObject生成和解析json

    1. json数据类型 类型 描述 Number 数字型 String 字符串型 Boolean 布尔型 Array 数组 Object 对象 null 空值 (1)json中不区分整数.小数等类型, ...

  6. echarts 中 请求后台改变数据

    function tablenumber() { $.ajax({ type : "get", url : "../res/error.json", dataT ...

  7. C#datetime判断日期输入是否正确

    //7.输入年月日,看看格式是否正确.利用DateTime. //(1) //DateTime dt=DateTime.Now; //Console.Write("请输入现在的年:" ...

  8. [NOIP模拟赛]b

    组合数学+容斥原理 设f[i][j]表示第i个序列中的j的倍数的个数. 然后以j为gcd的贡献就是(π(f[i][j]+1) )-1 然后从大到小枚举j,删去j的倍数的贡献即可.

  9. idea整合eclipse后快捷键

  10. Git 基础教程 之 Bug分支和Stash

    在Git中,每个Bug都可以通过一个新的临时分支修复,修复后,合并分支,然后删除. ①    当接到一个Bug任务时,但dev上进行的工作还没有提交时: ②    git stash 把现场工作“储藏 ...