让教学更简单,让学习更有效 什么是Ajax 项目七 Ajax的异步通信 XML与JsoN数据格式 Ajax商品发布 FormData收集表单数据 jQuery操作Ajax 跨域请求 富文本过滤 在线编辑器
让IT教学更简单,让IT学习更有效 项目七 Ajax商品发布 • 什么是Ajax • Ajax的异步通信 • XML与JSON数据格式 • FormData收集表单数据 • jQuery操作Ajax • 跨域请求 • 富文本过滤 • 在线编辑器
让教学更简单,让∏学习更有效 任务 Ajax表单验证 目录 任务二进度条文件上传 任务三下拉菜单三级联动 任务四 JSONP跨域请求 任务五在线编辑器
让IT教学更简单,让IT学习更有效 目 录 任务一 任务二 任务三 任务四 任务五 Ajax表单验证 进度条文件上传 下拉菜单三级联动 JSONP跨域请求 在线编辑器
项目描述 让教学更简单,让∏学习更有效 Ajax技术是Web20应用中异步交互的翘楚 相对于传统的Web应用开发,Ajax技术实现了 用户体验更好、占用带宽更少、运行速度更快及 用户等待时间更少等优点,被开发人员所喜爱 接下来请在本项目中结合Aax技术和PHP脚 本语言完成商品的发布,具体包括商品表单的验 M 证、进度条文件上传、下拉菜单三级联动 JSONP跨域请求以及在线编辑器的应用 9 起
项目描述 让IT教学更简单,让IT学习更有效 Ajax技术是Web2.0应用中异步交互的翘楚 ,相对于传统的Web应用开发,Ajax技术实现了 用户体验更好、占用带宽更少、运行速度更快及 用户等待时间更少等优点,被开发人员所喜爱。 接下来请在本项目中结合Ajax技术和PHP脚 本语言完成商品的发布,具体包括商品表单的验 证、进度条文件上传、下拉菜单三级联动、 JSONP跨域请求以及在线编辑器的应用
任务一:Aax表单验证 让教学更简单,让∏学习更有效 商品名称长度需在350个字符之间 商品价格必须是0.01~9999之间的 数字 任务 商品数量或库存必须为0~99999 之间的整数 说明 商品编号不能够重复 商品简介需在140个字符以内 回
任务一:Ajax表单验证 让IT教学更简单,让IT学习更有效 任 务 说 明 • 商品名称长度需在3~50个字符之间 • 商品价格必须是0.01~99999之间的 数字 • 商品数量或库存必须为0~999999 之间的整数 • 商品编号不能够重复 • 商品简介需在140个字符以内
任务一:Aax表单验证 让教学更简单,让∏学习更有效 什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求 4、Ajax接收服务器返回的信息 引入知识点 5、XML数据格式 回
让IT教学更简单,让IT学习更有效 引 入 知 识 点 任务一:Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求 4、Ajax接收服务器返回的信息 5、XML数据格式
任务一:Aax表单验证 让教学更简单,让∏学习更有效 什么是Aax Ajax是 Asynchronous JavaScript And XML的缩写,即异步 JavaScript和 XML技术。它并不是一门新的语言或技术,它是由 JavaScript、XML、 DOM、CSS、 XHTML等多种已有技术组合而成的一种浏览器端技术,用 来实现与服务器进行异步交互的功能 回
任务一:Ajax表单验证 让IT教学更简单,让IT学习更有效 什么是Ajax Ajax是Asynchronous JavaScript And XML的缩写,即异步JavaScript和 XML技术。它并不是一门新的语言或技术,它是由JavaScript、XML、 DOM、CSS、XHTML等多种已有技术组合而成的一种浏览器端技术,用 来实现与服务器进行异步交互的功能
任务一:Aax表单验证 让教学更简单,让∏学习更有效 什么是Aax 普通网页链接请求的特点 当页面中用户每触发一个HTTP请求时,即便只有少量数据发生变化,网 页中所有的表格、图片等都没有改变,在表单提交时,依然必须从服务 器重新加载网页。 总结:处理一等待一处理一等待 回
任务一:Ajax表单验证 让IT教学更简单,让IT学习更有效 什么是Ajax 当页面中用户每触发一个HTTP请求时,即便只有少量数据发生变化,网 页中所有的表格、图片等都没有改变,在表单提交时,依然必须从服务 器重新加载网页。 普通网页链接请求的特点 总结:处理—等待—处理—等待
任务一:Aax表单验证 让教学更简单,让∏学习更有效 什么是Aax Ajax请求的特点 ·“按需获取数据”,只发送和接收少量必不可少的数据 网页中没有改变的数据不再进行重新加载 最大程度地减少了冗余请求和响应 减轻对服务器的负担,节省带宽,增强用户的体验效果 回
任务一:Ajax表单验证 让IT教学更简单,让IT学习更有效 什么是Ajax • “按需获取数据”,只发送和接收少量必不可少的数据 • 网页中没有改变的数据不再进行重新加载 • 最大程度地减少了冗余请求和响应 • 减轻对服务器的负担,节省带宽,增强用户的体验效果 Ajax请求的特点
任务一:Aax表单验证 让教学更简单,让∏学习更有效 什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求 4、Ajax接收服务器返回的信息 引入知识点 5、XML数据格式 回
让IT教学更简单,让IT学习更有效 引 入 知 识 点 任务一:Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求 4、Ajax接收服务器返回的信息 5、XML数据格式
任务一:Aax表单验证 让教学更简单,让∏学习更有效 Ajax对象的创建 Aax中最核心的技术就是 XmlhTtpreqUest,它最早是1999年微软公司 发布的E5浏览器中嵌入的一种技术。 现在许多浏览器都对其提供了支持,不过针对不同的浏览器使用方式有 所不同。下面我们看一下,如何在不同浏览器中创建Ajax对象 回
任务一:Ajax表单验证 让IT教学更简单,让IT学习更有效 Ajax对象的创建 Ajax中最核心的技术就是XMLHttpRequest,它最早是1999年微软公司 发布的IE5浏览器中嵌入的一种技术。 现在许多浏览器都对其提供了支持,不过针对不同的浏览器使用方式有 所不同。下面我们看一下,如何在不同浏览器中创建Ajax对象