Web前后端数据交互技术 课件 第一章 所见即所得- web概述

——江西应用技术职业学院web前后端数据交互技术所见即所得——web概述第一章教学内容1、web定义、web工作原理2、Web数据交互技术中的Ajax、Iframe、WebSocket三大技术的定义和特点作用知识目标技能目标素养目标●掌握web的定义●理解web的工作原理●掌握Ajax、Iframe、WebSocket三大技术的定义和作用●能辨析web前后端数据交互的关键技术的特点和作用●能使用web调试工具调试页面●提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真、仔细的职业工匠精神教学重点web的定义、Ajax的定义和作用、Iframe原理和特点、WebSocket定义和原理教学难点Ajax的概念理解、Iframe异步通信的原理、WebSocket的概念理解教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术web的简介1.1目录CONTENTSweb的定义1web是如何工作的2web的调试工具301web的定义1.1

web的简介web（WorldWideWeb）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。web的定义网站是一个整体，网页是一个个体，一个网站是由多个网页构建而成。简单来说，网站是由网页集合而成的，通过浏览器所看到的页面就是网页。网站是域名、网站存放空间的内容集合，所包含的内容有网页、程序、图片、视频、音频等内容和内容之间的链接关系，一个网站可能有很多网页，也可能只有一个网页。网页是网站内容的重要组成部分。web的定义网页可以分为静态网页和动态网页。web的定义静态网页是指没有后台数据库、不含开发程序和不可交互的网页。静态网页是标准的HTML文件，它的文件扩展名是.htm、.html，可以包含文本、图像、声音、动画、客户端脚本和ActiveX控件及程序等，制作完成后，页面的内容和显示效果就确定了，除非修改页面代码，因此静态网页更新起来相对比较麻烦，适用于一般更新较少的展示型网站，早期网站的页面也多为静态网页。静态页面web的定义动态网页一般以数据库技术为基础，可以与后台数据库进行交互与数据传递，可以大大降低网站维护的工作量。采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录、在线调查、用户管理、订单管理等等。动态网页以.aspx、.asp、.jsp、.php、.perl、.cgi等形式为后缀，并且在动态网页网址中有一个标志性的符号——“?”。网页可以分为静态网页和动态网页。动态页面02web是如何工作的1.1

web的简介web是如何工作的浏览器的主要功能是将用户选择的Web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中。浏览器主要功能浏览器的主要组件包括以下七个方面。web是如何工作的用户界面浏览器引擎渲染引擎网络UI后端JS解析器数据存储web是如何工作的包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。用来查询及操作渲染引擎的接口。用来显示请求的内容，例如：请求内容为html，它负责解析html及css，并将解析的结果显示出来。用户界面（UserInterface）浏览器引擎（Browserengine）渲染引擎（Renderingengine）web是如何工作的用来完成网络调用，例如：http请求具有平台无关的接口，可以在不同平台上工作。用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用。网络（Networking）UI后端（UIBackend）web是如何工作的用来解释执行JS代码。属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了webdatabase技术，这是一种轻量级完整的客户端存储技术。JS解释器（JavaScriptInterpreter）数据存储（Datapersistence）web是如何工作的网站开发技术分为前端技术和后端技术。在Web前端开发中有HTML、CSS、JavaScript等技术。在Web后端开发中有CGI、PHP、JSP、Python、ASP.NET、Ruby等开发技术。Web前端技术Web后端技术03Web调试工具1.1

