11、XML FormData 对象 跨域请求

2019年12月6日00:57:19 评论 69 次浏览

/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'?>

必须有的,写到开头。
标签必须闭合,即使是单标记标签,如
属性必须加引号
区分大小写
文档有且只有一个根标签

11、XML FormData 对象 跨域请求11、XML FormData 对象 跨域请求

4、服务器返回XML格式的数据

创建05xml.html:发送ajax请求到05xml.php。
11、XML FormData 对象 跨域请求
PHP代码,必须要指定header,读取xml直接返回即可。
11、XML FormData 对象 跨域请求
浏览器访问05xml.html文件,查看到的结果:
11、XML FormData 对象 跨域请求

5、浏览器端处理XML格式的数据

返回的结果可以当做document对象里使用。也就是说,可以调用getEle….系列方法,DOM中曾经学习过的大部分方法都可以使用。简而言之,就是可以把返回的结果当做一个HTML文档来处理。
11、XML FormData 对象 跨域请求

六、FormData对象

1、FormData对象介绍

FormData:字母意思就是表单数据,这是h5中新增的一个内置对象(构造器),它可以获取任何类型的表单项的值,比如text/radio/checkbox/file/textarea,适用于获取大量的表单项的值。常用于发送Ajax请求。
优点:简单的代码,就能将表单中所有类型的数据都收集到,包括文件域的内容,非常方便。
缺点:因为是h5新增,所以IE9+才支持。

2、使用FormData收集表单数据并异步发送到服务器‘

创建06FormData.html
11、XML FormData 对象 跨域请求
当点击button的时候,发送Ajax请求到06FormData.php.并将表单中的各项数据发送到服务器。
11、XML FormData 对象 跨域请求
06FormData.php,将收集到的数据存放到文件中,用于检测是否接受到了数据:
11、XML FormData 对象 跨域请求
点击button,发现php文件能够收到数据。
注意点:
必须使用post请求,并使用FormData的时候,不用设置请求头 xhr.setRequestHeader();
有文件域,但是不用设置enctype
获取表单的内容使用

$_POST,获取文件域的内容使用$_FILES

收集表单项的值是根据表单项的name值获取的

3、使用FormData完成异步上传

还使用06FormData.html和06FormData.php即可。只需要修改PHP文件即可。
11、XML FormData 对象 跨域请求

4、异步上传实现进度条效果

1、准备工作

复制原来的06FormData.html为07FormData.html。复制06FormData.php为07FormData.php
因为是本地,上传速度非常快,所以上传一个小文件看不出进度条。所以上传大文件。上传大文件就需要修改php.ini,主要修改三个max。
11、XML FormData 对象 跨域请求11、XML FormData 对象 跨域请求
11、XML FormData 对象 跨域请求

2、分析Ajax对象中的upload

在创建Ajax对象之后,输出AJax对象,发现有upload属性。
继续输出upload属性(console.log(xhr.upload);),发现有一个onprogress事件,这个事件就和上传进度有关。
下面添加onprogress事件:
11、XML FormData 对象 跨域请求
输出结果如下:
11、XML FormData 对象 跨域请求

3、制作进度条

首先,在HTML中加入一个progress标签,它是h5中的一个新标签,表示上传进度。
11、XML FormData 对象 跨域请求
下面在上传过程中,设置progress的max和value属性即可:
11、XML FormData 对象 跨域请求

七、跨域请求

1、同源政策

1995年,同源政策由 Netscape(网景) 公司引入浏览器。目前,所有浏览器都实行这个政策。
最初,它的含义是指,A 网页设置的 Cookie,B 网页不能打开,除非这两个网页同源。所谓同源指的是三个相同
协议相同(http https)
域名相同
端口相同(默认80端口)

随着互联网的发展,同源政策越来越严格。目前,如果非同源,共有三种行为受到限制。
Cookie无法读取。
DOM 无法获得。
AJAX 请求无效(可以发送,但浏览器会拒绝接受响应)。
php不受限制

2、什么是跨域请求

其实,了解了什么是同源政策,就知道什么是跨域请求了。
在发送Ajax请求的时候,请求的地址只要违反了同源政策,那么就属于跨域请求。
测试,创建08kuayu.html,向“http://www.js.com/08kuayu.php”发送Ajax请求:
11、XML FormData 对象 跨域请求
在JS网站中,创建08kuayu.php文件,做测试:
11、XML FormData 对象 跨域请求
访问http://www.ajax.com/2018-09-14/08kuayu.html。会提示禁止跨域请求。
11、XML FormData 对象 跨域请求
11、XML FormData 对象 跨域请求

八、实现跨域请求

1、代理方式实现跨域请求

11、XML FormData 对象 跨域请求
发送Ajax请求的时候,请求本网站的php文件,让本网站的php文件去请求另外网站的内容。
Ajax网站:09daili.html
11、XML FormData 对象 跨域请求
Ajax网站:09daili.php
11、XML FormData 对象 跨域请求
JS网站:09daili.php
11、XML FormData 对象 跨域请求

2、CORS方式实现跨域请求

需要在被请求的网页中设置:Access-Control-Allow-Origin。 IE9+支持。
如使用Ajax网站的文件去请求JS网站的文件内容,需要在JS网站中设置CORS头。
Ajax网站:10cors.html
11、XML FormData 对象 跨域请求
JS网站:10cors.php
11、XML FormData 对象 跨域请求

3、使用JSONP技术实现跨域请求

Jsonp(JSON with Padding) 是 json 的一种"使用模式",通俗的讲,jsonp可以通过html标签中的src属性可以访问另外域的内容,可以让网页从别的域名(网站)那获取资料,即跨域读取数据。

4、小练习--跨域请求天气信息

接口地址:http://www.weather.com.cn/data/sk/101010100.html

继续阅读
weinxin
加我微信
微信扫一扫,加我微信好友,共同交流,共同进步! (备注:焦国强博客)
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: