Json學習筆記

来源:http://www.cnblogs.com/neco/archive/2016/12/13/6168046.html
-Advertisement-
Play Games

一.昨天內容回顧 a) 主流瀏覽器 new XMLHttpRequest(); b) IE瀏覽器 new ActiveXObject(“Msxml2.XMLHTTP.6.0”); 屬性:responseText/responseXML readyState onreadystatechange 方法 ...


一.昨天內容回顧

  1. 創建ajax對象

a) 主流瀏覽器  new  XMLHttpRequest();

b) IE瀏覽器  new ActiveXObject(“Msxml2.XMLHTTP.6.0”);

  1. 常用屬性和方法

屬性:responseText/responseXML   readyState  onreadystatechange

方法:open(方式,url地址,true/false)   send()   setRequestHeader()

  1. get請求和post請求

get請求:

傳遞參數 url地址後邊請求字元串、中文/特殊符號需要編碼處理

post請求:

傳遞參數send(參數)

調用setRequestHeader()把數據組織為xml格式

中文不需要編碼,特殊符號需要編碼

同時可以傳遞get參數信息,使用$_GET接收

  1. 非同步、同步請求

open(方式,url地址,[非同步true]/同步false)

非同步:同一時間允許執行多個進程

同步:同一時間允許執行一個進程

 

  1. 無刷新分頁效果實現

① 傳統分頁效果實現

② ajax去封裝傳統分頁

  1. xml接收和處理

ajax+javascript合作實現xml的接收和處理

ajax屬性 responseXML 接收xml信息

文檔對象 和 普通元素節點對象 都可以調用getElementByTagName()方法

  1. 緩存處理

① 給請求的地址設置隨機數

② 給動態程式頁面設置header頭,禁止瀏覽器緩存

JSON

1. 什麼是json

json: javascript  object  notation(javascript對象符號)

其是我們之前學過js的“字面量對象”

其是一種數據交換格式(之前的xml也是數據交換格式)。

img 

天氣官網伺服器對外提供的“門戶網站”需要供兩部分用戶訪問:普通大眾、企業網站

其中的企業網站並不會對我們天氣網站產生廣告效益,其只會白白浪費我們許多流量。

這樣我們需要做優化處理。

img

 

 

 

為了方便企業網站使用天氣信息,把天氣信息專門通過一個”介面”給提供出來,該介面的信息專門是天氣信息,數據量可以控制。

 

通過介面給企業網站提供天氣信息,需要考慮各個企業網站語言如何方便、快速地接收該接收並解析該介面信息。這樣介面信息提供出來就需要組織為特定的格式,該格式可以是xml或json。

 

 

介面專門負責提供天氣預報信息:

img 

http://php.weather.sina.com.cn/iframe/index/w_cl.php?code=js&day=0&city=&dfc=1&charset=utf-8

 

之前企業網站需要獲得天氣信息,通常會把天氣預報官網首頁的全部信息都給請求回來,但是只是在裡邊獲得很少的天氣信息,這樣做對帶寬、天氣官網的伺服器、用戶等待時間的消耗比較嚴重。

這個事件做優化處理:天氣預報網站伺服器把天氣信息做成一個數據介面提供出來,好處是企業網站每次請求天氣信息的帶寬變小、請求速度加快,天氣預報網站伺服器的負載得到控制。

 

為了各種語言(java/php/.net/javascript)的網站用戶方便使用該數據介面,其介面的數據格式最好是大家都可以識別的,因此json/xml就被應用上了。

json的生成和處理要比xml更加方便,因此在許多領域json正逐步取代xml的使用。

2. json的使用

2.1 javascript裡邊json體現

json在javascript裡邊就是字面量對象

var obj = {名稱:值,名稱:值,名稱:function(){}}

2.2 通過php生成json信息

json_encode(數組/對象)------------>生成json信息

json_encode(關聯數組)---->json對象

json_encode(索引數組)---->js數組

json_encode(索引關聯數組)---->json對象

json_encode(對象)---->json對象

各數組/對象生成的json信息如下圖:

img 

2.**3 php處理json信息**

接收到Json信息之後,要解析信息,就要反編碼處理:

json_decode(json信息,boolean); 反編碼json信息

對json字元串信息進行反編碼,變為當前語言可以識別的信息。

json_decode(json字元串,true)--->array

json_decode(json字元串,[false])--->object

  
  img

 

 

純json字元串反編碼操作註意:單引號,並且要加true!

img 

 

2.4 javascript接收處理json信息

ajax獲得介面信息,javascript本身處理json信息

通過eval()把接收的json字元串變成真實的對象信息

如何把一個js的字元串變為object對象:

img 

 

 

