项目七 Ajax商品发布 什么是Ajax Ajax的异步通信 XML与JSON数据格式 FormData收集表单数据

Presentation on theme: "项目七 Ajax商品发布 什么是Ajax Ajax的异步通信 XML与JSON数据格式 FormData收集表单数据"— Presentation transcript:

1 项目七 Ajax商品发布 什么是Ajax Ajax的异步通信 XML与JSON数据格式 FormData收集表单数据
jQuery操作Ajax 跨域请求 富文本过滤 在线编辑器 项目七 Ajax商品发布

2 任务一 Ajax表单验证 目录 任务二 进度条文件上传 任务三 下拉菜单三级联动 任务四 JSONP跨域请求 任务五 在线编辑器

3 项目描述 Ajax技术是Web2.0应用中异步交互的翘楚 ，相对于传统的Web应用开发，Ajax技术实现了 用户体验更好、占用带宽更少、运行速度更快及 用户等待时间更少等优点，被开发人员所喜爱。 接下来请在本项目中结合Ajax技术和PHP脚 本语言完成商品的发布，具体包括商品表单的验 证、进度条文件上传、下拉菜单三级联动、 JSONP跨域请求以及在线编辑器的应用。

4 任务 说明 任务一：Ajax表单验证 商品名称长度需在3~50个字符之间 商品价格必须是0.01~99999之间的数字
商品数量或库存必须为0~999999之间的整数 商品编号不能够重复 商品简介需在140个字符以内

5 引入知识点 任务一：Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求
5、XML数据格式

6 任务一：Ajax表单验证 什么是Ajax Ajax是Asynchronous JavaScript And XML的缩写，即异步JavaScript和XML技术。它并不是一门新的语言或技术，它是由JavaScript、XML、DOM、CSS、XHTML等多种已有技术组合而成的一种浏览器端技术，用来实现与服务器进行异步交互的功能。

7 任务一：Ajax表单验证 什么是Ajax 普通网页链接请求的特点
当页面中用户每触发一个HTTP请求时，即便只有少量数据发生变化，网页中所有的表格、图片等都没有改变，在表单提交时，依然必须从服务器重新加载网页。 总结：处理—等待—处理—等待

8 任务一：Ajax表单验证 什么是Ajax Ajax请求的特点 “按需获取数据”，只发送和接收少量必不可少的数据
网页中没有改变的数据不再进行重新加载 最大程度地减少了冗余请求和响应 减轻对服务器的负担，节省带宽，增强用户的体验效果

9 引入知识点 任务一：Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求
5、XML数据格式

10 任务一：Ajax表单验证 Ajax对象的创建
Ajax中最核心的技术就是XMLHttpRequest，它最早是1999年微软公司发布的IE5浏览器中嵌入的一种技术。 现在许多浏览器都对其提供了支持，不过针对不同的浏览器使用方式有 所不同。下面我们看一下，如何在不同浏览器中创建Ajax对象。

11 任务一：Ajax表单验证 Ajax对象的创建 （1）主流浏览器 主流浏览器包括火狐、google、Safari、opera等
var xhr = new XMLHttpRequest(); 变量xhr就是主流浏览器中Ajax的一个对象 对于Ajax对象的命名，与JavaScript中变量命名规则相同，且大小写敏感。

12 任务一：Ajax表单验证 Ajax对象的创建 （2）早期版本的IE浏览器 早期版本的IE浏览器指的是IE5、IE6、IE7等
var xhr =　new ActiveXObject("Microsoft.XMLHTTP"); //或写为 var xhr =　new ActiveXObject("Msxml2.XMLHTTP"); var xhr =　new ActiveXObject("Msxml2.XMLHTTP.3.0"); var xhr =　new ActiveXObject("Msxml2.XMLHTTP.5.0"); var xhr =　new ActiveXObject("Msxml2.XMLHTTP.6.0"); 上述按照从上到下的顺序依次针对IE从5.0到高版本之间的语法格式。

