前端2015秋前端開發(fā)課件js app05和ajax_第1頁
前端2015秋前端開發(fā)課件js app05和ajax_第2頁
前端2015秋前端開發(fā)課件js app05和ajax_第3頁
前端2015秋前端開發(fā)課件js app05和ajax_第4頁
前端2015秋前端開發(fā)課件js app05和ajax_第5頁
已閱讀5頁，還剩51頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

5-HTML和AJAX

WWW、HTTP、AJAX、JSONP2015Summer,xi'an本章內(nèi)容WWW和URLHTML,XML,JSON,RSS,JSONPHTTP協(xié)議HTTPRequest請求HTTPResponse響應AJAXRequests同源策略工作區(qū)JSONPWeb開發(fā)者工具WWW和URL

什么是WWW？什么是URL？什么是WWW？WWW=WorldWideWeb萬維網(wǎng)=Web互聯(lián)網(wǎng)中的全球分布式信息系統(tǒng)互聯(lián)網(wǎng)的一個服務(wù)（如郵件、DNS、等）由位于不同互聯(lián)網(wǎng)服務(wù)器上的文檔（或其他資源）集組成訪問通過標準協(xié)議的URL，如HTTP,HTTPS,FTPWeb服務(wù)器提供Web內(nèi)容Web瀏覽器顯示W(wǎng)eb內(nèi)容

WWW組件結(jié)構(gòu)組件Internet互聯(lián)網(wǎng)-提供數(shù)據(jù)傳輸通道，在TCP和HTTP協(xié)議之上客戶端（Web瀏覽器）-顯示W(wǎng)eb內(nèi)容Web服務(wù)器-IIS,Apache,Tomcat,GWS,等語義組件超文本傳輸協(xié)議HTTP超文本標記語言HTML統(tǒng)一資源定位符URL統(tǒng)一資源標示符URIsWWW基礎(chǔ)設(shè)施客戶端使用Web瀏覽器應用來從Web服務(wù)器通過HTTP請求資源資源有唯一的URL地址服務(wù)器以響應來發(fā)送請求資源或回復錯誤消息Web頁面是WWW中的資源HTML文本，圖像，動畫和其他文件Web站點Web站點是WWW中Web頁面的集合WWW基礎(chǔ)設(shè)施(2)客戶端瀏覽器渲染了Web服務(wù)器返回的Web頁面頁面是用HTML（超文本傳輸協(xié)議）瀏覽器顯示文本、圖像、聲音、等HTML頁面包含超鏈接到其他頁面全部WWW系統(tǒng)運行在標準的網(wǎng)絡(luò)協(xié)議之上TCP,DNS,HTTP,FTP,…HTTP協(xié)議是WWW的基本URL統(tǒng)一資源定位符（URL）WWW中唯一的資源定位符，如只是一段格式化的字符串，包含了：與服務(wù)器通信的協(xié)議（http,ftp,https,...）服務(wù)器名或IP地址+可選端口（如：,:8080）路徑和資源名稱（如index.html）參數(shù)（可選，如：?id=27&lang=en）

URL編碼URL編碼遵循RFC1738：所有其他的字符串都要用以下格式轉(zhuǎn)義示例：空格的十進制碼是32，十六進制20，所以空格的URL為%20空格也可以解碼為"+"“...只有字母表[0-9a-zA-Z],特殊字符$-_.+!*'()和用于保留目的的保留字符，該字符可能用于URL中的非編碼.”%[在ISO-Latin字符集中字符的十六進制碼]URL-示例有效的URL：無效的URL：

.NET4.0互聯(lián)網(wǎng)應為s?wd=%E4%BA%92%E8%81%94%E7%BD%91應為s?wd=C%23+.NET+4.0HTML,XML,JSON,RSS

