前端請求進化之路--從form表單到JSONP

簡單梳理前端請求的變遷史,著重對JSONP進行整理


請求演變

  1. 使用form表單提交請求,缺點是每次提交必定會刷新頁面
  2. 在1基礎之上使用iframe進行局部刷新,用戶體驗得到一定優化
  3. 動態創建圖片提交請求
    • 注意請求與返回內容類型須一致
    • 每次必須返回圖片較為不便
  4. 動態創建script提交請求(即JSONP)
    • 注意script必須在插入頁面后(可使用append方法)才會提交請求
    • 為了不刷新頁面可依據后端數據庫變化情況同時對前端頁面內容進行同步更新
    • script載入完成后可將其移除
    • 提交請求時可直接講callback值傳入

JSONP定義:

  1. 請求方創建 script,src 指向響應方,同時傳一個查詢參數 ?callback=xxx

  2. 響應方根據查詢參數 callback,構造形如

    • xxx.call(undefined, '你要的數據')
    • xxx('你要的數據')

    這樣的響應

  3. 瀏覽器接收到響應,就會執行 xxx.call(undefined, '你要的數據')

  4. 那么請求方就知道了他要的數據

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/539570.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/539570.shtml
英文地址,請注明出處:http://en.pswp.cn/news/539570.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

Spring IOC容器-注解的方式【更簡化】

----更加簡化的版本 UserAction.java import javax.annotation.Resource;import org.springframework.stereotype.Component; import org.springframework.stereotype.Controller;//Component("userAction") // 加入IOC容器//ComponentController // 控制層的組件…

hive安裝mysql驅動_Hadoop-2.6.0為基礎的Hive安裝

Hive安裝軟件需求與環境說明假設已經搭建好 Hadoop-2.6.0 環境,并能正常運行mysql 安裝軟件服務端:MySQL-server-5.5.16-1.rhel5.x86_64.rpm客戶端:MySQL-client-5.5.16-1.rhel5.x86_64.rpmhive安裝軟件:apache-hive-1.2.1-bin.ta…

視頻通信原理——NAT介紹

一:為什么需要NAT由于IP地址隨著互聯網的發展而逐漸稀缺,難以使得每臺主機都擁有一個公網上的IP地址,且并不是所有主機都需要一個公網上的地址,于是就有了NAT技術。NAT(The IP Network Address Translator)…

Oracle中執行存儲過程call和exec區別

在sqlplus中這兩種方法都可以使用: exec pro_name(參數1..); call pro_name(參數1..); 區別: 1. 但是exec是sqlplus命令,只能在sqlplus中使用;call為SQL命令,沒有限制. 2. 存儲過程沒有參數時,exec可以直接跟過…

java和cnc_Java程序員的目標,你都達到了多少條?

該樓層疑似違規已被系統折疊 隱藏此樓查看此樓7.你需要學習Servlets,JSP,以及JSTL(StandardTagLibraries)和可以選擇的第三方TagLibraries。8.你需要熟悉主流的網頁框架,例如JSF,Struts,Tapestry,Cocoon&am…

每秒處理10萬訂單樂視集團支付架構

原文:http://www.iteye.com/news/31550 ----------- 隨著樂視硬件搶購的不斷升級,樂視集團支付面臨的請求壓力百倍乃至千倍的暴增。作為商品購買的最后一環,保證用戶快速穩定的完成支付尤為重要。所以在15年11月,我們對整個支付…

X--名稱空間詳解

轉自:http://blog.csdn.net/lisenyang/article/details/18312039 X名稱空間里面的成員(如X:Name,X:Class)都是寫給XAML編譯器看的、用來引導XAML代碼將XAML代碼編譯為CLR代碼。 4.1X名稱空間里面到底都有些什么? x名稱空間映射的是:http://schemas.microsoft.com/wi…

事物 php,什么是php事務

事務:用于保證數據的一致性,他由一組相關的dml語句組成,改組的dml語句要么全部成功,要么全部失敗。當前版本的插件并不是事務安全的,因為他并沒有識別全部的事務操作。SQL 事務單元是在單一服務器中運行的。插件并不能…

那些年,在nodejs上踩過的坑

原文:http://cnodejs.org/topic/4fc7789a8be5d070121141cd ----------------------------------------------------------- 自己寫nodejs也有一段時間,踩過很多坑(而且大部分是自己給自己埋),也見過很多別人踩過的坑&…

Flask form(登錄,注冊)

