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

下載本文檔

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

文檔簡(jiǎn)介

5-HTML和AJAX

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

什么是WWW？什么是URL？什么是WWW？WWW=WorldWideWeb萬(wàn)維網(wǎng)=Web互聯(lián)網(wǎng)中的全球分布式信息系統(tǒng)互聯(lián)網(wǎng)的一個(gè)服務(wù)（如郵件、DNS、等）由位于不同互聯(lián)網(wǎng)服務(wù)器上的文檔（或其他資源）集組成訪問(wèn)通過(guò)標(biāo)準(zhǔn)協(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,等語(yǔ)義組件超文本傳輸協(xié)議HTTP超文本標(biāo)記語(yǔ)言HTML統(tǒng)一資源定位符URL統(tǒng)一資源標(biāo)示符URIsWWW基礎(chǔ)設(shè)施客戶端使用Web瀏覽器應(yīng)用來(lái)從Web服務(wù)器通過(guò)HTTP請(qǐng)求資源資源有唯一的URL地址服務(wù)器以響應(yīng)來(lái)發(fā)送請(qǐng)求資源或回復(fù)錯(cuò)誤消息Web頁(yè)面是WWW中的資源HTML文本，圖像，動(dòng)畫(huà)和其他文件Web站點(diǎn)Web站點(diǎn)是WWW中Web頁(yè)面的集合WWW基礎(chǔ)設(shè)施(2)客戶端瀏覽器渲染了Web服務(wù)器返回的Web頁(yè)面頁(yè)面是用HTML（超文本傳輸協(xié)議）瀏覽器顯示文本、圖像、聲音、等HTML頁(yè)面包含超鏈接到其他頁(yè)面全部WWW系統(tǒng)運(yùn)行在標(biāo)準(zhǔn)的網(wǎng)絡(luò)協(xié)議之上TCP,DNS,HTTP,FTP,…HTTP協(xié)議是WWW的基本URL統(tǒng)一資源定位符（URL）WWW中唯一的資源定位符，如只是一段格式化的字符串，包含了：與服務(wù)器通信的協(xié)議（http,ftp,https,...）服務(wù)器名或IP地址+可選端口（如：,:8080）路徑和資源名稱(chēng)（如index.html）參數(shù)（可選，如：?id=27&lang=en）

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

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

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

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

HTTP：請(qǐng)求-響應(yīng)協(xié)議客戶端程序運(yùn)行在終端主機(jī)如，Web瀏覽器請(qǐng)求資源服務(wù)器程序運(yùn)行在服務(wù)器上如，Web服務(wù)器提供資源GET/index.htmlHTTP/1.0HTTP/1.0200OK"WelcometoourWebsite!"示例：超文本傳輸協(xié)議HTTP請(qǐng)求：HTTP響應(yīng)：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請(qǐng)求信息客戶端發(fā)送的請(qǐng)求信息由以下組成請(qǐng)求行-請(qǐng)求方法（GET,POST,HEAD,等）、資源URI、和協(xié)議版本請(qǐng)求頭部-額外參數(shù)主體-可選數(shù)據(jù)如，發(fā)布數(shù)據(jù)、文件、等<requestmethod><resource>HTTP/<version><headers><emptyline><body>HTTPGET請(qǐng)求-示例HTTPGET請(qǐng)求：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請(qǐng)求-示例HTTPPOST請(qǐng)求（登錄）：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請(qǐng)求示例：獲取資源只當(dāng)服務(wù)器改變時(shí)服務(wù)器回復(fù)"304NotModified"，如果資源并沒(méi)有改變或者"200OK"以最后版本GET/HTTP/1.1Host::80If-Modified-Since:Thu,4Feb201520:39:13GMTConnection:CloseHTTP響應(yīng)消息響應(yīng)消息通過(guò)服務(wù)器發(fā)送狀態(tài)行-協(xié)議版本、狀態(tài)碼、狀態(tài)短語(yǔ)響應(yīng)頭部-提供元數(shù)據(jù)主體-響應(yīng)的內(nèi)容（請(qǐng)求的資源）HTTP/<version><statuscode><statustext><headers><CRLF><responsebody–therequestedresource>HTTP響應(yīng)-示例HTTP響應(yīng)自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響應(yīng)狀態(tài)行HTTP響應(yīng)頭部HTTP響應(yīng)主體HTTP響應(yīng)-示例HTTP響應(yīng)錯(cuò)誤結(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頭部指輸出應(yīng)當(dāng)如何被處理示例：Content-Type:text/html;charset=utf-8Content-Type:application/pdfContent-Disposition:attachment;filename="Financial-Report-April-2010.pdf"UTF-8編碼的HTML頁(yè)面

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

瀏覽器重定向HTTP瀏覽器重定向示例HTTPGET請(qǐng)求一個(gè)移動(dòng)的URL：HTTP響應(yīng)表示，瀏覽器應(yīng)當(dāng)請(qǐng)求另一個(gè)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ù)是在兩個(gè)設(shè)備間以WWW的通訊方法服務(wù)器設(shè)備暴露服務(wù)客戶端消費(fèi)服務(wù)Web服務(wù)是SOA架構(gòu)的主要部分服務(wù)器端的數(shù)據(jù)庫(kù)和商業(yè)邏輯服務(wù)器暴露公開(kāi)服務(wù)UI邏輯在客戶端消費(fèi)服務(wù)RESTfulWeb服務(wù)

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

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

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

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

溫馨提示

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

最新文檔

評(píng)論

0/150

提交評(píng)論