比較通用Web數(shù)據(jù)格式HTML超文本標記語言（HTML）符號為描述帶有圖像和超鏈接的格式化文本通過Web瀏覽器解釋并顯示W(wǎng)eb(HTML)頁面包含：HTML文件CSS樣式表文件（可選）一些圖片（可選）其他資源（可選）HTMLHTML是直接的并易于學習HTML文檔是純文本文件易于添加格式、超鏈接、編號、等圖像能夠以分離文件添加可由編輯程序自動生成工具來幫助用戶創(chuàng)建HTML頁面如，Dreamweaver、VisualStudioWYSIWYG所見即所得HTML編輯器HTML-示例<html><head><title>HTML示例</title></head><body><h1>標題1</h1><h2>子標題2</h2><h3>子標題3</h3><p>這是第一段</p><p>這是第二段</p><divalign="center"style="background:skyblue">這是div塊</div> </body></html>XMLXML是編碼文檔的機器可讀格式的標記語言基于文本格式由標簽、特性和內(nèi)容組成同時提供數(shù)據(jù)和元數(shù)據(jù)<?xmlversion="1.0"?><library><book><title>HTML5</title><author>BayIvan</author></book><book><title>WPF4</title><author>Microsoft</author></book><book><title>WCF4</title><author>KakaMara</author></book><book><title>UML2.0</title><author>BayAli</author></book></library>RSSRSS（真正簡易聚合）Web摘要格式一族，用來頻繁發(fā)布更新的作品如，博客條目、新聞首行、視頻、等基于XML，用標準化XSDschemaRSS文檔是多項列表每條包含標題、作者、發(fā)布日期、概括文本和元數(shù)據(jù)Atom協(xié)議目標是增強/替代RSSRSS-示例<?xmlversion="1.0"encoding="utf-8"?><rssversion="2.0"><channel><title>W3SchoolsHomePage</title><link></link><description>Freewebbuildingtutorials</description><item><title>RSSTutorial</title><link>/rss</link><description>NewRSStutorialonW3Schools</description></item><item><title>XMLTutorial</title><link>/xml</link><description>NewXMLtutorialonW3Schools</description></item></channel></rss>JSONJSON（JavaScript對象表示）標準的表達簡單數(shù)據(jù)結(jié)構(gòu)和關(guān)聯(lián)數(shù)組輕量級基于文本的開放標準繼承自JavaScript語言{"firstName":"李","lastName":"聃","age":48,"address":{"streetAddress":"國家圖書館路.","city":"咸陽","postalCode":"10021"},"phoneNumber":[{"type":"home","number":"212555-1234"},{"type":"fax","number":"646555-4567"}]},{"firstName":"孔","lastName":"丘","age":28}HTTP協(xié)議

HTTP如何運行？HTTPHTTP超文本傳輸協(xié)議（HTTP）客戶端-服務(wù)器協(xié)議，用來傳輸Web資源（HTML文件、圖像、樣式、等）HTTP的重要屬性請求-響應模型基于文本格式依靠唯一資源URL提供資源元數(shù)據(jù)（如，編碼）無狀態(tài)（cookies能克服之）