ajax和javascript合作實現json信息接收處理:使用eval函數

 

img 

 

伺服器端json介面數據:

 

img 

 

3. json改造ajax無刷新分頁

imgimgimg 

imgimg 

 

① ajax的每次請求都要從伺服器獲得三部分信息,對 帶寬、伺服器資源、用戶等待時間 等資源都要占據三份,我們要做優化:把不發生變化的css樣式、html標簽 放到客戶端手動生成,從而減輕伺服器端的工作、減輕帶寬浪費。

② 每次回來的分頁數據是“整個一個大的部分”,數據的解析、拆分非常不靈活

 

此時伺服器端數據可以通過json格式傳遞迴來(之前是html標簽格式)

img 

二維數組生成json信息的效果:

img 

 

 

 

 

 

 

 

 

 

 

 

 

 

在伺服器端把數據組織為json格式提供出來,在客戶端解析json並把信息組織到html標簽裡邊用於顯示:

img 

 

在設置遍曆數據庫信息的時候可以加上標簽到分頁上。Nmpk在頁面上。

二.無刷新表單信息提交

表單:登錄系統、註冊會員都有表單

傳統的form表單頁面實現submit提交的時候,瀏覽器會根據form標簽的action屬性值做頁面跳轉。

頁面經常跳轉會降低用戶體驗效果

有的網站有需求:登錄或註冊表單提交的時候,實現無刷新方式信息的傳送。以便提高用戶體驗

 

傳統方式dom+ajax無刷新收集、提交form表單信息:

img 

頁面沒有刷新,就把數據提交給伺服器:

img 

 

1. 收集表單信息

傳統方式收集表單信息,需要寫許多重覆的代碼(document.getElementById)和拼裝長串的請求信息,非常不方便開發、維護。

那麼我們要使用新技術FormData實現數據收集。

利用新技術FormData表單數據對象,可以實現快速收集表單信息。

FormData是html5的新技術,在主流瀏覽器都可以正常使用。

 

利用FormData收集數據:(evt和return false都可以阻止瀏覽器表單提交動作)

img 

 

實現效果:

img 

總結:

  1. json數據交換格式

php生成/解析json:

json_encode()

json_decode(json字元串,true/[false])

JS解析json:

eval(“var 名稱=”+json字元串)  

  1. json改造ajax無刷新分頁

之前ajax分頁:伺服器通過html標簽組織一個“整個的分頁”數據回來,該數據不能靈活拆分,內部還有許多固定的內容(html標簽和css樣式)

json改造:只從伺服器獲得數據信息、信息是通過json對象回來的其解析和處理非常靈活。

 

  1. FormData快速收集表單信息

var fd = new FormData(form標簽的元素節點對象)

2. ajax無刷新附件上傳

dom可以獲取普通表單域信息,並可以直接提交給伺服器

javascript實現附件信息抓取,之前瀏覽器技術由於有安全方面的限制,也不允許通過js抓取附件信息。

FormData可以實現普通表單域 和 上傳文件域 信息的收集。

 

附件上傳相關技術點:

 

 

伺服器端:$_FILES接收附件信息(name/error/size/type/tmp_name)

​ error:

​ 0---->ok

​ 1---->大小超出php.ini限制

​ 2---->大小超出MAX_FILE_SIZE表單域限制

​ 3---->附件只上傳了一部分

​ 4---->沒有上傳附件

 

move_uploaded_file(附件臨時路徑名tmp_name,真實附件路徑名);

 

收集附件信息:

​ dom方式只可以收集普通的表單域信息,並且瀏覽器由於安全方面的限制也禁止通過javascript語言操作本地文件。

 

可以利用FormData實現附件信息的收集:普通表單域 和 上傳文件域 均可以收集。

FormData收集到普通表單域 和 上傳文件域信息:

img 

 

客戶端具體實現:

 img

 

伺服器端代碼:

img 

2.1 使用FormData註意:

① 每個表單域必須有name屬性

② 在form標簽裡邊無需設置enctype=”multipart/form-data”屬性(即使有上傳文件域也不需要設置)

③ ajax通過post方式傳遞FormData的數據不需要設置setRequestHeader()方

④ 普通表單域的特殊符號無需編碼

3. 上傳大附件進度條設置

3.1 php.ini開放大附件上傳限制

img 

 

img 

 

3.2 進度條具體設置

img 

 

onprogress事件每間隔100ms左右就執行一次:

img 

 

onprogress感知附件上傳情況:

img 

 

進度條客戶端實現:

img 

 

. ajax聊天室

1. 分析

買火車票,在電腦上下單,在手機上支付寶支付,支付成功後,電腦上也顯示支付成功。