13 引入知识点 任务一：Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求
5、XML数据格式

14 任务一：Ajax表单验证 Ajax向服务器发送请求 （1）open()方法
open("method","URL"[,asyncFlag[,"userName"[,"password"]]]) method用于指定请求的类型，其值可为POST、GET、PUT、PROPFIND，大小写不敏感。 URL表示请求的地址，可以为绝对地址也可以为相对地址，并且可以传递查询字符串。其余参数为可选参数。 asyncFlagy用于指定请求方式，同步请求为false，默认为异步请求true。 userName用于指定用户名。 password用于指定密码。

15 任务一：Ajax表单验证 Ajax向服务器发送请求 （2）send()方法 send()方法用于发送请求到HTTP服务器并接收回应。
send(content) content用于指定要发送的数据，其值可为DOM对象的实例、输入流或字符串，一般与POST请求类型配合使用 如果请求声明为同步，该方法将会等待请求完成或者超时才会返回，否则此方法将立即返回。

16 任务一：Ajax表单验证 补充 Ajax向服务器发送请求
在使用GET方式传递中文参数时，要使用JavaScript中的encodeURIComponent()函数将中文字符换成十六进制形式，防止在某些浏览器（如IE浏览器）中中文乱码的问题 补充

17 引入知识点 任务一：Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求
5、XML数据格式

18 任务一：Ajax表单验证 Ajax接收服务器返回的信息 （1）readyState属性
readyState属性用于返回Ajax的当前状态，状态值有5种形式。 状态值 说明 0（未初始化） 对象已建立，但是尚未初始化（尚未调用open方法） 1（初始化） 对象已建立，尚未调用send方法 2（发送数据） send方法已调用，但是当前的状态及HTTP头未知 3（数据传送中） 已接收部分数据，因为响应及HTTP头不全，这时通过responseBody和responseText获取部分数据会出现错误 4（完成） 数据接收完毕，此时可以通过responseBody和responseText获取完整的回应

19 任务一：Ajax表单验证 Ajax接收服务器返回的信息 （2）onreadystatechange属性
onreadystatechange事件属性用于感知readyState属性状态的改变。 为了大家更好的理解这两个属性的使用，下面创建一个服务器端的文件 index.php，用于输出字符串，然后在浏览器端index.html中向服务器端发 送请求，并在控制台输出状态值。

20 任务一：Ajax表单验证 Ajax接收服务器返回的信息 （2）onreadystatechange属性 index.html
index.php

21 任务一：Ajax表单验证 Ajax接收服务器返回的信息 （2）onreadystatechange属性 运行结果 展示

22 任务一：Ajax表单验证 Ajax接收服务器返回的信息 （3）status属性 status属性用于返回当前请求的HTTP状态码
状态码值 说明 200 服务器成功返回网页 403 被禁止访问 404 请求的网页不存在 503 服务不可用 在感知当前Ajax对象状态时，为了追求程序的严谨性，需要同时判断当前HTTP状态status是否等于200（请求成功）。

23 任务一：Ajax表单验证 补充 Ajax接收服务器返回的信息 （3）status属性
Ajax中的statusText属性，仅当数据发送并接收完毕后，才可以获取当前请求的响应状态。 补充

24 任务一：Ajax表单验证 Ajax接收服务器返回的信息 （4）获取响应信息的相关属性
属性名 说明 responseText 将响应信息作为字符串返回 responseBody 将响应信息正文以unsigned byte数组形式返回，只读。 responseXML 将响应信息格式化为XML Document对象并返回，只读。 responseText属性用于返回文本格式的响应数据。 responseBody属性表示直接从服务器返回并未经解码的二进制数据。 responseXML属性用于接收XML数据格式的响应数据。

25 引入知识点 任务一：Ajax表单验证 1、什么是Ajax 2、Ajax对象的创建 3、Ajax向服务器发送请求
5、XML数据格式