HTTP：請求-響應協(xié)議客戶端程序運行在終端主機如，Web瀏覽器請求資源服務(wù)器程序運行在服務(wù)器上如，Web服務(wù)器提供資源GET/index.htmlHTTP/1.0HTTP/1.0200OK"WelcometoourWebsite!"示例：超文本傳輸協(xié)議HTTP請求：HTTP響應：GET/HTTP/1.1Host:User-Agent:Mozilla/5.0HTTP/1.1200OKServer:bfe/Date:Mon,22Jun201515:24:00GMTContent-Type:text/html;charset=utf-8<html><title>Hello</title>Welcometooursite</html>HTTP請求信息客戶端發(fā)送的請求信息由以下組成請求行-請求方法（GET,POST,HEAD,等）、資源URI、和協(xié)議版本請求頭部-額外參數(shù)主體-可選數(shù)據(jù)如，發(fā)布數(shù)據(jù)、文件、等<requestmethod><resource>HTTP/<version><headers><emptyline><body>HTTPGET請求-示例HTTPGET請求：GET/HTTP/1.1Host:Connection:keep-aliveAccept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8User-Agent:Mozilla/5.0(WindowsNT6.3;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/45.0.2431.0Safari/537.36HTTPS:1Accept-Encoding:gzip,deflate,sdchAccept-Language:zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,bg;q=0.2HTTPPOST請求-示例HTTPPOST請求（登錄）：POST/v2/api/?loginHTTP/1.1Host:Connection:keep-aliveContent-Length:702Cache-Control:max-age=0Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Origin:https://User-Agent:Mozilla/5.0(WindowsNT6.3;WOW64)Content-Type:application/x-www-form-urlencodedAccept-Encoding:gzip,deflateAccept-Language:zh-CN,zh;q=0.8,en;q=0.6,zh-TW;q=0.4,bg;q=0.2username:userpassword:passverifycode:條件HTTPGET-示例HTTP條件GET請求示例：獲取資源只當服務(wù)器改變時服務(wù)器回復"304NotModified"，如果資源并沒有改變或者"200OK"以最后版本GET/HTTP/1.1Host::80If-Modified-Since:Thu,4Feb201520:39:13GMTConnection:CloseHTTP響應消息響應消息通過服務(wù)器發(fā)送狀態(tài)行-協(xié)議版本、狀態(tài)碼、狀態(tài)短語響應頭部-提供元數(shù)據(jù)主體-響應的內(nèi)容（請求的資源）HTTP/<version><statuscode><statustext><headers><CRLF><responsebody–therequestedresource>HTTP響應-示例HTTP響應自Web服務(wù)器的示例：HTTP/1.1200OKCache-Control:private,no-cache,no-store,must-revalidateConnection:keep-aliveContent-Encoding:gzipContent-Type:text/html<CRLF><html><head><title>Test</title></head><body>TestHTMLpage.</body></html>HTTP響應狀態(tài)行HTTP響應頭部HTTP響應主體HTTP響應-示例HTTP響應錯誤結(jié)果示例：HTTP/1.1404NotFoundDate:Fri,17Jul201516:09:18GMT+2Server:Apache/2.2.14(Linux)Connection:closeContent-Type:text/html<CRLF><HTML><HEAD><TITLE>404NotFound</TITLE></HEAD><BODY><H1>NotFound</H1>TherequestedURLwasnotfoundonthisserver.<P><HR><ADDRESS>Apache/2.2.14ServeratPort80</ADDRESS></BODY></HTML>Content-Type和Disposition服務(wù)器的Content-Type頭部指輸出應當如何被處理示例：Content-Type:text/html;charset=utf-8Content-Type:application/pdfContent-Disposition:attachment;filename="Financial-Report-April-2010.pdf"UTF-8編碼的HTML頁面

將在瀏覽器中顯示將下載一個PDF文件HTTP請求方法HTTP請求方法GET返回特定資源，在服務(wù)器端運行程序，或只下載文件，等HEAD返回關(guān)聯(lián)到資源的元數(shù)據(jù)POST更新資源，為服務(wù)器端的處理提供輸入數(shù)據(jù)，等HTTP響應碼HTTP響應碼分類1xx:信息(如,“100Continue”)2xx:成功(如,“200OK”)3xx:重定向(如,“304NotModified”,"302Found")4xx:客戶端錯誤(e.g.,“404NotFound”)5xx:服務(wù)器端錯誤(e.g.,“503ServiceUnavailable”)"302Found"用于重定向Web瀏覽器到另一個URL

瀏覽器重定向HTTP瀏覽器重定向示例HTTPGET請求一個移動的URL：HTTP響應表示，瀏覽器應當請求另一個URLGET/HTTP/1.1Host:User-Agent:Gecko/20150115Firefox/3.6<CRLF>HTTP/1.1301MovedPermanentlyLocation:…Web服務(wù)

Web服務(wù)和SOA架構(gòu)Web服務(wù)Web服務(wù)是在兩個設(shè)備間以WWW的通訊方法服務(wù)器設(shè)備暴露服務(wù)客戶端消費服務(wù)Web服務(wù)是SOA架構(gòu)的主要部分服務(wù)器端的數(shù)據(jù)庫和商業(yè)邏輯服務(wù)器暴露公開服務(wù)UI邏輯在客戶端消費服務(wù)RESTfulWeb服務(wù)

Web服務(wù)的輕量級架構(gòu)什么是REST？應用狀態(tài)和功能是資源資源用作普通數(shù)據(jù)文件每個資源有一個URI所有資源共享統(tǒng)一界面原生映射到HTTP協(xié)議"表述性狀態(tài)轉(zhuǎn)移(REST)是一種軟件架構(gòu)用于Web一般的分布式多媒體系統(tǒng)."RESTful服務(wù)一個URI為一個資源，多個操作添加新文檔"RestTalk"在分類"Code"PUT得到文檔/一些頁面GETGET/pages/3刪除文檔DELETE檢索元數(shù)據(jù)HEADAJAX

異步的JavaScript和XMLAJAXAJAX是異步的JavaScript和XML的縮寫技術(shù)背景為自服務(wù)器端，動態(tài)內(nèi)容和數(shù)據(jù)的加載允許動態(tài)的客戶端改變兩類AJAX部分頁面渲染-HTML片段的加載并顯示在<div>中(AHAH機制)JSON服務(wù)-加載JSON對象且客戶端以JavaScript/jQuery處理之AJAX技術(shù)上講，AJAX是一組運行在一起的技術(shù)HTML&CSS為表現(xiàn)DOM為數(shù)據(jù)顯示&交互XML（或JSON）為數(shù)據(jù)交換XMLHttpRequest為異步通信JavaScript來使用上述AJAXAJAX使用HTTP請求有頭部-GET,POST,HEAD,等請求有主體-XML,JSON或純文本請求必須指向用URI的資源資源必須理解請求服務(wù)端邏輯請求得到了HTTP響應帶有主體的頭部同源策略

如，不與陌生人交談同源策略用于瀏覽器端編程語言的安全概念腳本運行在同一站點的頁面上如，相同origin源可互相訪問無需限制腳本不能訪問不同站點上的頁面同樣適用于XMLHttpRequest只在同源頁面之間發(fā)送源測定規(guī)則源的定義使用域名（如，）應用層協(xié)議（如，http）端口號（并非所有瀏覽器?。﹥蓚€資源為同源，如果上述都匹配的話源測定示例假定我們有資源在

下列表格顯示了用相似URL資源對源進行檢查的結(jié)果輕松同源策略同源策略有時候有限制大型網(wǎng)站有多個子域

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論