用戶登錄 from flask import Flask, render_template, request, redirect from wtforms import Form from wtforms.fields import core from wtforms.fields import html5 from wtforms.fields import simple from wtforms import validators from wtforms import widgetsapp …

substr php,PHP substr() 函數

更多實例例子 1使用帶有不同正負數的 start 參數&#xff1a;<?phpecho substr("Hello world",10)."";echo substr("Hello world",1)."";echo substr("Hello world",3)."";echo substr("Hello world&quo…

怎么看so文件是哪個aar引進來的_手機愛奇藝下載視頻存在哪個文件夾

我們很多朋友喜歡看視頻使用愛奇藝觀看&#xff0c;并且喜歡直接把視頻緩沖到手機里&#xff0c;或是直接下載視頻文件&#xff0c;但是經常不知道手機愛奇藝下載視頻存在哪個文件夾&#xff0c;不知道怎么分享給好友或是傳到電腦上&#xff0c;下面就來簡單介紹一下。手機愛奇…

Node.js 異步編程之 Callback介紹

原文&#xff1a;http://www.jb51.net/article/63070.htm ------------------------------------- Node.js 基于 JavaScript 引擎 v8&#xff0c;是單線程的。Node.js 采用了與通常 Web 上的 JavaScript 異步編程的方式來處理會造成阻塞的I/O操作。在 Node.js 中讀取文件、訪問…

php雙向鏈表+性能,PHP雙向鏈表定義與用法示例

本文實例講述了PHP雙向鏈表定義與用法。分享給大家供大家參考&#xff0c;具體如下&#xff1a;由于需要對一組數據多次進行移動操作&#xff0c;所以寫個雙向鏈表。但對php實在不熟悉&#xff0c;雖然測試各個方法沒啥問題&#xff0c;就是不知道php語言深層的這些指針和unset…

反擊爬蟲,前端工程師的腦洞可以有多大?

對于一張網頁&#xff0c;我們往往希望它是結構良好&#xff0c;內容清晰的&#xff0c;這樣搜索引擎才能準確地認知它。 而反過來&#xff0c;又有一些情景&#xff0c;我們不希望內容能被輕易獲取&#xff0c; 前言 比方說電商網站的交易額&#xff0c;教育網站的題目等。因為…

Spring與Struts框架整合

Spring&#xff0c;負責對象對象創建 Struts&#xff0c;用Action處理請求 Spring與Struts框架整合&#xff0c;關鍵點&#xff1a;讓struts框架action對象的創建&#xff0c;交給spring完成&#xff01; 1.步驟&#xff1a; 引入jar文件 1&#xff09;引入struts .jar相關文件…

esxi能直通的顯卡型號_顯卡刷bios教程

一般來說顯卡默認的出廠bios就已經很穩定&#xff0c;如果沒有特殊情況下建議不要刷顯卡bios。一般而言部分網友刷顯卡BIOS目的是開核或超頻&#xff0c;那么對于一個不會刷顯卡bios的網友來說肯定會問顯卡怎么刷bios類似的問題&#xff0c;那么本文這里就說一下有關顯卡怎么刷…

關于Linux網卡調優之:RPS (Receive Packet Steering)

昨天在查LVS調度均衡性問題時&#xff0c;最終確定是 persistence_timeout 參數會使用IP哈希。目的是為了保證長連接&#xff0c;即一定時間內訪問到的是同一臺機器。而我們內部系統&#xff0c;由于出口IP相對單一&#xff0c;所以總會被哈希到相同的RealServer。 過去使用LVS…

footer.php置底,CSS五種方式實現Footer置底

頁腳置底(Sticky footer)就是讓網頁的footer部分始終在瀏覽器窗口的底部。當網頁內容足夠長以至超出瀏覽器可視高度時&#xff0c;頁腳會隨著內容被推到網頁底部&#xff1b;但如果網頁內容不夠長&#xff0c;置底的頁腳就會保持在瀏覽器窗口底部。方法一&#xff1a;將內容部分…

安卓adapter適配器作用_自帶安卓系統的便攜屏,能玩出什么花樣?

之前說到去年出差太多&#xff0c;平常就把便攜屏帶上了。之前也說了如果是像筆者這樣的出差狗也知道&#xff0c;托運需要提前去機場一路著急忙慌&#xff0c;不托運只需要打印登機牌(紙質才給報銷)排隊安檢登機就完了。有的時候可以把標準顯示器來回寄&#xff0c;只要包裝強…