《传智播客ajax视频》课件

入门课程AJAX入门课程介绍基础知识，帮助学习者掌握异步通信技术AJAX的概述AJAX的定义的目的AJAX AJAX指的是异步和它是一种用于创的主要目的是在不重新加载整个页面的情况下，使用AJAX JavaScriptXML AJAX建交互式网页的技术与服务器进行交互JavaScript使用在后台与服务器进行通信，而无需这使得网页更加动态，并提高了用户体验AJAX JavaScript重新加载整个页面的作用AJAX动态更新网页内容实时用户输入验证异步数据交互丰富用户界面可以使网页在不刷新整可以实时验证用户输允许网页在后台与服务可以创建更丰富、更交AJAX AJAX AJAX AJAX个页面的情况下更新部分内入，避免提交无效数据，提器进行数据交互，不影响用互性的网页，例如拖放、动容，提高用户体验高效率户界面，提高网站的响应速画、实时聊天等度的特点AJAX异步动态更新页面可以使客户端与服务器进行异步无需刷新页面，可以实现部分页面内容AJAX通信，无需刷新页面，可以提高用户体的动态更新，提升用户体验验减少服务器负担丰富用户交互可以将网页内容的更新操作放在使网页更加动态，提供丰富的用AJAX AJAX客户端完成，减少了服务器负担，提高户交互体验，例如实时数据更新、下拉了网站性能菜单提示等功能的同步和异步AJAX同步异步12同步请求在等待服务器响应异步请求不会阻塞浏览器，时，浏览器会阻塞其他操用户可以继续进行其他操作作区别适用场景34同步请求会阻塞页面，而异异步请求适用于需要与服务步请求不会器进行交互，但无需阻塞浏览器的情况的通信过程AJAX发送请求1客户端使用对象向服务器发送请求XMLHttpRequest接收响应2服务器处理请求并返回响应数据更新页面3客户端解析响应数据，更新页面内容的核心对象AJAX XMLHttpRequest浏览器对象是浏览器提供的一个内置对象，用于在代码中发送XMLHttpRequest JavaScriptHTTP请求服务器交互它允许代码与服务器进行异步通信，实现网页的动态更新，而无需重新加载整JavaScript个页面核心作用对象是技术的核心，它负责创建请求、发送请求、接收XMLHttpRequest AJAXHTTP服务器响应并处理响应数据的常用方法XMLHttpRequestopen sendsetRequestHeader getResponseHeader创建与服务器的连接，指定发送请求到服务器，可选参设置请求头信息，如获取响应头信息，如请求方法或数用于发送请求主体或或GET POSTContent-Type Content-Type Last-和请求请求URL POSTAuthorization Modified的常用属性XMLHttpRequestreadyState status表示请求的当前状态，有五种表示状态码，例如HTTP状态值，分别代表请求的不同表示成功，表示页200404阶段面未找到responseText responseXML表示服务器返回的响应文本内表示服务器返回的响应XML容，通常用于获取数文档，通常用于解析数JSON XML据据使用发送请求XMLHttpRequest GET创建对象XMLHttpRequest1使用创建对象`new XMLHttpRequest`设置请求方法和URL2方法设置请求类型和地址`open`发送请求3方法发起请求`send`处理响应4使用事件监听响应`onload`使用发送请求的步骤包含创建对象、设置请求方法和、发送请求以及处理响应在处理响应时，需要通过事XMLHttpRequest GETURL`onload`件来获取服务器返回的数据通过对象，可以轻松实现与服务器的异步数据交互XMLHttpRequest使用发送XMLHttpRequest请求POST设置请求方法1将对象的方法中的第二个参数设置XMLHttpRequest`open`为`POST`设置请求头2使用方法设置请求`setRequestHeader``Content-Type`头，指定请求体的数据类型为`application/x-www-form-urlencoded`发送请求3使用方法发送请求，并将请求体数据作为参数传递`send`案例实践用实现用户名校验AJAX页面设计创建包含用户名输入框和校验结果显示区域的页面，添加按钮触发校验操作HTML请求AJAX用户输入用户名后，点击按钮触发请求，将用户名发送至服务器端进行校验AJAX服务器端处理服务器端接收用户名，进行数据库查询，根据结果返回校验结果，例如用户名已存在或用户名“”“可用”响应AJAX请求收到服务器响应后，将结果显示在页面上的校验结果区域，告知用户校验结果AJAX案例实践用实现省市区三级联动AJAX前端页面使用和创建三个下拉菜单，分别代表省份、城市和区县当用户选择省份时，使用请求获取对应城市的列表，并更新城市下拉菜单类似地，当用户选择城市HTML JavaScriptAJAX时，使用请求获取对应区县的列表，并更新区县下拉菜单AJAX数据准备在后端准备一个数据接口，用于返回省份、城市和区县的列表数据，并使用格式进行数据传输JSON请求AJAX使用对象或的方法发送请求，将选择的省份或城市作为参数传递给后端接口XMLHttpRequest jQuery AJAX AJAX数据处理接收后端返回的数据，解析数据，并更新对应的下拉菜单选项JSON用户体验确保下拉菜单更新流畅，用户可以选择不同的省份、城市和区县，并查看相应的选项列表案例实践用实现表单动态校验AJAX获取用户输入1通过事件监听获取用户在表单字段中的输入发送请求AJAX2将用户输入发送到服务器进行校验接收校验结果3服务器返回校验结果，例如成功或失败更新页面4根据校验结果更新页面，显示提示信息表单动态校验可以提高用户体验，及时反馈输入错误，避免提交无效表单AJAX案例实践用实现文件上传AJAX选择文件1用户选择要上传的文件创建对象FormData2将文件数据封装进对象FormData发送请求AJAX3使用对象发送请求XMLHttpRequest POST服务端接收文件4服务端接收文件并进行处理本案例演示如何使用实现文件上传功能，包含文件选择、数据封装、请求发送以及服务端接收处理等步骤AJAXAJAX中的jQuery AJAX简化操作链式调用12提供了丰富的的方法支持链jQuery AJAX jQuery AJAX方法，简化了式调用，方便进行多个异步对象的操作XMLHttpRequest创建和配置回调函数跨浏览器兼容34使用回调函数处理请的方法封装了AJAXjQuery AJAX求的成功和失败，提高代码不同浏览器之间的差异，确可读性保代码的跨浏览器兼容性中的方法jQuery AJAX$.ajax$.get$.post$.getJSON的核心方法，发送请求，用于获取服发送请求，用于向服务专门用于获取格式的数jQuery AJAXGET POSTJSON提供灵活的配置和控制选务器端数据，简化了器提交数据，与方法据，简化了数据解析步骤，$.ajax$.get项，适用于复杂场景方法的调用类似，但更适合发送敏感信提升代码可读性息案例实践用实现jQuery AJAX用户名校验前端页面1用户输入用户名，点击校验按钮，触发请求AJAX请求jQuery AJAX2发送请求到服务器，传递用户名参数AJAX服务器端处理3验证用户名是否已存在，返回数据JSON前端处理结果4根据服务器返回的数据，显示校验结果案例实践用实现表单提交jQuery AJAX本节将通过一个实例演示如何使用实现表单提交功能，无需页面刷新即可将表单数据发送至服务器端并处理jQuery AJAX准备表单1设计一个包含用户输入字段的表单，例如姓名、邮箱、密码等编写代码jQuery2使用方法将表单数据封装成格式，并发送至服务器端jQuery AJAXJSON服务器端处理3接收请求，处理表单数据，并返回处理结果给客户端AJAX更新页面4根据服务器端返回的结果更新页面内容，例如显示成功提示或错误信息使用实现表单提交，不仅简化了代码编写，而且提高了用户体验，使页面更加流畅，提升了网站的交互性jQuery AJAX案例实践用实现分页效果jQuery AJAX获取总页数渲染页面内容使用请求服务器端，获取总页数信息根据获取的数接收到服务器端返回的数据后，使用更新页面内容，展示相应页jQuery AJAXAPI jQuery据，动态生成页面上的分页导航按钮面的数据，并更新页面上的分页导航123点击分页按钮当用户点击分页按钮时，触发请求，将当前页码传递给服务器端AJAX，获取对应页面的数据API案例实践用实现无刷新jQuery AJAX购物车添加商品到购物车用户点击添加到购物车按钮，使用发送请求到服务器端，将商品信“”jQuery AJAX息添加到购物车更新购物车数量服务器端返回更新后的购物车商品数量，使用更新页面上的购物车数jQueryAJAX量显示显示购物车内容用户点击购物车按钮，使用发送请求到服务器端，获取购物车商品列jQueryAJAX表并显示在弹出窗口或页面指定区域跨域问题及其解决方案什么是跨域同源策略跨域解决方案跨域问题指的是浏览器出于安全考虑，同源策略是浏览器的一种安全机制，它为了解决跨域问题，可以使用、JSONP不允许不同域名下的网页相互访问限制了来自不同源的脚本访问或修改其代理服务器、等方法CORS他源的资源同源策略和跨域同源策略同源定义12同源策略是浏览器安全机协议、域名、端口号必须一制，限制来自不同源的脚本致，才算同源访问彼此的资源跨域3不同源的网站或页面之间的通信行为称为跨域，同源策略会阻止这种行为跨域解决方案JSONP工作原理JSONP（客户端通过标签加载服JSONP JSONwith script）是一种利用务器端的脚本服务器Padding scriptJSONP标签跨域获取数据的技术它端返回一个包含回调函数和数利用浏览器允许跨域加载脚本据的代码客户端JavaScript的特性，将数据封装在回调函执行脚本，回调函数被调用，数中，从而实现跨域数据访问将数据传递给客户端优点缺点简单易用，无需额外的配置安全性较低，容易受到攻XSS支持请求，但不支持击仅支持请求，无法满GET GET请求足所有场景的需求POST服务端代理跨域解决方案代理服务器作为中介，接收客户端请求并转发给目标服务器代理服务器会将目标服务器的响应信息返回给客户端，从而解决跨域问题代理服务器通常部署在与客户端同域下，确保与客户端的通信不受跨域限制资源共享HTML5Cross-Origin CORS安全机制头部信息请求授权HTTP是提供的一种安全机制，通过在头部信息中添加额外服务器端需要在响应头部信息中设置允CORS HTML5CORS HTTP允许浏览器向不同域的服务器发送跨域的信息来控制跨域请求的权限许跨域访问的域名请求安全问题及解决方案AJAX跨站请求伪造跨站脚本攻击CSRF XSS攻击者利用用户已登录网站的凭据，在用户不知情的情况下，攻击者将恶意脚本注入到网页中，当用户访问该网页时，脚本发送恶意请求到服务器，执行非授权操作会被执行，从而窃取用户敏感信息或执行恶意操作•使用•对用户输入进行严格过滤和转义CSRF Token•验证•使用HTTP RefererContent SecurityPolicy CSP攻击及其预防CSRF攻击原理攻击危害攻击防御CSRF CSRF CSRF攻击，跨站请求伪造，攻击者可导致用户敏感信息泄露，非法转使用，验证请求来CSRFCSRFToken利用用户已登录网站的认证信息，发账，账号被盗等源，防止恶意请求送恶意请求，执行非预期操作攻击及其预防XSS攻击原理预防措施XSS攻击者在网页中注入恶意脚本，当用户访问该网页时，脚本会•对用户输入进行严格的过滤和验证被浏览器执行，从而窃取用户信息或进行其他恶意行为•对输出内容进行转义处理•使用安全的编码方式•使用安全框架和库优化技巧AJAX减少请求次数优化数据传输使用缓存机制，合并多个请压缩数据，使用格式JSON求异步加载延迟加载使用异步加载脚本和样式延迟加载页面中非关键内容性能优化AJAX减少请求优化代码逻辑合理使用缓存优化网络传输HTTP合并多个请求，尽量减少精简代码，避免不必要的代使用缓存机制，例如浏览器使用压缩技术，例如压gzip请求次数，例如使用码执行，例如使用缓存机缓存、服务器缓存等，减少缩，减少数据传输量，提高HTTP减少图片请求制，减少重复计算服务器压力，提高响应速传输速度CSS sprites次数度。