/Users/jiao/Desktop/全栈教程/04_JS/JS核心第11Ajax第2天
五、服务器返回XML格式的数据
1、什么是XML
XML（eXtensible Markup Language）：可扩展标记语言
用于标记电子文件使其具有结构性的标记语言，可以用来标记数据、定义数据类型，是一种允许用户对自己的标记语言进行定义的源语言。
xml也是一种标记（标签）语言，它的侧重点是描述数据，而相似的HTML主要用于展示数据。
标签特点：
XML标签可以自己定义
HTML标签固定
意义：
XML用于存储数据，用浏览器打开没有特殊效果，就是一个树状结构
HTML用于展示数据，每个标签都有各自的样式。
2、XML的作用
在web开发领域，XML的作用主要是：
存储数据，充当小型数据库；
当做配置文件；
当做两种编程语言交互数据的中间媒介，类似JSON。
3、编写一个XML文件
XML也是标签语言，标签可以自定义，但XML的语法更加严格。在编写XML文件的时候，要注意下面几点：
文档声明：
<?xml version='1.0' encoding='utf-8'?>
必须有的，写到开头。
标签必须闭合，即使是单标记标签，如
属性必须加引号
区分大小写
文档有且只有一个根标签
4、服务器返回XML格式的数据
创建05xml.html：发送ajax请求到05xml.php。
PHP代码，必须要指定header，读取xml直接返回即可。
浏览器访问05xml.html文件，查看到的结果：
5、浏览器端处理XML格式的数据
返回的结果可以当做document对象里使用。也就是说，可以调用getEle….系列方法，DOM中曾经学习过的大部分方法都可以使用。简而言之，就是可以把返回的结果当做一个HTML文档来处理。
六、FormData对象
1、FormData对象介绍
FormData：字母意思就是表单数据，这是h5中新增的一个内置对象（构造器），它可以获取任何类型的表单项的值，比如text/radio/checkbox/file/textarea，适用于获取大量的表单项的值。常用于发送Ajax请求。
优点：简单的代码，就能将表单中所有类型的数据都收集到，包括文件域的内容，非常方便。
缺点：因为是h5新增，所以IE9+才支持。
2、使用FormData收集表单数据并异步发送到服务器‘
创建06FormData.html
当点击button的时候，发送Ajax请求到06FormData.php.并将表单中的各项数据发送到服务器。
06FormData.php，将收集到的数据存放到文件中，用于检测是否接受到了数据：
点击button，发现php文件能够收到数据。
注意点：
必须使用post请求，并使用FormData的时候，不用设置请求头 xhr.setRequestHeader();
有文件域，但是不用设置enctype。
获取表单的内容使用
$_POST，获取文件域的内容使用$_FILES
收集表单项的值是根据表单项的name值获取的
3、使用FormData完成异步上传
还使用06FormData.html和06FormData.php即可。只需要修改PHP文件即可。
4、异步上传实现进度条效果
1、准备工作
复制原来的06FormData.html为07FormData.html。复制06FormData.php为07FormData.php
因为是本地，上传速度非常快，所以上传一个小文件看不出进度条。所以上传大文件。上传大文件就需要修改php.ini，主要修改三个max。
2、分析Ajax对象中的upload
在创建Ajax对象之后，输出AJax对象，发现有upload属性。
继续输出upload属性（console.log(xhr.upload);），发现有一个onprogress事件，这个事件就和上传进度有关。
下面添加onprogress事件：
输出结果如下：
3、制作进度条
首先，在HTML中加入一个progress标签，它是h5中的一个新标签，表示上传进度。
下面在上传过程中，设置progress的max和value属性即可：
七、跨域请求
1、同源政策
1995年，同源政策由 Netscape（网景） 公司引入浏览器。目前，所有浏览器都实行这个政策。
最初，它的含义是指，A 网页设置的 Cookie，B 网页不能打开，除非这两个网页同源。所谓同源指的是三个相同。
协议相同（http https）
域名相同
端口相同（默认80端口）
随着互联网的发展，同源政策越来越严格。目前，如果非同源，共有三种行为受到限制。
Cookie无法读取。
DOM 无法获得。
AJAX 请求无效（可以发送，但浏览器会拒绝接受响应）。
php不受限制
2、什么是跨域请求
其实，了解了什么是同源政策，就知道什么是跨域请求了。
在发送Ajax请求的时候，请求的地址只要违反了同源政策，那么就属于跨域请求。
测试，创建08kuayu.html，向“http://www.js.com/08kuayu.php”发送Ajax请求：
在JS网站中，创建08kuayu.php文件，做测试：
访问http://www.ajax.com/2018-09-14/08kuayu.html。会提示禁止跨域请求。
八、实现跨域请求
1、代理方式实现跨域请求
发送Ajax请求的时候，请求本网站的php文件，让本网站的php文件去请求另外网站的内容。
Ajax网站：09daili.html
Ajax网站：09daili.php
JS网站：09daili.php
2、CORS方式实现跨域请求
需要在被请求的网页中设置：Access-Control-Allow-Origin。 IE9+支持。
如使用Ajax网站的文件去请求JS网站的文件内容，需要在JS网站中设置CORS头。
Ajax网站：10cors.html
JS网站：10cors.php
3、使用JSONP技术实现跨域请求
Jsonp(JSON with Padding) 是 json 的一种”使用模式”，通俗的讲，jsonp可以通过html标签中的src属性可以访问另外域的内容，可以让网页从别的域名（网站）那获取资料，即跨域读取数据。
