也可以用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. Jenkins 定时 构建项目

    选择要定时构建的 项目-->配置-->构建触发器 触发项目: Poll SCM:定时检查源码变更(根据SCM软件的版本号),如果有更新就checkout最新code下来,然后执行构建动作. ...

  2. 【C#】【分享】 XXX分钟学会C#

    原文地址 https://www.cnblogs.com/younShieh/p/10945264.html     前几天在刷即刻的时候发现了一个GitHub上的项目,该项目名为"lear ...

  3. JS常见的四种设计模式

    1 工厂模式 简单的工厂模式可以理解为解决多个相似的问题; function CreatePerson(name,age,sex) { var obj = new Object(); obj.name ...

  4. 09.正则表达式re-2.complie函数

    compile 函数用于编译正则表达式,生成一个 Pattern 对象,它的一般使用形式如下: import re # 将正则表达式编译成 Pattern 对象 pattern = re.compil ...

  5. (36)Spring Boot Cache理论篇【从零开始学Spring Boot】

    Spring Boot Cache理论篇 在上一篇中我们介绍了Spring Boot集成Redis的实战例子,里面使用到了Spring Cache,那么什么是Spring Cache呢,本章将会做一个 ...

  6. (25)Spring Boot使用自定义的properties【从零开始学Spring Boot】

    spring boot使用application.properties默认了很多配置.但需要自己添加一些配置的时候,我们应该怎么做呢. 若继续在application.properties中添加 如: ...

  7. confluence中设置应用程序链接到jira

    有时需要在confluence中选中文本直接生成issue或story到jira里. 在"一般配置“->“应用程序链接”中创建即可.

  8. 洛谷 P1903 BZOJ 2120 清橙 A1274【模板】分块/带修改莫队(数颜色)(周奕超)

    试题来源 2011中国国家集训队命题答辩 题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔 ...

  9. 【ACM】hdu_zs2_1003_Problem C_201308031012

    Problem C Time Limit : 2000/1000ms (Java/Other)   Memory Limit : 65536/32768K (Java/Other)Total Subm ...

  10. OpenStack开发基础-oslo.config

    The cfg Module cfg Module来自于OpenStack中的重要的基础组件oslo.config,通过cfg Module能够用来通过命令行或者是配置文件来配置一些options,对 ...