26 任务一：Ajax表单验证 XML数据格式 XML是eXtensible Markup Language（可扩展标记语言）的缩写，它与HTML都是标签语言。但是XML可以自定义标签，将数据的描述和显示相分离，主要用于描述和存储数据。

27 任务一：Ajax表单验证 XML数据格式 Ajax可以通过XML数据格式可以与PHP服务器进行数据交换

28 任务一：Ajax表单验证 XML数据格式 为了让大家熟悉XML数据格式，下面创建一个简单的XML文档 上述第1行代码用于XML的声明
version表示XML的版本，是声明中必不可少的属性，且必须放在第1位 encoding用于编码声明 <student>、<name>与<addr>是开始标签 </student>、</name>与</addr>是结束标签 开始标签、结束标签与其之间的数据内容共同组成了XML元素 在XML文档中标签必须成对出现，且大小写敏感

29 任务一：Ajax表单验证 任务 实现

30 任务 说明 任务二：进度条文件上传 使用FormData收集表单数据，获取上传文件的信息
利用onprogress属性，通过浏览器的事件对象感知当前文件上传情况，获取文件总大小和已上传文件大小。 计算文件上传的进度，并将其显示到对应位置。

31 任务二：进度条文件上传 引入知识点 1、收集表单数据 2、获取Ajax传输进度

32 任务二：进度条文件上传 收集表单数据 在之前的学习中，我们都知道要收集表单提交的数据需要获取DOM对象，然后再依次获取表单中的数据。但是当表单中的数据非常多时，使用此种方式将会给开发和维护带来不必要的麻烦。 因此，接下来我们将讲解HTML5中提供的新技术特性——FormData（表单数 据对象），使用它快速收集表单信息。

33 任务二：进度条文件上传 收集表单数据 （1）准备FORM表单
在使用FormData收集表单域信息时，每个表单域必须设置name属性，否则获取不到提交的表单信息。

34 任务二：进度条文件上传 收集表单数据 （2）收集表单信息
通过new实例化FormData对象，并为该对象传递需要收集信息的参数对象。其中， 变量form表示获取HTML中第一个匹配的form对象。

35 任务二：进度条文件上传 收集表单数据 （3）查看表单信息 通过Ajax的方式，将获取到的表单信息fd，传递给服务器端文件index.php。

36 任务二：进度条文件上传 收集表单数据 在服务器端文件index.php中 打印$_POST。
在浏览器端文件中接收服务器 返回的信息，并在控制台显示 输出。

37 任务二：进度条文件上传 收集表单数据 若表单为零散信息，没有<form>元素，则可以通过FormData对象的append()方法完成表单信息的收集。 var fd = new FormData(); fd.append(name,value); 利用append()方法给当前FormData对象fd添加一个键/值对 参数name表示字段名，即表单零散信息名称（可随意命名） value表示字段值，即用户提交的表单零散信息

38 任务二：进度条文件上传 引入知识点 1、收集表单数据 2、获取Ajax传输进度

39 任务二：进度条文件上传 获取Ajax传输进度
为了满足用户的需要，在HTML5中提供了progress事件，可以更加方便的获取传输文件的总字节数和到目前为止已上传的字节数。

40 任务二：进度条文件上传 获取Ajax传输进度
upload是Ajax对象的一 个属性，同时也是 XMLHttpRequestUpload 的一个对象， onprogress是它的一个 事件属性，用于每间隔 50~100毫秒就感知一下 当前文件的上传情况。 evt表示主流浏览器的事 件对象。

41 任务二：进度条文件上传 获取Ajax传输进度 loaded属性表示已上传文件的总字节数 total属性表示上传文件的总字节数

42 任务二：进度条文件上传 任务 实现

