前端2015秋前端开发课件js app05和ajax_第1页
前端2015秋前端开发课件js app05和ajax_第2页
前端2015秋前端开发课件js app05和ajax_第3页
前端2015秋前端开发课件js app05和ajax_第4页
前端2015秋前端开发课件js app05和ajax_第5页
已阅读5页，还剩51页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

5-HTML和AJAX

WWW、HTTP、AJAX、JSONP2015Summer,xi'an本章内容WWW和URLHTML,XML,JSON,RSS,JSONPHTTP协议HTTPRequest请求HTTPResponse响应AJAXRequests同源策略工作区JSONPWeb开发者工具WWW和URL

什么是WWW？什么是URL？什么是WWW？WWW=WorldWideWeb万维网=Web互联网中的全球分布式信息系统互联网的一个服务（如邮件、DNS、等）由位于不同互联网服务器上的文档（或其他资源）集组成访问通过标准协议的URL，如HTTP,HTTPS,FTPWeb服务器提供Web内容Web浏览器显示Web内容

WWW组件结构组件Internet互联网-提供数据传输通道，在TCP和HTTP协议之上客户端（Web浏览器）-显示Web内容Web服务器-IIS,Apache,Tomcat,GWS,等语义组件超文本传输协议HTTP超文本标记语言HTML统一资源定位符URL统一资源标示符URIsWWW基础设施客户端使用Web浏览器应用来从Web服务器通过HTTP请求资源资源有唯一的URL地址服务器以响应来发送请求资源或回复错误消息Web页面是WWW中的资源HTML文本，图像，动画和其他文件Web站点Web站点是WWW中Web页面的集合WWW基础设施(2)客户端浏览器渲染了Web服务器返回的Web页面页面是用HTML（超文本传输协议）浏览器显示文本、图像、声音、等HTML页面包含超链接到其他页面全部WWW系统运行在标准的网络协议之上TCP,DNS,HTTP,FTP,…HTTP协议是WWW的基本URL统一资源定位符（URL）WWW中唯一的资源定位符，如只是一段格式化的字符串，包含了：与服务器通信的协议（http,ftp,https,...）服务器名或IP地址+可选端口（如：,:8080）路径和资源名称（如index.html）参数（可选，如：?id=27&lang=en）

URL编码URL编码遵循RFC1738：所有其他的字符串都要用以下格式转义示例：空格的十进制码是32，十六进制20，所以空格的URL为%20空格也可以解码为"+"“...只有字母表[0-9a-zA-Z],特殊字符$-_.+!*'()和用于保留目的的保留字符，该字符可能用于URL中的非编码.”%[在ISO-Latin字符集中字符的十六进制码]URL-示例有效的URL：无效的URL：

.NET4.0互联网应为s?wd=%E4%BA%92%E8%81%94%E7%BD%91应为s?wd=C%23+.NET+4.0HTML,XML,JSON,RSS

比较通用Web数据格式HTML超文本标记语言（HTML）符号为描述带有图像和超链接的格式化文本通过Web浏览器解释并显示Web(HTML)页面包含：HTML文件CSS样式表文件（可选）一些图片（可选）其他资源（可选）HTMLHTML是直接的并易于学习HTML文档是纯文本文件易于添加格式、超链接、编号、等图像能够以分离文件添加可由编辑程序自动生成工具来帮助用户创建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是编码文档的机器可读格式的标记语言基于文本格式由标签、特性和内容组成同时提供数据和元数据<?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摘要格式一族，用来频繁发布更新的作品如，博客条目、新闻首行、视频、等基于XML，用标准化XSDschemaRSS文档是多项列表每条包含标题、作者、发布日期、概括文本和元数据Atom协议目标是增强/替代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对象表示）标准的表达简单数据结构和关联数组轻量级基于文本的开放标准继承自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协议

