Web前后端数据交互技术 课件全套 第1-8章 所见即所得 web概述-数据的桥梁 后台数据处理

——江西应用技术职业学院web前后端数据交互技术“1+X”证书制度试点web前端开发等级证书教学内容对应web前端开发中级等级证书的考核内容主要学习web前后端数据交互技术，包括HTTP协议、Ajax、Iframe、页面性能优化、WebSocket等知识应用软件类专业和计算机应用技术专业学生从事web前端开发的社会人员04理实结合02教学设计03学生主体01教学内容以行动为导向进行教学设计案例任务为载体“1+X”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前后端数据交互技术网络通信邮差——Socket第七章教学内容1、Socket通信简介2、Socket通信机制3、Socket基本操作4、Socket应用实例知识目标技能目标素养目标●掌握Socket的定义●

理解Socket的工作机制（方法与事件）●掌握Socket的操作和应用●能正确理解Socket工作流程●能使用Socket方法与事件创建Socket连接●提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真、仔细的职业工匠精神教学重点Socket通信的定义和工作原理、Socket通信方法与事件、Socket操作和应用案例教学难点Socket通信方法与事件、Socket通信综合应用教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术数据的搬运工——HTTP协议第二章教学内容1、HTTP定义、HTTP发展和地址2、HTTP消息、请求和响应、HTTP状态码含义知识目标技能目标素养目标●掌握HTTP的定义●理解HTTP消息、请求和响应●熟记HTTP状态码的含义●能使用HTTP消息、请求和响应●能识别理解页面的HTTP状态码含义●提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真、仔细的职业工匠精神教学重点HTTP定义；HTTP消息、HTTP请求、HTTP响应；HTTP状态码的含义教学难点HTTP通信过程的理解、HTTP状态码的熟记教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术异步握手——Ajax第三章教学内容1、Ajax的定义、Ajax的工作原理、Ajax的特点；2、Ajax的方法、Ajax的操作实例。知识目标技能目标素养目标●掌握Ajax的定义●理解Ajax的工作原理●明白Ajax的作用●能应用Ajax进行实例操作●能结合使用Ajax和ASP/PHP操作实例●提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真、仔细的职业工匠精神教学重点Ajax的定义；Ajax的工作原理；Ajax的操作实例教学难点Ajax工作原理的理解、Ajax的应用操作教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术网络通行证——会话机制第五章教学内容1、会话机制定义2、Cookie简介3、Cookie操作4、Session简介5、Session操作知识目标技能目标素养目标●掌握会话机制的定义●掌握Cookie的工作原理和基本操作●掌握Session的工作原理和基本操作●培养信息素养，提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真仔细的职业工匠精神●能正确创建、获取和删除Cookie和Session●能使用Cookie和Session记录用户活动教学重点Cookie和Session的工作原理、Cookie和Session的基本操作和应用教学难点Cookie和Session的基本操作和应用教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术网页的优化师——页面性能优化第六章教学内容页面性能优化的五种方法：资源压缩减少HTTP请求次数、静态资源与动态资源分离、非核心代码异步加载、浏览器缓存、DNS预解析。主要目标素养目标●掌握页面资源压缩的方法●掌握静态资源与动态资源分离原理●掌握核心代码异步加载方式●提升分析问题、团队协作的能力，自主分析能力●培养认真、仔细的职业工匠精神●浏览器缓存使用方法●DNS预解析的实现方法教学重点HTML、JS、CSS的资源压缩方法、动态资源与静态资源的区别和分离方式、非核心代码异步加载中defer和async的使用方法、浏览器缓存的应用规则、DNS预解析的实现方式一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术画中画——iframe第四章教学内容1、iframe简介2、iframe工作原理3、iframe节点操作4、iframe应用实例知识目标技能目标素养目标●掌握iframe的定义●理解iframe的工作原理●掌握Iframe节点的操作和应用●

能正确使用iframe标签和属性●能使用JS、Jquery获取、操作iframe节点●提升分析问题、团队协作的能力●养成web开发职业编码规范●培养认真、仔细的职业工匠精神教学重点iframe的定义和使用、iframe节点基本操作、iframe应用案例教学难点iframe标签属性使用、iframe和JS、Jquery的综合应用教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术数据的桥梁——后台数据处理第八章教学内容1、认识JDBC2、JDBC连接数据库3、JDBC应用实例4、前后端接口Servlet知识目标技能目标素养目标●掌握JDBC与Servlet的定义●