43 任务三：下拉菜单三级联动 准备静态页面，利用<table>和 < select>实现一个编辑商品信息页面，包括商品分类、商品名称及商品发布按钮。 任务 说明 在服务器端页面准备商品分类的数据，实现根据父类ID查询数据，并以JSON格式输出。 利用jQuery+Ajax完成一级商品分类自动加载和三级商品分类联动的效果。

44 任务三：下拉菜单三级联动 1、JSON数据格式 引入知识点 2、jQuery操作Ajax

45 任务三：下拉菜单三级联动 JSON数据格式
与前面学过的XML功能类似，JSON是一种轻量级的数据交换格式，是 JavaScript Object Notation（JavaScript对象符号）的缩写，它采用完 全独立于语言的文本格式，这使得JSON更易于程序的解析和处理。 相较于XML数据交换格式，使用JSON对象访问属性的方式获取数据更 加方便。

46 任务三：下拉菜单三级联动 JSON数据格式 JSON数据格式的基本结构 （1）对象形式
JSON数据对象可以理解为JavaScript中的对象 对象是以“{”开始，以“}”结束 属性与属性或方法之间使用英文逗号“,”分割 键值之间使用英文冒号“:”分割 可以通过“对象.属性名”的方式获取相关数据 例如：“student.name”的方式就可以获得此JSON对象的name属性值。

47 任务三：下拉菜单三级联动 JSON数据格式 JSON数据格式的基本结构 （2）数组形式
JSON数组形式就是在JavaScript中使用“[]”括起来的内容 若要访问“小明”这个数据，则可以直接使用“student[0].name”获取数据

48 任务三：下拉菜单三级联动 JSON数据格式 JSON数据格式在PHP中的使用
PHP中提供了json_encode()和json_decode()两个函数用于对JSON数据进行操作 json_encode()函数用于将任意类型变量（除了资源类型外）生成JSON格式的字符串。 json_decode()函数用于将JSON格式的字符串转换为对象或数组类型。

49 任务三：下拉菜单三级联动 JSON数据格式 JSON数据格式在PHP中的使用
json_encode()函数可以将数组转换为JSON格式的字符串 函数json_decode()的第2个参数为true时，可以将JSON格式的字符串转换为数组类型，当省略该参数时，默认转换为对象类型。

50 任务三：下拉菜单三级联动 JSON数据格式 JSON数据格式在JavaScript中的使用
JavaScript中提供的JSON.stringify()函数可以将JavaScript的变量转换为JSON格式的字符串。

51 任务三：下拉菜单三级联动 JSON数据格式 JSON数据格式在JavaScript中的使用
从上述代码的输出结果可知，JSON.stringify()函数成功的将对象类型的变量con转换为JSON格式的字符串。

52 任务三：下拉菜单三级联动 1、JSON数据格式 引入知识点 2、jQuery操作Ajax

53 任务三：下拉菜单三级联动 jQuery操作Ajax
在传统的Ajax中，通过XMLHttpRequest实现Ajax不仅代码复杂，浏览器兼容问题也比较多。jQuery对Ajax操作进行了封装，使用jQuery可以极大地简化Ajax程序的开发过程。

54 任务三：下拉菜单三级联动 jQuery操作Ajax （1）$.get()
jQuery中的$.get()方法用于通过GET方式向服务器发送请求，并载入数据。 第1个参数表示待请求页面的URL地址 第2个参数表示传递的参数 第3个参数表示请求成功时，执行的回调函数 第4个参数用于设置服务器返回的数据类型，如XML、JSON、HTML、TEXT等。

55 任务三：下拉菜单三级联动 补充 jQuery操作Ajax （1）$.get()
jQuery中的$. getJSON ()方法与$.get()方法功能类似，唯一的区别在于前者只能获取JSON格式的数据，而后者可以获取多种格式的数据。 补充

56 任务三：下拉菜单三级联动 jQuery操作Ajax （2）$.post()
如果向服务器发送POST请求方式，可以使用jQuery提供的$.post()方法。其语法和使用方式与$.get()完全相同，这里不再进行赘述。

