网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne

简要内容 1. 数据文件格式：XML 与 JSON 2. AJAX 与 Fetch 3. 跨域问题与对策

小问题 给你一个Excel表单，你会怎么存储？ 怎么在网页上面调用？

小问题 小明的水果摊仓库登记 登记日期 2017/4/7 登记人 小华 货品号 类型 货品名 货品数目 备注 1 水果 苹果 斤 3 雪梨 登记日期 2017/4/7 登记人 小华 货品号 类型 货品名 货品数目 备注 1 水果 苹果 斤 3 雪梨 4 饮料 香蕉牛奶 666 9 小吃 终极鱿鱼 233

可以选择的技术 CSV 文本 XML JSON

XML 可扩展标记语言（XML），是一种标记语言。通过此种标记，计算 机之间可以处理包含各种信息的文章等。 如何定义这些标记，既可以选择国际通用的标记语言，比如HTML， 也可以使用像XML这样由相关人士自由决定的标记语言，这就是语 言的可扩展性。 它主要用到的有可扩展标记语言、可扩展样式语言（XSL）、XBRL 和XPath等。

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>

XML常见场景 RSS XPath As a config file (Android) Flash: CrossDomain.xml

XML优点 XML的结构类似于HTML，而且原生的浏览器支持解析XML结构 （即便是IE6也支持） 属性名多样，无缝支持各种编码的文本甚至二进制数据

XML缺点 XML的结构导致数据存储文件太大 不能很好描述key-value里的value的类型 元素重复冗余，不易读

JSON JSON（JavaScript Object Notation）是一种由道格拉斯·克罗克 福特构想设计、轻量级的数据交换语言，以文字为基础，且易于让 人阅读。 虽JSON是Javascript的一个子集，但JSON是独立于语言的文本格 式。 JSON可以与JavaScript可以“无缝对接”而且非常多的编程语言支 持JSON的解析。

JSON文件样例 { "name":"Payne", "age":18, "gender":"male", "online":true, "keywords":["nice", "humor"] }

JSON的语法标准 Document: http://www.json.org/json-zh.html ECMA-404: http://www.ecma- international.org/publications/files/ECMA- ST/ECMA-404.pdf

JSON常见场景 AJAX对接Web服务器接口 Node.js 配置文件 MongoDB的文档

JSON优点 文件结构清晰，冗余标记少，易于阅读 属于JavaScript的子集，利于网页调用 （JSON.parse） 支持预设定的value类型

JSON缺点 古老的浏览器(IE6之流)无法安全解析JSON

JSON在浏览器的安全使用 解析JSON文件（字符串对象）： JSON.parse() 将JS的对象转成JSON文件（对象字符串）： JSON.stringify()

JSON在古老浏览器的安全使用 JSON2： https://github.com/douglascrockford/JSON-js/ （基本很少人用了）

传统的网页与服务器交互 通过提交（Submit）表单（Form）实现向服务器 POST数据，每一次提交表单都返回结果的网页。 它的缺点是什么？

无刷新的网页与服务器交互 AJAX——综合了多项技术的浏览器端网页开发技术。 AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采 用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间 交换的数据大量减少，服务器回应更快了。 同时，很多的处理工作可以在发出请求的客户端机器上完成，因此 Web服务器的负荷也减少了。

常见场景 进入一个新闻网站，只需要手指往下拉网页，网页就会 自动加载下一页的内容，而且不需要跳转； 登录网站失败，用户的密码还在，不需要再重新输入密 码（想想提交表单要怎么做）； 股票数据每隔5秒更新一次，会根据最新的指数画出K线 图……

实现AJAX——XMLHttpRequest

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=2075791&hq=0&type=m4a%2Cmp3');

XMLHttpRequest 在jQuery 使用 jQuery的 .get(), .post() 方法可以轻松实现XHR发送和接收数 据报文。 $.post( "test.php", { name: "John", time: "2pm" } ) .done(function( data ) { alert( "Data Loaded: " + data ); });

Fetch XMLHttpRequest 是一个设计粗糙的 API，不符合关注分离 （Separation of Concerns）的原则。配置和调用方式非常混乱， 而且基于事件的异步模型写起来也没有现代的 Promise， generator/yield，async/await 友好。 Fetch 的出现就是为了解决 XHR 的问题。 Fetch可以看成是Promise版本的XHR（原生仅限ES6）。

Fetch用法 fetch(url).then(function(response) { return response.json(); // 读入一个JSON文件 }).then(function(data) { console.log(data); }).catch(function(e) { console.log("Oops, error"); });

带上箭头函数 fetch(url).then(response => response.json()) .then(data => console.log(data)) .catch(e => console.log("Oops, error", e))

用 async/await try { let response = await fetch(url); let data = response.json(); console.log(data); } catch(e) { console.log("Oops, error", e); }

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!"); });

Fetch 优点 简单粗暴，简洁明了 更佳语义化 配合Promise + async/await，原生异步事件同步 不是梦

Fetch 缺点 只有 >= ES6 才支持，需要 ES7才支持 async/await写 法（whatwg-fetch可以拯救地球） 新学的同学需要熟悉Promise的结构

跨域是什么? 跨域一般指的是浏览器中的JavaScript通过AJAX技 术访问不是同源的网站的文件。 当然，Flash也是存在跨域限制，用于避免非法的 Flash文件任意访问其他网站的数据。

跨域的意义？ 避免我自己的网站的数据可以被其他网站调用。 例如： 我知道百度的接口，而且它允许跨域，我就可以不 借助自己的服务器随意调用百度的数据。这样会给 百度带来经济损失（小偷可以零成本）。甚至伪装 百度欺骗萌新。

同源的要求 两个URL的协议相同 两个URL的域名相同 两个URL的端口相同 只要其中一个不符合，则意味着不同源，需要跨域

看看它们是否同源 http://baidu.com  https://baidu.com http://baidu.com:8080  http://baidu.com http://api.taobao.com  http://api.jd.com https://admin@scnu.edu.cn  https://scnu.edu.cn

常用跨域的方法 CORS JSONP WebSocket 转发（反向代理）

CORS Access-Control-Allow-Origin 协议头设定允许同源的域 名 res.header('Access-Control-Allow-Origin', '*') res.header('Access-Control-Allow-Origin', 'https://sso.scnu.edu.cn')

JSONP 构造一个JavaScript的脚本，通过加载脚本（GET方法）的 形式加载封装了待返回数据的函数。只需要执行函数就可 以获取里面的数据。 res.jsonp({'name':'Payne'})

WebSocket HTML5的WebSocket是在浏览器支持长时间连接的 解决方案，其不受跨域影响。 但是需要搭建一个WS服务器，比较麻烦。 主要用于手游、页游、弹幕服务器。

反向代理 需要自己的服务器反向代理需要跨域的网站。 只需要反代到需要使用的网站上即可。 但是需要额外花费资金于服务器的购置、部署。