理解JDBC与Servlet的工作机制（方法与事件）●掌握Socket的操作和应用●能正确理解JDBC与Servlet工作流程●能使用JDBC操作数据库●提升分析问题、解决问题的能力●养成软件开发职业编码规范●培养精益求精的职业工匠精神●能使用Servlet与前端数据交互操作教学重点JDBC与Servlet的定义和工作原理、JDBC与Servlet的方法与事件、JDBC与Servlet操作和应用案例教学难点掌握JDBC连接数据库进行增删改查操作Servlet与前端数据交互处理教学内容教学目标一起进入课程学习吧！——江西应用技术职业学院——江西应用技术职业学院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是一种在单个TCP连接上进行全双工通信的协议。WebSocket的定义WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket的定义021.2.3

WebSocketWebSocket的作用WebSocket的作用WebSocketAPI也被W3C定为标准。HTML5开始提供WebSocket协议的支持。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocketAPI中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。WebSocket的作用1建立在TCP协议之上，服务器端的实现比较容易2与HTTP协议有着良好的兼容性。默认端口也是80和4433数据格式比较轻量，性能开销小，通信高效4可以发送文本，也可以发送二进制数据5没有同源限制，客户端可以与任意服务器通信6协议标识符是ws，服务器网址就是URL031.2.3

WebSocketWebSocket的优点WebSocket的优点更好的压缩效果更好的二进制支持可以支持扩展保持连接状态较少的控制开销更强的实时性谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术HTTP的简介2.1HTTP地址HTTP的发展史HTTP定义目录CONTENTS12301HTTP定义2.1HTTP的简介两个国家元首的会晤过程需要遵守一定的外交礼节浏览器与服务器的交互过程也得遵循一定的规则，这个规则就是HTTP协议

HTTP的定义HTTP是HyperTextTransferProtocol的缩写，即超文本传输协议HTTP请求HTTP响应客户端在与服务器端建立连接后，由客户端（通常是浏览器）向服务器端发送一个请求，被称作HTTP请求。客户端在与服务器端建立连接后，服务器端接收到请求后会做出响应，称为HTTP响应。客户端服务器端HTTP的定义总结支持客户端/服务器模式。简单快速：客户端向服务器请求服务时，只需传送请求方式和路径。灵活：HTTP允许传输任意类型的数据，该数据的类型由Content-Type加以标记。接下来总结一下HTTP协议的特点无状态：HTTP协议是无状态协议。HTTP的定义无状态是指协议对于事务处理没有记忆能力，如果后续处理需要前面的信息，则它必须重传。这样可能导致每次连接传送的数据量增大。注意：知识点补充HTTP的定义02HTTP发展史1.1

HTTP的简介HTTP0.9HTTP1.1HTTP1.0HTTP1.1HTTP1.0HTTP发展史其中，HTTP0.9是最早的版本，它于1990年提出，由于HTTP0.9版本已经过时，这里不作过多讲解。HTTP1.1HTTP1.0HTTP0.9HTTP发展史HTTP0.9HTTP1.1HTTP1.0建立TCP连接关闭TCP连接回送HTTP响应发送HTTP请求特点：客户端与服务器建立连接后，每次只能处理一个HTTP请求。客户端服务器端HTTP发展史当网页同时加载多个图片时，HTTP1.0的交互过程是怎样的呢？HTTP发展史当客户端访问这些图片时，需要发送多次请求，并且每次请求都需要与服务器重新建立连接。导致客户端与服务器端交互耗时，影响网页的访问速度。对于内容丰富的网页来说，这样的通信方式明显有缺陷。HTTP发展史弊端HTTP0.9HTTP1.1HTTP1.0

为了克服上述HTTP1.0的缺陷，HTTP1.1版本应运而生，它支持持久连接，也就是说在一个TCP连接上可以传送多个HTTP请求和响应，从而减少了建立和关闭连接的消耗和延时。HTTP发展史HTTP发展史HTTP0.9HTTP1.1HTTP1.0建立TCP连接关闭TCP连接第1次HTTP响应第1次HTTP请求第n次HTTP请求第n次HTTP响应服务器端客户端HTTP1.1的特点当客户端与服务器端建立连接后，客户端可以向服务器端发送多个请求，而且客户端在发送下个请求时，无需等待上次请求的返回结果。但服务器必须按照客户端发送请求的先后顺序返回响应结果，以保证客户端能够区分出每次请求的响应内容。HTTP发展史HTTP1.1不仅继承了HTTP1.0的优点，而且有效解决了HTTP1.0的性能问题，显著地减少浏览器与服务器交互所需要的时间。HTTP发展史总结03HTTP的地址2.1

