网络协会2016培训.docxVIP

网络协会2017培训 恶补Web知识训练营 2017/4/7 – Payne 简要内容 1. 数据文件格式：XML 与 JSON 2. AJAX 与 Fetch 3. 跨域问题与对策 小问题 给你一个Excel表单，你会怎么存储？ 怎么在网页上面调用？ 小问题 货品号 类型 货品名 货品数目 备注 1 水果 苹果 斤 3 水果 雪梨 斤 4 饮料 香蕉牛奶 666 9 小吃 终极鱿鱼 233 小明的水果摊仓库登记 登记日期 2017/4/7 登记人 小华 可以选择的技术 XML 可扩展标记语言（XML），是一种标记语言。通过此种标记，计算机之间可以处理包含各种信息的文章等。 如何定义这些标记，既可以选择国际通用的标记语言，比如HTML，也可以使用像XML这样由相关人士自由决定的标记语言，这就是语言的可扩展性。 它主要用到的有可扩展标记语言、可扩展样式语言（XSL）、XBRL和XPath等。 XML文件样例 ?xml version=1.0 encoding=UTF-8 ? namePayne/name age18/age gendermale/gender onlinetrue/online keywordsnice/keywords keywordshumor/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: /json-zh.html ECMA-404: /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： /douglascrockford/JSON-js/ （基本很少人用了） 传统的网页与服务器交互 通过提交（Submit）表单（Form）实现向服务器POST数据，每一次提交表单都返回结果的网页。 它的缺点是什么？ 无刷新的网页与服务器交互 AJAX——综合了多项技术的浏览器端网页开发技术。 AJAX应用可以仅向服务器发送并取回必须的数据，并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少，服务器回应更快了。 同时，很多的处理工作可以在发出请求的客户端机器上完成，因此Web服务器的负荷也减少了。 常见场景 进入一个新闻网站，只需要手指往下拉网页，网页就会自动加载下一页的内容，而且不需要跳转； 登录网站失败，用户的密码还在，不需要再重新输入密码（想想提交表单要怎么做）； 股票数据每隔5秒更新一次，会根据最新的指数画出K线图…… 实现AJAX——XMLHttpRequest 在浏览器中，可以使用XMLHttpRequest与服务器建立一个HTTP/HTTPS的连接，并且通过一系列的方法发送、监听接收事件以及接收回传的数据。 XMLHttpRequest 原生用法 var xhr = new XMLHttpRequest(); xhr.open(POST, /data/music/songlink); xhr.setRequestHeader(Content-Type, application/x-www-form-url