57 任务三：下拉菜单三级联动 jQuery操作Ajax （3）$.ajax()
jQuery中对Ajax的操作方法中，$.ajax(url,[settings])是通用方法 通过该方法的setting参数，可以实现$.get()、$.post()、$.getJSON()和$.getScript()方法同样的功能。

58 任务三：下拉菜单三级联动 jQuery操作Ajax 列举$.ajax()方法的3种常用方式 ① 只发送GET请求

59 任务三：下拉菜单三级联动 jQuery操作Ajax 列举$.ajax()方法的3种常用方式 ② 发送GET请求并传递数据，接收返回结果

60 任务三：下拉菜单三级联动 jQuery操作Ajax 列举$.ajax()方法的3种常用方式
③ 只配置setting参数，同样实现Ajax操作 setting参数还可以接收更多的可选值 例如：dataType表示要接收的数据格式，async表示异步或同步请求，cache表示是否缓存等。

61 任务三：下拉菜单三级联动 jQuery操作Ajax （4）ajaxSetup()
对于频繁与服务器进行交互的页面来说，每一次交互都要设置很多选项，这种操作不仅繁琐，也容易出错。为此，jQuery定义了ajaxSetup()方法，它可以预先设置全局Ajax请求的参数，实现全局共享。

62 任务三：下拉菜单三级联动 jQuery操作Ajax （4）ajaxSetup()
当使用$.ajaxSetup()方法预设异步交互中的通用选项后，再调用$.ajax()、$.get()、$.post()等方法执行Ajax操作时，只需要进行个性化参数设置即可。

63 任务三：下拉菜单三级联动 任务 实现

64 任务 说明 任务四：JSONP跨域请求 请使用jQuery+JSON的方式，通过跨域请求重新实现任务一中的表单验证
配置Apache服务器，准备一个虚拟主机“ 在当前网站下编写商品信息编辑页面，并通过JSONP进行跨域验证

65 任务四：JSONP跨域请求 1、Ajax跨域问题 引入知识点 2、通过PHP跨域请求 3、通过JSONP跨域请求

66 任务四：JSONP跨域请求 Ajax跨域问题
在网站开发中，有时需要将其他网站的内容异步的载入到自己的网站中， 但是浏览器出于安全方面的考虑，禁止页面中的JavaScript访问其他服务 器上的数据，即“同源策略”。 为了解决Ajax跨域问题，可以通过某些手段来绕过浏览器“同源策略”的 限制，从而在浏览器端实现跨域名通信的效果。

67 任务四：JSONP跨域请求 1、Ajax跨域问题 引入知识点 2、通过PHP跨域请求 3、通过JSONP跨域请求

68 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数
利用PHP的函数file_get_contents()实现跨域请求，就是通过此函数从给定的URL地址中获取内容，并将该内容输出，即可从浏览器端获取跨域请求的内容。

69 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数
下面在当前网站 的index.html文件中，获取测试网站

70 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数 当前网站（www.bxg.com）中的文件
浏览器端文件index.html 服务器端文件index.php

71 任务四：JSONP跨域请求 通过PHP跨域请求 （1）file_get_contents()函数
测试网站（ 测试文件test.json

72 任务四：JSONP跨域请求 通过PHP跨域请求 （2）cURL库
PHP中提供的cURL可以简单、有效地抓取网页的内容。因此，在服务器端我们可以通过cURL库的使用实现跨域请求。

73 任务四：JSONP跨域请求 通过PHP跨域请求 （2）cURL库 开启cURL库
要想使用cURL库，需在PHP的配置文件中开启;extension=php_curl.dll扩展 加载动态链接库 在Apache的配置文件中载入PHP安装目录中的libssh2.dll动态链接库。 extension=php_curl.dll loadFile "c:/web/php5.4/libssh2.dll"