利用”反向推技術”。 電腦瀏覽器不間斷向伺服器發起請求判斷車票是否有付款。

如果手機付款成功,則電腦上會立即顯示訂單支付成功的狀態。

反向推技術就是輪詢技術,在客戶端每間隔一定時間就去完成一定的任務。

img 

 

 

2. 及時顯示聊天消息

每間隔2s就獲取一次聊天消息,但是不要獲取重覆的數據。

解決:把已經獲取消息的最大id值 回傳給伺服器端,並做“對比”查詢。

 

給消息表寫入數據:

img 

 

伺服器端獲取最新的聊天消息:

img 

 

客戶端ajax獲取並顯示最新聊天消息:

img 

 

3. 發表聊天信息

客戶端代碼:

img 

 

伺服器端代碼:

img 

4. 聊天室優化

4.1 設置滾動條,避免信息溢出(高度height/溢出屬性overflow)

img 

效果:

img 

 

4.2 追加新的聊天內容的時候,滾動條始終在最下邊顯示

div.scrollHeight   獲得div高度(包括滾動高度)

div.scrollTop = div.scrollHeight      設置滾動條捲起的高度

img 

img 

四.天氣預報設置

講解內容:

① ajax不能跨域訪問(可以利用php代碼)

② 天氣預報顯示原理

 

img 

img 

瀏覽器由於安全方面的問題,禁止ajax跨域請求其他網站的數據。

解決:利用本域php代理間接獲得其他網站的數據。

img 

** **

天氣信息獲取註意事項****

不同地區需要顯示該地區對應的天氣信息。

 

ip地址------->城市------->城市編碼

① 通過ip地址 獲得 城市信息

http://ip.taobao.com/service/getIpInfo.php?ip=9.9.9.9

② 通過城市 獲得 城市編碼

③ 通過城市編碼 獲得天氣信息

http://www.weather.com.cn/adat/sk/城市編碼.html

 

www.tianqi.com網站已經把 ip/城市/編碼 的關係都給處理好了,可以直接調用獲得城市對應的天氣信息。

img 

img 

 

總結:

  1. ajax實現附件上傳

FormData收集上傳的附件信息

ajax負責把附件傳遞給伺服器

  1. 大附件上傳進度條顯示

ajax對象-->upload成員-->onprogress事件

100ms就執行一次

並通過事件對象感知附件上傳情況

  1. 聊天室

ajax使用

  1. 天氣預報顯示使用

ajax是不能跨域請求的,可以利用php代理實現

天氣預報原理(ip--->城市--->城市編碼)

 

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 比如,有角色集合中,只有用戶創建有角色,才出現“分配”銨鈕。反之,隱藏。IEnumerable有一個方法,叫Any: ...
  • 介紹 之所以說是簡單模擬,是因為我不知道QQ登錄背景動畫是怎麼實現的.這裡是通過一些辦法把它簡化了,做成了類似的效果 效果圖 大體思路 首先把背景看成是一個4行8列的點的陣距,X軸Y軸都是距離70.把點連起來,連成三角形.佈局在外層藍色的里,顯示只顯示裡層綠色框里的部分.這樣最外層的點不用動,只讓綠 ...
  • Smobiler是一個在VS環境中使用.Net語言來開發APP的開發平臺,也許比Xamarin更方便 ...
  • Aspose.Words簡單生成word文檔,C#獲取純文本 去除html標簽,C#獲取img src ...
  • 我Fork了QRCoder,並且相容了.Net Core,圖形庫用的是ZKWeb.System.Drawing Github: https://github.com/zkweb framework/QRCoder Nuget: https://www.nuget.org/packages/ZKWeb ...
  • 上一篇說了from in select的本質,具體參見你所不知道的linq。本篇說下from...in... from... in... select 首先上一段代碼,猜猜結果是什麼? 這段代碼的運行結果是什麼呢? 答案是,這段代碼會報錯,根本編譯不過~~~~~~那麼按照上一篇,我們對TestApp ...
  • 很多的軟體項目幾乎都包含著對文檔的操作,前面已經介紹過兩款操作文檔的組件,現在介紹一款文檔操作的組件NPOI。 NPOI可以生成沒有安裝在您的伺服器上的Microsoft Office套件的Excel報表,並且在後臺調用Microsoft Excel ActiveX更有效率;從Office文檔中提取 ...
  • 所有 ReSherper 的功能都可以使用快捷鍵。大部分功能都有預設快捷鍵,剩下的少數功能可以自定義快捷鍵。 ReSharper 提供了兩種快捷鍵的方式 Visual Studio:這種方式可以減少與 Visual Studio 本身快捷鍵的衝突。 ReSharper 2.0/IntelliJ ID ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...