web的简介调试工具错误定位修改设计和代码排除错误，防止新错误产生什么是Web调试？在Web应用开发过程中，开发人员需要借助工具了解程序的执行情况，从而修正语法错误和逻辑错误，以确定程序的正确性、安全性和稳定性等。调试步骤调试工具“火狐”，是一个开源网页浏览器，使用Gecko引擎。使用Firefox可以在浏览器实时运行HTML、CSS等代码。Firefox内置有强大的JavaScript调试工具，可以随时暂停JS动画，观察静态细节，还可以使用JS分析器来分析校准，找到问题原因。MozillaFirefox调试工具Google浏览器，是由Google公司开发的开放源代码的网页浏览器。该浏览器是基于其他开源软件所撰写，包括WebKit和Mozilla，目标是提升稳定性、速度和安全性，并创造出简单且有效率的使用者界面。对于HTML5和CSS3提供比较完善的支持，还能够模拟手机调试。GoogleChrome调试工具InternetExplorer是微软推出的一款随所有新版本的Windows操作系统内置的默认网页浏览器，同时也是微软Windows操作系统的组成部分。可以在浏览器中交互式地突出显示被选择的网页元素，查看style元素，定位div等，用户能够直接在浏览器窗口中浏览、传输和更新HTMLDOM。InternetExplorer谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术Ajax1.2.1目录CONTENTS什么是Ajax1Ajax能做什么2学习Ajax需要什么基础301什么是Ajax1.2.1AjaxAjax的全称为（AsynchronousJavaScriptandXML，异步JavaScript和XML），从Ajax的组合名称可以看出Ajax其实并不是一种技术，而是多种技术的组合体。Ajax的定义大学毕业拍毕业照，全班30人，一共去了29人。可是拍完之后，没参与照相的同学也想出现在照片中，该怎么办呢？传统方式：大家再召集一次，重新拍一张。Ajax：把这名同学PS进去这就是Ajax的特点：可以在不重新召集所有同学拍照的情况下，对照片的部分进行更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。（重新拍照理解为重新加载网页）Ajax的定义02Ajax的作用1.2.1AjaxAjax的作用通过Ajax与服务器进行数据交换，Ajax可以使用网页实现布局更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。Ajax的作用Ajax是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。有很多使用Ajax的应用程序案例：新浪微博、Google地图、开心网等等。传统的开发模式：用户的每一次操作都触发一次返回服务器的HTTP请求，服务器做出处理后，返回一个html页面给用户。Ajax开发模式：页面将用户的操作通过Ajax引擎与服务器进行通信，将返回的结果给Ajax引擎，然后Ajax将数据插入指定位置。Ajax的作用Ajax常使用的四种场景：登录失败不跳转页面注册实时提示用户名是否存在省市区的联动管理图片服务器，进行延时加载优点：能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变的信息。03学习Ajax需要什么基础1.2.1Ajax学习Ajax需要什么基础在学习Ajax之前，您需要对下面的知识有基本的了解：●HTML/XHTML●CSS●JavaScript/DOM谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术Iframe1.2.2目录CONTENTS什么是Iframe1Iframe能做什么2Iframe异步通信实现原理301什么是Iframe1.2.2

Iframe1、iframe是HTML中的一个标签。2、网页内框架，被称为“网页中的网页”。3、iframe支持HTML中的全局属性和事件。4、兼容性说明。所有浏览器都支持<iframe>标签。HTML4.1StrictDTDXHTML1.0StrictDTD不支持iframe元素。Iframe的定义1.2.2

Iframe02Iframe的作用Iframe的作用异步方式就是在点击发送数据的时候并没有刷新整个页面，而是借助于iframe标签实现了页面的异步刷新。当然，我们也可以点击发送的时候向服务器发送数据，并借助iframe实现异步刷新。Iframe的作用我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载，不会阻塞主页面。当然使用iframe也是有利有弊的：iframe会阻塞主页面的onload事件主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方面。一般都是想让onload时间越早触发越好，一方面是用户体验过更重要的是google给网站的加载速度的打分：用户可以用IE和FF中Google工具栏来计时。03Iframe异步通信实现原理1.2.2

IframeIIframe异步通信实现原理一般情况下都是用在同一域下的Ajax请求；但是如果请求是发生在不同的域下，请求就无法执行，并且会抛出异常提示不允许跨域请求，利用iframe完成Ajax的跨域请求IIframe异步通信实现原理要实现域的request.html请求域的process.php，可以将请求的参数通过URL传给response.html，由response.html向process.php发出真正的Ajax请求（response.html与process.php都属于域），然后将返回的结果通过URL传给proxy.html，最后由于proxy.html与request.html是在同一域下，所以可以在proxy.html利用window.top将结果返回给request.html完成跨域通信。IIframe异步通信实现原理1、先来看request.html。这个页面其实就是要告诉response.html：我要让你执行你定义好的方法GetPerson，并且要用我给你的参数'{"id":24}'。可能感到模糊的就是为什么要把CallBack函数传给response.html，这是定义在本页面上的方法，response.html也不能执行它；看接下来的代码就会知道：response.html纯粹是负责将CallBack这个方法名传递给下一位仁兄proxy.html，而proxy.html拿到了CallBack这个方法名就可以执行了，因为proxy.html和request.html是同域的。IIframe异步通信实现原理2、接下来我们看response.html，这里其实就是接收来自request.html的请求得到请求参数和方法后向服务器process.php发出真正的Ajax请求，然后将从服务器返回的数据以及从request.html传过来的回调函数名传递给proxy.html。IIframe异步通信实现原理

3、接下来看一下process.php的代码4、最后就是proxy.html，proxy拿到了request.html透过response.html传过来的回调函数名以及从response.html直接传过来的响应数据，利用window.top执行request.html里定义的回调函数。实际应用中，proxy.html基本上可以是一个通用的代理，无需改动，如果需要用到很多跨域方法，这些方法都可以在域里面加上，而域就相当于定义一些接口供调用。谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术WebSocket1.2.3Iframe异步通信实现原理WebSocket能做什么什么是WebSocket目录CONTENTS123011.2.3

WebSocket什么是WebSocketWebSocket是一种在