74 任务四：JSONP跨域请求 通过PHP跨域请求 （2）cURL库 创建一个cURL会话
通过curl_setopt()函数为cURL会话设置URL请求参数 利用curl_exec()函数执行cURL会话，同时返回抓取结果 关闭cURL会话即可

75 任务四：JSONP跨域请求 1、Ajax跨域问题 引入知识点 2、通过PHP跨域请求 3、通过JSONP跨域请求

76 任务四：JSONP跨域请求 通过JSONP跨域请求
JSONP是JSON with Padding的缩写，它是一种非官方跨域请求数据的交互协议。由于浏览器间的“同源策略”，一般位于当前网站的网页无法与其他网站进行沟通，但是<script>标签元素的src属性是没有跨域的限制的，因此我们可以使用此种方式实现跨域请求。

77 任务四：JSONP跨域请求 通过JSONP跨域请求 在当前网站的客户端页面test.html中创建一个回调函数test()
通过<script>标签的src属性载入测试网站（ 在test.php文件中调用test()函数，将处理后的JSON格式数据作为参数进行传递 在当前网站的客户端页面test.html中获取返回的JSON数据并完成test()函数的回调

78 任务四：JSONP跨域请求 通过JSONP跨域请求 在jQuery中如何实现JSONP跨域请求
当前网站（ dataType属性用于设置服务器返回的数据类型 jsonp属性用于重写jsonp回调函数名对应的参数名称，默认值为callback，这个值用来替代在“callback=?”这种GET或POST请求中URL参数里的“callback”部分，比如上述代码则会导致将“myback =?”传给服务器 url属性用于设置发送请求的地址，这里指的是跨域请求地址

79 任务四：JSONP跨域请求 通过JSONP跨域请求 在jQuery中如何实现JSONP跨域请求
测试网站（ $_GET[‘myback’]用于获取在浏览器端设置的jsonp回调函数名，并调用 将JSON格式的数据作为参数传递给此函数，最后使用echo输出 此时在当前网站（

80 任务四：JSONP跨域请求 任务 实现

81 任务 说明 任务五：在线编辑器 使用百度推出的在线编辑器UEditor完成商品详情的编辑
使用HTMLPurifier对用户提交的内容进行富文本过滤。

82 任务五：在线编辑器 1、在线编辑器 引入知识点 2、富文本过滤

83 任务五：在线编辑器 在线编辑器 许多网站都为用户提供了在线编辑器。通过在线编辑器可以实现文字的排版，设置字体、字号、颜色等功能，甚至可以上传图片、附件等。而UEditor是百度推出的一款在线编辑器，其功能强大、开源免费，有详细的中文注释和文档，适合读者学习。

84 任务五：在线编辑器 在线编辑器 访问官方网站

85 任务五：在线编辑器 在线编辑器 通过下载包中的示例文件index.html可以迅速了解UEditor的基本使用

86 任务五：在线编辑器 1、在线编辑器 引入知识点 2、富文本过滤

87 任务五：在线编辑器 在线编辑器 通过在线编辑器提交的内容是一段HTML代码，虽然编辑器本身可以过滤<script>等危险标签，但是编辑器是运行在浏览器端的，无法阻止用户绕过编辑器提交恶意代码，因此应该在服务器端进行过滤。

88 任务五：在线编辑器 在线编辑器 下面以HTMLPurifier为例，到官网（ HTMLPurifier在下载页面中提供了三个版本，分别为Standard标准版、Lite精简版本和Standalone单文件版本。

89 任务五：在线编辑器 在线编辑器 接下来以Standalone单文件版本为例进行讲解。
将下载的Standalone压缩包解压到目录“/project7/Standalone”中，使用时，直接载入相关文件，并进行白名单配置即可。 所谓白名单就是允许存在的HTML标签选项。

90 任务五：在线编辑器 在线编辑器

91 任务五：在线编辑器 任务 实现

92