Download presentation
Presentation is loading. Please wait.
1
网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne
2
简要内容 1. 数据文件格式：XML 与 JSON 2. AJAX 与 Fetch 3. 跨域问题与对策
3
小问题 给你一个Excel表单，你会怎么存储？ 怎么在网页上面调用？
4
小问题 小明的水果摊仓库登记 登记日期 2017/4/7 登记人 小华 货品号 类型 货品名 货品数目 备注 1 水果 苹果 斤 3 雪梨
登记日期 2017/4/7 登记人 小华 货品号 类型 货品名 货品数目 备注 1 水果 苹果 斤 3 雪梨 4 饮料 香蕉牛奶 666 9 小吃 终极鱿鱼 233
5
可以选择的技术 CSV 文本 XML JSON
6
XML 可扩展标记语言（XML），是一种标记语言。通过此种标记，计算 机之间可以处理包含各种信息的文章等。
如何定义这些标记，既可以选择国际通用的标记语言，比如HTML， 也可以使用像XML这样由相关人士自由决定的标记语言，这就是语 言的可扩展性。 它主要用到的有可扩展标记语言、可扩展样式语言（XSL）、XBRL 和XPath等。
7
XML文件样例 <?xml version="1.0" encoding="UTF-8" ?>
<name>Payne</name> <age>18</age> <gender>male</gender> <online>true</online> <keywords>nice</keywords> <keywords>humor</keywords>
8
XML常见场景 RSS XPath As a config file (Android) Flash: CrossDomain.xml
9
XML优点 XML的结构类似于HTML，而且原生的浏览器支持解析XML结构 （即便是IE6也支持）
属性名多样，无缝支持各种编码的文本甚至二进制数据
10
XML缺点 XML的结构导致数据存储文件太大 不能很好描述key-value里的value的类型 元素重复冗余，不易读
11
JSON JSON（JavaScript Object Notation）是一种由道格拉斯·克罗克 福特构想设计、轻量级的数据交换语言，以文字为基础，且易于让 人阅读。 虽JSON是Javascript的一个子集，但JSON是独立于语言的文本格 式。 JSON可以与JavaScript可以“无缝对接”而且非常多的编程语言支 持JSON的解析。
12
JSON文件样例 { "name":"Payne", "age":18, "gender":"male", "online":true,
"keywords":["nice", "humor"] }
13
JSON的语法标准 Document: http://www.json.org/json-zh.html
ECMA-404: international.org/publications/files/ECMA- ST/ECMA-404.pdf
14
JSON常见场景 AJAX对接Web服务器接口 Node.js 配置文件 MongoDB的文档
15
JSON优点 文件结构清晰，冗余标记少，易于阅读 属于JavaScript的子集，利于网页调用 （JSON.parse）
支持预设定的value类型
16
JSON缺点 古老的浏览器(IE6之流)无法安全解析JSON
17
JSON在浏览器的安全使用 解析JSON文件（字符串对象）： JSON.parse() 将JS的对象转成JSON文件（对象字符串）：
JSON.stringify()
18
JSON在古老浏览器的安全使用 JSON2： https://github.com/douglascrockford/JSON-js/
（基本很少人用了）
19
传统的网页与服务器交互 通过提交（Submit）表单（Form）实现向服务器 POST数据，每一次提交表单都返回结果的网页。
它的缺点是什么？
20
无刷新的网页与服务器交互 AJAX——综合了多项技术的浏览器端网页开发技术。
AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采 用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间 交换的数据大量减少，服务器回应更快了。 同时，很多的处理工作可以在发出请求的客户端机器上完成，因此 Web服务器的负荷也减少了。
21
常见场景 进入一个新闻网站，只需要手指往下拉网页，网页就会 自动加载下一页的内容，而且不需要跳转；
登录网站失败，用户的密码还在，不需要再重新输入密 码（想想提交表单要怎么做）； 股票数据每隔5秒更新一次，会根据最新的指数画出K线 图……
22
实现AJAX——XMLHttpRequest
23
XMLHttpRequest 原生用法 var xhr = new XMLHttpRequest();
xhr.open('POST', '/data/music/songlink'); xhr.setRequestHeader('Content-Type', 'application/x-www-form- urlencoded; charset=UTF-8'); xhr.onload = function() {console.log(JSON.parse(xhr.response))} //输出解析之后的JSON对象 xhr.send('songIds= &hq=0&type=m4a%2Cmp3');
24
XMLHttpRequest 在jQuery
使用 jQuery的 .get(), .post() 方法可以轻松实现XHR发送和接收数 据报文。 $.post( "test.php", { name: "John", time: "2pm" } ) .done(function( data ) { alert( "Data Loaded: " + data ); });
25
Fetch XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离 （Separation of Concerns）的原则。配置和调用方式非常混乱， 而且基于事件的异步模型写起来也没有现代的 Promise， generator/yield，async/await 友好。 Fetch 的出现就是为了解决 XHR 的问题。 Fetch可以看成是Promise版本的XHR（原生仅限ES6）。
26
Fetch用法 fetch(url).then(function(response) {
return response.json(); // 读入一个JSON文件 }).then(function(data) { console.log(data); }).catch(function(e) { console.log("Oops, error"); });
27
带上箭头函数 fetch(url).then(response => response.json())
.then(data => console.log(data)) .catch(e => console.log("Oops, error", e))
28
用 async/await try { let response = await fetch(url);
let data = response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); }
29
Fetch POST数据 fetch("http://www.example.org/submit.php", {
method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: "firstName=Nikhil&favColor=blue&password=easytoguess" }).then(function(res) { alert("Perfect! Your settings are saved."); }, function(e) { alert("Error submitting form!"); });
30
Fetch 优点 简单粗暴，简洁明了 更佳语义化 配合Promise + async/await，原生异步事件同步 不是梦
31
Fetch 缺点 只有 >= ES6 才支持，需要 ES7才支持 async/await写 法（whatwg-fetch可以拯救地球）
新学的同学需要熟悉Promise的结构
32
跨域是什么? 跨域一般指的是浏览器中的JavaScript通过AJAX技 术访问不是同源的网站的文件。
当然，Flash也是存在跨域限制，用于避免非法的 Flash文件任意访问其他网站的数据。
33
跨域的意义？ 避免我自己的网站的数据可以被其他网站调用。 例如：
我知道百度的接口，而且它允许跨域，我就可以不 借助自己的服务器随意调用百度的数据。这样会给 百度带来经济损失（小偷可以零成本）。甚至伪装 百度欺骗萌新。
34
同源的要求 两个URL的协议相同 两个URL的域名相同 两个URL的端口相同 只要其中一个不符合，则意味着不同源，需要跨域
35
看看它们是否同源 http://baidu.com https://baidu.com
36
常用跨域的方法 CORS JSONP WebSocket 转发（反向代理）
37
CORS Access-Control-Allow-Origin 协议头设定允许同源的域 名
res.header('Access-Control-Allow-Origin', '*') res.header('Access-Control-Allow-Origin', '
38
JSONP 构造一个JavaScript的脚本，通过加载脚本（GET方法）的 形式加载封装了待返回数据的函数。只需要执行函数就可 以获取里面的数据。 res.jsonp({'name':'Payne'})
39
WebSocket HTML5的WebSocket是在浏览器支持长时间连接的 解决方案，其不受跨域影响。
但是需要搭建一个WS服务器，比较麻烦。 主要用于手游、页游、弹幕服务器。
40
反向代理 需要自己的服务器反向代理需要跨域的网站。 只需要反代到需要使用的网站上即可。 但是需要额外花费资金于服务器的购置、部署。
Similar presentations