HTTP的简介HTTP地址又称网页地址，其全称是统一资源定位符（UniformResourceLocator），简称URL，它用于描述网络上的资源。http://host[:port][abs_path]HTTP地址的基本格式“http”表示使用的是HTTP协议“host”可以是合法的Internet主机域名或者IP地址“port”表示端口号，如果为空则使用缺省端口80“abs_path”指定请求资源的URIHTTP地址请大家分析以下网址：/7//java/cource.shtmlHTTP地址又称网页地址，其全称是统一资源定位符（UniformResourceLocator），简称URL，它用于描述网络上的资源。HTTP地址如果HTTP地址中没有给出“abs_path”，那么它作为请求URI时，必须以“/”的形式给出，这项工作通常是由浏览器自动完成的。例如，在用户在浏览器地址栏输入“”后，它自动被浏览器转换成了“/”。HTTP地址谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术HTTP通信2.2HTTP请求HTTP消息目录CONTENTS1201HTTP消息2.2HTTP通信当用户在浏览器中访问某个URL地址、单击网页的某个超链接或者提交网页上的form表单时，浏览器都会向服务器发送请求数据，即HTTP请求消息服务器接收到请求数据后，会将处理后的数据回送给客户端，即HTTP响应消息统称HTTP消息HTTP消息那如何来查看HTTP消息呢？由于在HTTP消息中，除了服务器端的响应实体内容(HTML网页、图片等)以外，其它信息对用户都是不可见的，要想观察这些“隐藏”的信息，需要借助一些网络查看工具。HTTP消息查看HTTP信息的相关插件各个浏览器使用的相关插件也不一样，以下是几款常用的浏览器及其插件HTTP消息火狐浏览器一般使用firebug查看IE浏览器一般使用httpwatch查看谷歌浏览器一般使用右键审查元素查看以HttpWatch为例讲解如何查看HTTP消息HttpWatch插件可以从/download/这个网站下载，按照步骤提示安装成功后，在IE浏览器中的效果如下：HTTP消息以HttpWatch为例讲解如何查看HTTP消息点击【HttpWatchProfessional】图标，就会进入到如下HttpWatch页面HTTP消息以HttpWatch为例讲解如何查看HTTP消息点击httpwatch页面的【Record】按钮，然后在浏览器的地址栏中输入地址访问百度首页。HttpWatch页面显示的内容如下：HTTP消息以HttpWatch为例讲解如何查看HTTP消息HTTP消息首先选中URL栏中的/，会看到下方有一栏是【headers】，该栏显示的信息是格式化后的请求头消息以HttpWatch为例讲解如何查看HTTP消息

(Request-Line): GET/HTTP/1.1Accept:image/gif,image/jpeg,image/pjpeg,image/pjpeg,application/x-shockwave-flash,application/vnd.ms-excel,application/vnd.ms-powerpoint,application/msword,*/*Accept-Encoding:gzip,deflateAccept-Language:zh-cnConnection:Keep-Alive第一行为请求行，请求行下面的为请求头消息HTTP消息02HTTP请求2.2

HTTP的通信HTTP请求请求行请求头实体内容HTTP请求一个完整的HTTP请求的组成：接下来将围绕HTTP请求的请求行、请求头进行详细地讲解HTTP请求HTTP请求行位于请求消息的第一行，它由请求方式、资源路径以及所使用的HTTP协议版本三个部分组成。例如GET/index.phpHTTP/1.1GET是请求方式index.php是请求资源路径HTTP1.1是通信使用的协议版本请求行中的每个部分需要用空格分隔，最后要以回车换行结束注意：HTTP请求HTTP请求方式在HTTP的请求消息中，请求方式有GET、POST、HEAD、OPTIONS、DELETE、TRACE、PUT和CONNECT八种请求方式HTTP请求请求方式含义GET请求获取“Request-URI”标识的资源POST向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）HEAD请求获取由“Request-URI”标识的资源的响应消息报头PUT请求服务器存储一个资源，并用“Request-URI”作为其标识DELETE请求服务器删除“Request-URI”标识的资源TRACE请求服务器回送收到的请求信息，主要用于测试或诊断CONNECT保留将来使用OPTIONS请求查询服务器的性能，或者查询与资源相关的选项和需求八种请求方式的含义HTTP请求请求方式含义GET请求获取“Request-URI”标识的资源POST向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）HEAD请求获取由“Request-URI”标识的资源的响应消息报头PUT请求服务器存储一个资源，并用“Request-URI”作为其标识DELETE请求服务器删除“Request-URI”标识的资源TRACE请求服务器回送收到的请求信息，主要用于测试或诊断CONNECT保留将来使用OPTIONS请求查询服务器的性能，或者查询与资源相关的选项和需求其中，最常用的就是GET和POST方式。HTTP请求八种请求方式的含义GET方式当用户在浏览器地址栏中直接输入某个URL地址或者单击网页上一个超链接时，浏览器将使用GET方式发送请求。如果网页上的form表单的method属性设置为“GET”或者不设置method属性(默认值是GET)，当用户提交表单时，浏览器也将使用GET方式发送请求。如果浏览器请求的URL中有参数部分，在浏览器生成的请求消息中，参数部分将附加在请求行中的资源路径后面。例如：/reg.php?name=lee&psd=hnxy后面的内容为参数信息参数是由参数名和参数值组成的，并且中间使用等号（=）进行连接。注意：如果URL地址中有多个参数，参数之间需要用“&”分隔。HTTP请求GET方式当浏览器向服务器发送请求消息时，上述URL中的参数部分会附加在要访问的URI资源后面GET/reg.php?name=lee&psd=hnxyHTTP/1.1例如：使用GET方式传送的数据大小是有限制的，最多不能超过1KB。HTTP请求POST方式如果网页上form表单的method属性设置“POST”，当用户提交表单时，浏览器将使用POST方式提交表单内容，并把各个表单元素及数据作为HTTP消息的实体内容发送给服务器，而不是作为URI地址的参数传递。另外，在使用POST方式向服务器传递数据时，Content-Type消息头会自动设置为“application/x-www-form-urlencoded”，Content-Length消息头会自动设置为实体内容的长度。HTTP请求例如：POST/reg.phpHTTP/1.1Host:Content-Type:application/x-www-form-urlencodedContent-Length:17

name=lee&psd=hnxyPOST方式对于使用POST方式传递的请求信息，服务器端程序会采用与获取GET类似的方式来获取表单各个字段的数据。

在实际开发中，通常都会使用POST方式发送请求，其原因主要有两个：（1）POST传输数据大小无限制（2）POST比GET请求方式更安全HTTP请求请求头消息主要用于向服务器端传递附加消息，例如，客户端可以接受的数据类型、压缩方法、语言以及发送请求的超链接所属页面的URL地址等信息。例如Host:localhost:8080Accept:image/gif,image/x-xbitmap,*Referer:http://localhost:8080/itcast/Accept-Language:zh-cn,zh;q=0.8,en-us;q=0.5,en;q=0.3Accept-Encoding:gzip,deflateContent-Type:application/x-www-form-urlencodedUser-Agent:Mozilla/4.0(compatible;MSIE7.0;WindowsNT5.1;GTB6.5;CIBA)Connection:Keep-AliveCache-Control:no-cacheHTTP请求请求头消息主要用于向服务器端传递附加消息，例如，客户端可以接受的数据类型、压缩方法、语言以及发送请求的超链接所属页面的URL地址等信息。总结每个请求消息头都是由一个头字段名称和一个值构成。头字段名称和值之间用冒号(:)和空格()分隔。每个请求消息头之后使用一个回车换行符标志结束。注意：头字段名称不区分大小写，但习惯上将单词的第一个字母大写。HTTP请求常用的HTTP请求消息头HTTP请求消息头含义Accept客户端浏览器支持的数据类型Accept-Charset客户端浏览器采用的编码Accept-Encoding客户端浏览器支持的数据压缩格式Accept-Language客户端浏览器所支持的语言包，可以指定多个Host客户端浏览器想要访问的服务器主机If-Modified-Since客户端浏览器对资源的最后缓存时间Referer客户端浏览器是从哪个页面去访问服务器的User-Agent客户端主机的环境信息，包括使用的操作系统，浏览器版本号等Cookie客户端需要带给服务器的数据Connection请求完成后，客户端希望是保持连接还是关闭连接HTTP请求谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术HTTP状态码（一）2.3HTTP状态码HTTP响应目录CONTENTS1201HTTP响应2.3HTTP状态码（一）HTTP响应响应状态行响应消息头实体内容

HTTP响应信息当服务器收到浏览器的请求后，会回送响应消息给浏览器。一个完整的HTTP响应信息的组成：接下来将围绕HTTP响应消息的响应状态行、响应消息头进行详细地讲解。HTTP响应HTTP响应状态行位于响应消息的第一行，它主要包含三个部分，分别是HTTP协议版本、状态码和状态描述信息。例如HTTP/1.1200OKHTTP/1.1是通信使用的协议版本200是状态码OK是状态描述信息响应状态行的每个部分需要使用空格分隔，最后以回车换行结束。注意：HTTP响应02HTTP状态码2.2

HTTP状态码（一）响应状态码(Status-Code)用于表示服务器对客户端请求的各种不同处理结果和状态，它是由一个三位的十进制数表示。响应状态码可以分为5个类别，通过最高位为1~5来进行分类，这5个类别的作用分别如下所示：

类别：

作用：

成功接收请求，要求客户端继续提交下一次请求才能完成整个处理过程。成功接收请求并已完成整个处理过程。为完成请求，客户端需进一步细化请求。客户端的请求有错误。服务器端出现错误。HTTP状态码1xx2xx3xx4xx5xx状态码说明100（继续）告诉客户端应该继续请求。如客户端发送一个值为100-continue的Expect头字段，询问服务器是否可以在后面的请求中发送一个附加文档。这种情况下，如果服务器返回100状态码，则告诉客户机可以继续，如果返回417状态码，则告诉客户端不能接收下次请求中附加的文档。101（切换协议）如果客户端发送的请求要求使用另外一种协议与服务器进行对话，服务器发送101响应状态码表示自己将遵从客户端请求，转换到另外一种协议

1xx状态码HTTP状态码HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。状态码说明200（正常）客户端的请求成功，响应消息返回正常的请求结果。201（已创建）服务器已经根据客户端的请求创建了文档，文档的URL为响应消息中Location响应头的值。202（已接受）客户端的请求已被接受，但服务器的处理目前尚未完成，比如说对于批处理的任务。203（非权威信息）文档已经正常返回，但一些实体头可能不确切，使用的是本地缓存或者第三方信息，而不是最原始的（最权威的）信息。204（无内容）规定浏览器显示已缓存的文档。服务器只会回送一些响应消息头，而不会回送实体内容。如果用户刷新某个页面时，并且服务器能够确定客户端当前显示的页面已经是最新的，这种功能就很有用，不用向客户端传送文档内容，节省了网络流量和服务器处理时间。205（重置内容）表示没有新的文档，浏览器应显示原来的文档，但要重置文档的内容，例如，清除表单字段中已经存在的内容。206（部分内容）当客户端发送的请求消息中包含一个Range头（可能还包含一个和Range头一起使用的If-Range头）请求文档的部分内容，如果服务器按客户端的要求完成了这个请求，就会返回一个206的状态码。HTTP状态码2xx状态码状态码说明300（多项选择）客户端请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提供一个优先选择的文档，它应该把文档的URL作为Location响应消息头的值返回，这样客户端可以根据Location头的值进行自动跳转。301（永久移动）指出被请求的文档已经被移动到别处，此文档新的URL地址为响应头Location的值，浏览器以后对该文档的访问会自动使用新的URL地址。302（找到）和301类似，但是Location头中返回的URL是一个临时的、而非永久的地址。303（参见其它）和302类似，很多客户端处理303状态码的方式和302一样。304（未修改）如果客户端有缓存的文档，它会在发送的请求消息中附加一个If-Modified-Since请求头，表示只有请求的文档在If-Modified-Since指定的时间之后发生过更改，服务器才需要返回新文档。状态码304表示客户端缓存的版本是最新的，客户端应该继续使用它。否则，服务器将使用状态码200返回所请求的文档。305（使用代理）客户端应该通过Location头所指定的代理服务器获得请求的文档。307（临时重定向）和302类似。按照规定，如果浏览器使用POST方式发出请求，只有响应状态码为303时才能重定向，但实际上许多浏览器对302状态码也按303状态码来处理。由于这个原因，HTTP1.1新增了307状态码，以便更加清楚的区分几个状态码：如果服务器发送303状态码，浏览器可以重定向GET和POST请求；如果是307状态码，浏览器只能重定向GET请求。HTTP状态码HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。3xx状态码谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术HTTP状态码（二）2.4HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。状态码说明406（不能接受）客户端请求的资源已经找到，但是和请求消息中Accept、Accpet-Charset、Accept-Encoding、Accept-Language请求头的值不兼容。407（需要代理服务验证）由代理服务器向客户端发送的状态码，配合Proxy-Authenticate响应头一起使用，表示客户端必须经过代理服务器的授权。客户端再次发送请求时，应该带上一个Proxy-Authorization请求头。408（请求超时）在服务器等待的时间内，客户端没有发出任何请求。409（冲突）由于请求和资源当前的状态相冲突，导致请求不能成功。这个状态码通常和PUT请求有关，例如，要上传的文件覆盖一个正在服务器端打开的文件。410（离开）请求的文档已经不再可用，而且服务器不知道应该重定向到哪个地址。410通常表示文档被永久的移除了，而不像404那样表示由于未知的原因文档不可用。411（需要长度）请求消息中包含了实体内容，却没有包含指定内容长度的Content-Length请求头。HTTP状态码4xx状态码状态码说明412（为满足前提条件）请求头中的一些前提条件在服务器中测试失败。413（请求实体过大）请求消息的大小超过了服务器愿意或者能够处理的范围，服务器会关闭连接，阻止客户端继续请求。如果服务器认为自己稍后能够再处理该请求，则在响应消息中发送一个Retry-After响应头告诉客户端不能处理只是暂时的，稍后可以再次尝试请求。414（请求URI过长）请求的URI（这里就是指URL）太长，服务器无法进行解释处理。这种情况很少发生，一般是客户端误把POST请求当成GET请求进行处理。415（不支持的媒体类型）请求消息中实体内容的格式不被服务器所支持。416（请求的范围不正确）当客户端请求消息中的Range头指定的范围和请求资源没有交集，服务器会返回416状态码。417（预期失败）可以被服务器或者代理服务器回送。当客户端的请求消息中包含Expect请求头，Expect头中的请求服务器不支持，或者代理服务器明确知道服务器不支持，则会回送417状态码。HTTP状态码HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。4xx状态码状态码说明500（内部服务器错误）最常见的服务器错误。大部分情况下，是服务器端的CGI、ASP、JSP等程序发生了错误，一般服务器会在相应消息中提供具体的错误信息。501（未实现）服务器不支持HTTP请求消息使用的请求方式。502（无效网关）服务器作为网关或者代理访问上游服务器，但是上游服务器返回了非法响应。503（服务不可用）由于服务器目前过载或者处于维护状态，不能处理客户端的请求。也就是说这种情况只是暂时的，服务器会回送一个Retry-After头告诉客户端何时可以再次请求。如果客户端没有接收到Retry-After响应头，会把它当做500状态码来处理。504（网关超时）服务器作为网关或者代理访问上游服务器，但是未能及时获得上游服务器的响应。505（不支持HTTP版本）服务器不支持请求行中的HTTP版本。响应消息中会描述服务器为什么不支持该HTTP版本以及支持的HTTP版本。HTTP状态码HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。5xx状态码接下来列举几个Web开发中比较常见的状态码：HTTP状态码HTTP1.1协议版本下的5种类别的状态码、状态信息(每个状态码后面小括号中的内容就是状态信息)及其作用。200：表示服务器成功处理了客户端的请求。302：表示请求的资源临时从不同的URI响应请求，但请求者应继续使用原有位置来进行以后的请求。例如，在请求重定向中，临时URI应该是响应的Location头字段所指向的资源。表示服务器找不到请求的资源。例如，访问服务器不存在的网页经常返回此状态码。500：表示服务器发生错误，无法处理客户端的请求。在HTTP响应消息中，第一行内容是响应状态行，其余的内容是响应消息头。HTTP响应消息头响应消息头中包含了大量附加响应信息，其中包括服务程序名、被请求资源需要的认证方式、客户端请求资源的最后修改时间、重定向地址等信息。HTTP状态码常用的HTTP响应消息头HTTP响应消息头说明Location控制浏览器显示哪个页面Server服务器的类型Content-Encoding服务器发送的压缩编码方式Content-Length服务器发送显示的字节码长度Content-Language服务器发送内容的语言和国家名Content-Type服务器发送内容的类型和编码类型Last-Modified服务器最后一次修改的时间Refresh控制浏览器1秒钟后转发URL所指向的页面Accept-Ranges服务器是否支持断点续传，bytes表示支持，none表示不支持Content-Disposition服务器控制浏览器以下载方式打开文件Transfer-Encoding服务器分块传递数据到客户端Set-Cookie服务器发送Cookie相关的信息Expires服务器控制浏览器不要缓存网页，默认是缓存Cache-Control服务器控制浏览器不要缓存网页Pragma服务器控制浏览器不要缓存网页ConnectionHTTP请求的版本的特点Date响应网站的时间HTTP状态码谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术Ajax简介3.1Ajax的优点Ajax的应用案例什么是Ajax目录CONTENTS12301什么是Ajax3.1

Ajax简介Ajax是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作，这样可以实现在不需要刷新页面的情况下与服务器进行通信，从而减少了用户的等待时间。Ajax就是浏览器提供的一套API，可以通过JavaScript调用，从而实现通过代码控制请求与响应。实现网络编程。Ajax的定义Ajax的定义Ajax相对于传统的Web应用开发有哪些区别呢？传统Web工作流程Ajax工作流程023.1

Ajax简介Ajax的应用案例Ajax应用案例Ajax应用案例表单驱动的交互传统的表单提交，在文本框输入内容后，点击按钮，后台处理完毕后，页面刷新，再回头检查是否刷新结果正确。使用Ajax，在点击提交按钮后，立刻进行异步处理，并在页面上快速显示了更新后的结果，这样提交不会导致整个页面刷新。深层次的树的导航深层次的级联菜单（树）的遍历是一项非常复杂的任务，使用JavaScript来控制显示逻辑，使用Ajax延迟加载更深层次的数据可以有效的减轻服务器的负担。Ajax应用案例用户间的交流响应在多人参与的交流讨论的场景下，最不愿发生的事情就是让用户一遍又一遍刷新页面以便知道是否有新的讨论出现。新的回复应该以最快的速度显示出来，而把用户从分神不断的刷新中解脱出来，使用Ajax是最好的选择。类似投票等场景对于投票等类似的场景中，如果提交过程需要达到40秒，很多的用户就会直接忽略过去而不会参与，使用Ajax可以把时间控制在很短的时间内，从而吸引更多的用户加入进来。Ajax应用案例过滤场景对数据使用过滤器，按照时间排序、按照时间和名称排序、开关过滤器等。任何要求具备很高交互性数据操作的场合都应该用JavaScript，而不是使用用一系列的服务器请求来完成。在每次数据更新后，再对其进行查找和处理需要耗费较多的时间，而Ajax可以加速这个过程。文本输入场景在文本框等输入表单中给予输入提示或者自动完成，可以有效的改善用户体验，尤其是那些自动完成的数据可能来自于服务器端的场合，使用Ajax是很好的选择。033.1

Ajax简介Ajax的优点Ajax的优点（1）可以把一部分以前由服务器负担的工作转移到客户端。（2）无刷新更新页面，从而使用户不用再像以前一样在服务器处理数据时，只能在死板的白屏前焦急的等待。（3）可以调用XML等外部数据，进一步促进页面显示和数据的分离。（4）基于标准化的并被广泛支持的技术，不需要下载插件或者小程序，即可轻松实现桌面应用程序的效果。（5）Ajax没有平台限制。谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术Ajax工作原理3.2Ajax的原理Ajax的技术组成目录CONTENTS1201Ajax的技术组成3.2

Ajax工作原理Ajax的技术组成Ajax的技术组成XMLHttpRequest对象Ajax使用的技术中，最核心的技术就是XMLHttpRequest，它是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE5.0浏览器中率先推出的。现在许多浏览器都对其提供了支持，不过实现方式与IE有所不同。xmlHttpRequest，可扩展超文本传输请求，xmlHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页，提供了对HTTP协议的完全的访问，包括做出GET、POST和HEAD请求的能力，可以同步或异步返回Web服务器的响应，并能以文本或者一个DOM文档形式返回内容，并不限于和XML文档一起使用，可以接收任何形式的文本文档。Ajax的技术组成XML语言XML文档结构Ajax的技术组成XML语言（1）XML文档必须有一个顶层元素，其他元素必须嵌入在顶层元素中。（2）元素嵌套要正确，不允许元素间相互重叠或跨越。（3）每一个元素必须同时拥有起始标记和结束标记。这点与HTML不同，XML不允许忽略结束标记。（4）起始标记中的元素类型名必须与相应结束标记中的名称完全匹配。（5）XML元素类型名区分大小写，而且开始和结束标记必须准确匹配。例如，分别定义起始标记<Title>、结束标记</title>，由于起始标记的类型名与结束标记的类型名不匹配，说明元素是非法的。（6）元素类型名称中可以包含字母、数字以及其他字母元素类型，也可以使用非英文字符。名称不能以数字或符号"-"开头，名称中不能包含空格符和冒号“：”。（7）元素可以包含属性，但属性值必须用单引号或双引号括起来，但是前后两个引号必须一致，不能一个是单引号，一个是双引号。在一个元素节点中，属性名不能重复。XML语法要求Ajax的技术组成XML语言为XML文档中的元素定义属性<infoid="1">XML的注释注释是为了便于阅读和理解，在XML文档添加的附加信息。<!--开始符号-->结束符号Ajax的技术组成JavaScript脚本语言JavaScript是一种解释型的、基于对象的脚本语言，其核心已经嵌入到目前主流的Web浏览器中。DOM在Ajax应用中，通过JavaScript操作DOM，可以达到在不刷新页面的情况下实时修改用户界面的目的。CSSCSS是CascadingStyleSheet（层叠样式表）的缩写，是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。023.2

Ajax工作原理Ajax的工作原理Ajax工作原理Ajax：Asynchronousjavascriptandxml，实现了客户端与服务器进行数据交流过程。使用技术的好处是：不用页面刷新，并且在等待页面传输数据的同时可以进行其他操作。这就是异步调用的很好体现。首先得了解什么是异步和同步的概念。

举个例子：比如你去图书馆借某种书，可惜图书馆此书被借完。这时可以采用两种做法。第一种做法：在图书馆一直等待，直到有人还书，然后再去吃饭睡觉。第二种做法：直接跟图书馆管理员约定，若是有人还书，直接通知你，可以做自己的事情，到时候会通知你。而第一种做法就是同步的表现，必须等待别人还书（等待服务器返回信息）才进行其他事情。而第二种做法就是异步的表现，不耽误时间，合理利用时间高效率做事。Ajax工作原理通过xmlHttpRequest对象来向服务器发异步请求，相当于在用户和服务器之间加了一个中间层，使用户操作和服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。使用Ajax可以把以前服务器承担的部分工作转移到客户端，利用客户端限制的处理能力来处理，从而减轻服务器的带宽负担，达到节约ISP空间及带宽租用成本的目的。Ajax工作原理那如何使用Ajax技术？首先，有客户端事件触发Ajax事件。然后，创建xmlHttpRequest对象，根据浏览器不同，创建的xmlHttpRequest对象不同。用open调用，用send发送请求给Ajax引擎。最后，执行完毕后，把结果返回给客户端。谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术AjaxXHR（一）3.3XHR请求XHR创建对象目录CONTENTS1201XHR创建对象3.3

AjaxXHR（一）XHR创建对象XMLHttpRequest是Ajax的基础。所有现代浏览器均支持XMLHttpRequest对象（IE5和IE6使用ActiveXObject）。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。操作演示(一)023.3

AjaxXHR（一）XHR请求XHR请求XMLHttpRequest对象用于和服务器交换数据。XHR请求GET还是POST？与POST相比，GET更简单也更快，并且在大部分情况下都能用。然而，在以下情况中，请使用POST请求：无法使用缓存文件（更新服务器上的文件或数据库）向服务器发送大量数据（POST没有数据量限制）发送包含未知字符的用户输入时，POST比GET更稳定也更可靠XHR请求操作演示(二)谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术AjaxXHR（二）3.4XHRreadyStateXHR响应目录CONTENTS1201XHR响应3.4

AjaxXHR（二）XHR响应操作演示(一)服务器响应如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或responseXML属性。若来自服务器的响应并非XML，使用responseText属性；若来自服务器的响应是XML，且要作为XML对象解析，使用responseXML属性02XHRreadyState3.4

AjaxXHR（二）XHRreadyStateonreadystatechange事件：当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState改变时，就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要的属性：XHRreadyStatecallback函数是一种以参数形式传递给另一个函数的函数。如果您的网站上存在多个Ajax任务，那么您应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个Ajax任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：操作演示(二)谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术Ajax数据库实例3.5Ajax兼容性问题Ajax数据库操作目录CONTENTS1201Ajax数据库操作3.5

Ajax数据库实例Ajax数据库操作首先，进行创建数据库的表；接着在表中插入数据；Ajax数据库操作注:在查询传递变量的方法是根据HTTP标准和表单URL?variable1=value1;&variable2=value2;；其次，客户端的html文件编码；Ajax数据库操作客户端脚本已准备就绪。现在我们来写我们的服务器端脚本，这会从数据库中提取年龄，WPM和性别将其发送回客户端。“ajax-example.php”文件放入下面的代码。接着，服务器端PHP代码；Ajax数据库操作接着，服务器端PHP代码；Ajax数据库操作操作实例02Ajax兼容性问题3.5

Ajax数据库实例Ajax兼容性问题支持Ajax技术的浏览器微软InternetExplorer版本5.0及以上版本，和基于它的浏览器（MacOS版本不支持）基于Gecko的浏览器，如Mozilla，MozillaFirefox，SeaMonkey，Epiphany，Galeon和Netscape版本7.1及以上版本实现KHTMLAPI版本3.2及以上版本的浏览器，包括Konqueror版本3.2及以上版本，还有AppleSafari版本1.2及以上版本Opera浏览器版本8.0及以上版本，包括OperaMobile浏览器版本8.0及以上版本Ajax兼容性问题Ajax传输中文兼容性问题解决方案使用Ajax时，采用get传值，如果url中含有中文，我们可以发现在火狐和IE下服务器端获得的值是不一样的。因为火狐采用的是utf8编码传值，而IE采用的gb2312编码传值的。解决这个兼容性问题有两个方案，具体如下：Ajax兼容性问题Ajax传输中文兼容性问题解决方案以上情况都是基于服务器端的编码是utf8的情况下的谢谢大家观看——江西应用技术职业学院——江西应用技术职业学院web前后端数据交互技术Ajax应用实例（一）3.6.1Ajax实例与ASP/PHP的操作目录CONTEN