HTTP如何运行？HTTPHTTP超文本传输协议（HTTP）客户端-服务器协议，用来传输Web资源（HTML文件、图像、样式、等）HTTP的重要属性请求-响应模型基于文本格式依靠唯一资源URL提供资源元数据（如，编码）无状态（cookies能克服之）

HTTP：请求-响应协议客户端程序运行在终端主机如，Web浏览器请求资源服务器程序运行在服务器上如，Web服务器提供资源GET/index.htmlHTTP/1.0HTTP/1.0200OK"WelcometoourWebsite!"示例：超文本传输协议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请求信息客户端发送的请求信息由以下组成请求行-请求方法（GET,POST,HEAD,等）、资源URI、和协议版本请求头部-额外参数主体-可选数据如，发布数据、文件、等<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请求示例：获取资源只当服务器改变时服务器回复"304NotModified"，如果资源并没有改变或者"200OK"以最后版本GET/HTTP/1.1Host::80If-Modified-Since:Thu,4Feb201520:39:13GMTConnection:CloseHTTP响应消息响应消息通过服务器发送状态行-协议版本、状态码、状态短语响应头部-提供元数据主体-响应的内容（请求的资源）HTTP/<version><statuscode><statustext><headers><CRLF><responsebody–therequestedresource>HTTP响应-示例HTTP响应自Web服务器的示例：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响应状态行HTTP响应头部HTTP响应主体HTTP响应-示例HTTP响应错误结果示例：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服务器的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返回特定资源，在服务器端运行程序，或只下载文件，等HEAD返回关联到资源的元数据POST更新资源，为服务器端的处理提供输入数据，等HTTP响应码HTTP响应码分类1xx:信息(如,“100Continue”)2xx:成功(如,“200OK”)3xx:重定向(如,“304NotModified”,"302Found")4xx:客户端错误(e.g.,“404NotFound”)5xx:服务器端错误(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服务

Web服务和SOA架构Web服务Web服务是在两个设备间以WWW的通讯方法服务器设备暴露服务客户端消费服务Web服务是SOA架构的主要部分服务器端的数据库和商业逻辑服务器暴露公开服务UI逻辑在客户端消费服务RESTfulWeb服务

Web服务的轻量级架构什么是REST？应用状态和功能是资源资源用作普通数据文件每个资源有一个URI所有资源共享统一界面原生映射到HTTP协议"表述性状态转移(REST)是一种软件架构用于Web一般的分布式多媒体系统."RESTful服务一个URI为一个资源，多个操作添加新文档"RestTalk"在分类"Code"PUT得到文档/一些页面GETGET/pages/3删除文档DELETE检索元数据HEADAJAX

异步的JavaScript和XMLAJAXAJAX是异步的JavaScript和XML的缩写技术背景为自服务器端，动态内容和数据的加载允许动态的客户端改变两类AJAX部分页面渲染-HTML片段的加载并显示在<div>中(AHAH机制)JSON服务-加载JSON对象且客户端以JavaScript/jQuery处理之AJAX技术上讲，AJAX是一组运行在一起的技术HTML&CSS为表现DOM为数据显示&交互XML（或JSON）为数据交换XMLHttpRequest为异步通信JavaScript来使用上述AJAXAJAX使用HTTP请求有头部-GET,POST,HEAD,等请求有主体-XML,JSON或纯文本请求必须指向用URI的资源资源必须理解请求服务端逻辑请求得到了HTTP响应带有主体的头部同源策略

如，不与陌生人交谈同源策略用于浏览器端编程语言的安全概念脚本运行在同一站点的页面上如，相同origin源可互相访问无需限制脚本不能访问不同站点上的页面同样适用于XMLHttpRequest只在同源页面之间发送源测定规则源的定义使用域名（如，）应用层协议（如，http）端口号（并非所有浏览器！）两个资源为同源，如果上述都匹配的话源测定示例假定我们有资源在

下列表格显示了用相似URL资源对源进行检查的结果轻松同源策略同源策略有时候有限制大型网站有多个子域

人人文库> 全部分类> 应用文书

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论