给产品经理讲技术：产品经理需要了解的Web前端技术
2024-03-23 20:22:33 0 举报AI智能生成
给产品经理讲技术：产品经理需要了解的Web前端技术
作者其他创作
大纲/内容
AJAX技术的妙用
异步JavaScript和XML
能力：主要解决的就是不用刷 新网页，就能和后台交互获取数据，并应用于当前网页的问题
如何实现
发起网络请求
发起网络请求的能力由浏览器的内置能力提 供，所有的浏览器都提供了XmlHttpRequest对象，它可以由网页调用， 用来连接一个特定的地址
无须刷新，可动态操作网页
DOM（Document Object Model，文档对象模型）
DOM相当于 骨骼，定义了一个网页的结构，以下代码对应了一个最简单的网页的骨 骼和框架。
JavaScript就是为操作DOM而存在的，可以动态地操作整个网 页。
总结：AJAX是一项用于异步拉取数据并展示在当前页面的技术， 这对需要延迟加载数据和触发式加载数据的页面有很大益处
经典产品：百度地图搜索
DOM是什么
DOM（文档对象模型）是Web前端里最基础、最常用的一个模 型。
浏览器在解析HTML文档时，会把每个标签 抽象成代码里的对象，按照这种层次分明的结构组织，这就是DOM
DOM树
数据结构里典型的“树”结构
数
静态网页与动态网页
静态网页和动态网页都是网页。
静态网页不需要后台程序干预处理，直接由服务器返回。实 现为静态网页后，一般不需要维护，因为数据不需要更新。
动态网页一般需要由程序来处理（ASP、JSP、PHP、 Python、Ruby等），并由数据库提供数据支撑。
不要以URL的形式来判断一个网页是静态的还是动态的，而 应该看页面的属性（产品经理最好具备一些调试技巧和经验）。
动态网页更灵活。
分析URL的结构
一个标准的 URL 地址由protocol、hostname、port、path、 parameters、query 几部分组成
protocol
指 http://部分，是协议 的意思
协议就是一套规则，定义了数据的 封装、打包、拆包和解释的规则，http://即表示只能通过HTTP这套规则 访问这个页面资源。
hostname
hostname称为主机名
port
port称为端口号 ，一般HTTP的端口号为80,HTTPS的为443，可以 理解为计算机有很多个提供服务的点，
比如可以用默认的80端口来提供 服务，也可以用81端口来提供服务。
比如可以用默认的80端口来提供 服务，也可以用81端口来提供服务。
path
hostname后面的一长串全部称为 path，是“路径”的意思，即最终文件所在的路径和文件名，只不过此地 址的文件存储在腾讯的服务器上，即news.qq.com这个域名下的若干台 机器上。
parameters
参数（parameters），也叫查询 。它 的目的是在URL中带上一些本地的信息传给服务器
经典案例：http://news.qq.com:8080/a/20160209/012154.htm? a=1&b=2&c=3#p=1
协议
http:
hostname
news.qq.com
port
8080
path
/a/20160209/012154.htm
parameters
?a=1&b=2&c=3
网页基础知识：表单
表单在很早的 HTML 版本中就已经存在，它是用户输入和网页之 间数据交互的一个界面，在HTML中用<form>标签标记。
表单为用户和网页 的数据交互提供了一个友好的界面。
表单中还可以承载很多类型的元素，例如RadioBox和 CheckBox，用来丰富用户输入类型和减少交互成本
经典案例：
<html lang="en">
<form name="input" action="http://www.***.com/index.html"method="GET">
<input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>
</html>
<html lang="en">
<form name="input" action="http://www.***.com/index.html"method="GET">
<input type="text" name="user"/>
<input type="submit" value="Submit"/>
</form>
</html>
form
标识了这是一个表单
action
标识了所有的数据内容将向引号内的地址提交
method
标识为提交到网站的方法（一般为GET或POST）
input
标识为一个输入框
type
标识为文本输入（user是其参数的名字）
input的type为submit：标识一个按钮的类型为“提交”类型
总结
表单是用户和服务器数据交互的用户界面，一切向服务器提
交的数据都是由其中的几个简单的标签组成的。
H5应用程序缓存简介
应用程序缓存
Application Cache
Application Cache技术通过缓存资源到本地，避免了每次打开网页 都会从服务器拉取大量数据的过程，取而代之的只是一个轻量级的更新 检查请求，这样，开发者的服务器带宽就被大大地释放出来。
由于网页的资源都是通过本地资源读取的，用户再次打开同一页面时，内 容展示时间会大大缩短，甚至达到Native应用的水平，从而进一步优化 用户体验。如果页面的所有资源都被缓存到了本地，那么页面就可以在 离线的情况下被完整地加载了。
经典案例：12306购票、百度地图
JS DDoS攻击的原理与防御
分布式拒绝服务攻击（Distributed Denial of Service,DDoS）是一种 对网站发起大量连接，导致正常用户无法访问网站的攻击手段。利用流 量劫持变相进行 DDoS，就是JS DDoS。
预防方法
开发者在引用一个第三方库时，在页 面里写上它的散列值，如果第三方库被劫持，计算出的散列值与开发者 写在页面里的不匹配，浏览器便不会执行它
另一种方案，就是使 用HTTPS链接，这样可以解决大部分劫持问题。
UA的故事
“UA”是“UserAgent”（用户代理）的简写，一般用来区分不同的浏 览器。
URL编码
真正的 网络世界对输入语言的要求是非常苛刻的，可以说是专属于英文字符 的
简单理解HTML、CSS和JavaScript
HTML、CSS、JavaScript共同构建了读者看到的所有网页展示和交 互。
HTML（HyperText Markup Language）是超文本标记语言 。
HTML（HyperText Markup Language）是超文本标记语言 。
CSS（Cascading Style Sheets）是级联样式表 。
CSS就是起装修作用的，要和HTML一起配合使用。
JavaScript 是一种脚本语言 ，主要用于前端页面的DOM处理。
JavaScript 是一种脚本语言，它在网页中的作用是控制 HTML 中的 每一个元素，有时要删除元素，有时要添加新元素。读者可能遇到过这 样的场景：单击网页上的一个按钮，会有一个网页上从没有过的元素显 示出来，这就是利用 JavaScript 实现的
经典案例：房子
HTML
定义这个房子有多长、多宽
每一块面积如何 规划，例如哪里是卫生间、哪里是饭厅、哪里是卧室
CSS
装修，例如给客厅贴壁纸、给卧室铺地板
JavaScript
一个有生活情趣的住户时常要买些新家具，或者把茶几换个位置
移动、添加、减少物件
Cookie和广告联盟
Cookie 是浏览器每次向网站服务器请求数据时携带的一些额外信 息，这些信息一般非常少（最多4KB），主要就是为了解决服务器“记 性不好”的问题。
每个网站都会有很多这样的 Cookie，但它们是隔离开的。也就 是说，百度只能访问到百度存储在浏览器的 Cookie，微博只能访问到微 博存储在浏览器的 Cookie，百度无法得到微博的Cookie，这一点由浏览 器保证。
浏览器根据用户信息，进行定性推送
引申为广告联盟
HTTP Header是什么
HTTP 协议的 Header 是一块数据区域，分为请求头和响应头两种类 型，客户端向服务区发送请求时带的是请求头，而服务器响应客户端数 据时带的是响应头
0 条评论
下一页
