前端-网络
前段-网络
- AJAX
- jQuery Ajax
- POST GET请求方法
- 同源策略（Same-origin Policy）
- 跨域技术
- JSONP
- Cookie || Session
- WebStorage
- iframe
- 获取iframe内的window
- 前端必备网络知识
- 当在浏览器里输入一个url后的执行过程：
- TCP/UDP（传输层协议）
- ‘三次握手’
- ‘四次挥手’
AJAX
AJAX = Asynchronous JavaScript and XML, AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
AJAX受同源策略的限制
readyState:存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
//兼容IE的ajax对象
function ajaxFunc(method, url, data, callback, flag){
var xhr = null;
if(window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr = new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
method = method.toUpperCase();
if(method == 'GET'){
xhr.open(method, url + '?' + data, flag);
xhr.send();
}else if(method = 'POST'){
xhr.open(method, url, flag);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
xhr.send(data);
}
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
callback(xhr.responseText);
}
}
}
jQuery Ajax
<input type="text" id="username">input>
<input type="text" id="age">input>
<button id="sub"> submitbutton>
<script src="jquery-1.12.4.js">script>
<script>
var username = document.getElementById('username');
var age = document.getElementById('age');
var btn = document.getElementById('sub');
btn.onclick = function () {
// var data = 'username=' + username.value + '&age=' + age.value;
// ajaxFunc('POST', './post.php', data, show, true);
$.ajax({
url: './post.php',
type: 'POST', //请求方式"POST"|"GET",默认"GET"
data: {
username: username.value,
age: age.value
},//要求为Object或String类型的参数，发送到服务器的数据
dataType: ，//要求为String类型的参数，预期服务器返回的数据类型。
async: true,//默认值为true,所有请求为异步，同步请求false
success: function(res){
console.log(res)
console.log(this)
},
error: function(e){
console.log(e.status, e.statusText)
},
beforeSend: function(){},//数据加载成功之前
complete: function(){},//请求完成时(成功或失败)的处理函数，最后执行
timeout: number//超时，毫秒
context: //为所有 AJAX 相关的回调函数规定 "this" 值,改变函数上下文
})
}
script>
//post.php
header('content-type: text/html;charset="utf-8"');
error_reporting(0);
$username = $_POST['username'];
$age = $_POST['age'];
echo "名字：{$username}, 年龄：{$age}";
?>
POST GET请求方法
区别：
- GET 使用 URL 或 Cookie传参，Get 是把参数数据队列加到提交表单的 ACTION 属性所指的 URL 中，值和表单内各个字段一一对应，在 URL 中可以看到; 而 POST将数据放在body中。（?NAME=‘CST’&AGE=18）,通过 HTTP post 机制，将表单内各个字段与其内容放置在 HTML HEADER 内一起传送到 ACTION 属性所指的 URL 地址 , 用户看不到这个过程。
- GET上的URL会有长度上的限制，传送的数据量较小；POST可以传输很多数据。
- POST相较于GET安全
- 对于 get 方式，服务器端用 Request.QueryString 获取变量的值，对于 post 方式，服务器端用 Request.Form 获取提交的数据。
同源策略（Same-origin Policy）
同源：域名，协议，端口相同。不同源的客户端脚本，在没有明确授权的情况下，不能读写对方的资源。
同源策略是浏览器最核心也最基本的安全功能。同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
拥有SRC属性的标签不受同源策略限制，拥有跨域的能力，类似‘script，img，a，iframe’等。
浏览器有跨域限制，但是服务器不存在跨域问题，所以可以由服务器请求所要域的资源再返回给客户端。
同源策略限制一下几种行为：
- Cookie、LocalStorage 和 IndexDB 无法读取
- DOM 和 Js对象无法获得
- AJAX 请求不能发送
跨域技术
常用跨域方法
- 服务器代理中转 (服务器不存在跨域问题)
- document.domain(针对基础域名相同的情况)
bj.58.com document.domain = ‘58.com’
tj.58.com document.domain = ‘58.com’ - jsonp（jsonp 的原理是动态插入 script 标签）
JSONP
JSONP就是利用’script’标签的跨域能力实现跨域数据的访问。
JSONP由两部分组成，回调函数和数据。其基本思路是：动态插入script标签，向服务器请求json数据，返回的数据将在回调函数中获取。
JSONP只支持 GET 请求
原理
Web页面上用‘script’ 引入 js文件时不受同源策略的影响，因为无法监控‘script’的’src’属性是否完成数据获取，需定义处理跨域获取数据的函数如 function doJSON（data）{}，用src获取数据的时候添加一个参数cb=‘doJSON’ (服务端会根据参数cb的值返回 对应的内容) 此内容为以cb对应的值doJSON为函数真实要传递的数据为函数的参数的一串字符 如 doJSON（’数据’）
//实现百度搜索联想词功能
var oInput = document.getElementsByTagName('input')[0];
var ul = document.getElementsByTagName('ul')[0];
oInput.oninput = function(){
var value = this.value;
var oScript = document.createElement('script');
oScript.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+ value +'&cb=haha';
document.body.appendChild(oScript);
document.body.removeChild(oScript);
}
function haha(data){
var s = data.s;
var str = '';
if(s.length > 0){
ul.style.display = 'block';
}else{
ul.style.display = 'none';
}
s.forEach(function(ele, index){
str += '+ ele+'>'+ ele +' ';
})
ul.innerHTML = str;
}
Cookie || Session
会话（Session）跟踪是Web程序中常用的技术，用来跟踪用户的整个会话。常用的会话跟踪技术是Cookie与Session。Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份用于跟踪用户的状态。Web应用程序是使用HTTP协议传输数据的。HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。Cookie的作用是解决HTTP协议中缺少无状态缺陷的问题。
cookie是服务器端生成,发送给user-Agent(一般是浏览器,服务器告诉浏览器设置一下cookie),浏览器会将cookie以key/value形式保存到某个目录下的文本内,下次请求同一网站时就发送该cookie给服务器(前提是浏览器设置启用cookie:navigator.cookieEnabled).
cookie的内容主要包括：名称，值，到期时间，路径和域。路径与域一起构成了cookie的范围。如果未设置到期时间，则表示此cookie的生命周期是在浏览器会话期间，浏览器窗口关闭，并且cookie消失。生命周期为浏览器会话的cookie称为会话cookie。cookie就是一个小型文件(浏览器对cookie的内存大小是有限制的最大为4k左右).
cookie一般由服务器生成，可设置失效时间，若由浏览器生成，默认是关闭浏览器后失效；
cookie机制：如果不在浏览器中设置过期时间，cookie被保存在内存中，生命周期随浏览器的关闭而结束，这种cookie简称会话cookie。如果在浏览器中设置了cookie的过期时间，cookie被保存在硬盘中，关闭浏览器后，cookie数据仍然存在，直到过期时间结束才消失。Cookie是服务器发给客户端的特殊信息，cookie是以文本的方式保存在客户端，每次请求时都带上它
session机制：当服务器收到请求需要创建session对象时，首先会检查客户端请求中是否包含sessionid。如果有sessionid，服务器将根据该id返回对应session对象。如果客户端请求中没有sessionid，服务器会创建新的session对象，并把sessionid在本次响应中返回给客户端。通常使用cookie方式存储sessionid到客户端，在交互中浏览器按照规则将sessionid发送给服务器。如果用户禁用cookie，则要使用URL重写，可以通过response.encodeURL(url) 进行实现；API对encodeURL的结束为，当浏览器支持Cookie时，url不做任何处理；当浏览器不支持Cookie的时候，将会重写URL将SessionID拼接到访问地址后。
WebStorage
WebStorage的目的是克服由cookie所带来的一些限制，当数据需要被严格控制在客户端时，不需要持续的将数据发回服务器。
WebStorage两个主要目标：
- 提供一种在cookie之外存储会话数据的路径。
- 提供一种存储大量可以跨会话存在的数据的机制。
HTML5的WebStorage提供了两种API：localStorage（本地存储） 和 sessionStorage（会话存储）。可以方便的在 web 请求之间保存数据。有了本地数据，就可以避免数据在浏览器和服务器间不必要地来回传递。WebStorage存储机制是对HTML4中cookie存储机制的一个改善。由于cookie存储机制有很多缺点，HTML5不再使用它，转而使用改良后的Web Storage存储机制。
生命周期：
- localStorage:localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。
- sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。
存储大小：localStorage和sessionStorage的存储数据大小一般都是：5MB
存储位置：localStorage和sessionStorage都保存在客户端，不与服务器进行交互通信。
存储内容类型：localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理
获取方式：
- localStorage：window.localStorage;
- sessionStorage：window.sessionStorage;。
应用场景：localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据。sessionStorage：敏感账号一次性登录；
WebStorage的优点：
- 存储空间更大：cookie为4KB，而WebStorage是5MB；
- 节省网络流量：WebStorage不会传送到服务器，存储在本地的数据可以直接获取，也不会像cookie一样每次请求都会传送到服务器，所以减少了客户端和服务器端的交互，节省了网络流量；
- 对于那种只需要在用户浏览一组页面期间保存而关闭浏览器后就可以丢弃的数据，sessionStorage会非常方便；
- 快速显示：有的数据存储在WebStorage上，再加上浏览器本身的缓存。获取数据时可以从本地获取会比从服务器端获取快得多，所以速度更快；
- 安全性：WebStorage不会随着HTTP header发送到服务器端，所以安全性相对于cookie来说比较高一些，不会担心截获，但是仍然存在伪造问题；
- WebStorage提供了一些方法，数据操作比cookie方便；
- setItem (key, value) —— 保存数据，以键值对的方式储存信息。
- getItem (key) —— 获取数据，将键值传入，即可获取到对应的value值。
- removeItem (key) —— 删除单个数据，根据键值移除对应的信息。
- clear () —— 删除所有的数据
- key (index) —— 获取某个索引的key
记录用户信息的方式有:
- 标记用户身份请求http首部
form:e-mail
user-agent:浏览器信息
referer:跳转链接 - IP地址
- 用户登录
- 胖URL.
- cookie
cookie管理方法
var manageCookie = {
setCookie: function(name, value, time) {
document.cookie = name + '=' + value + ';max-age=' + time;
return this;//可实现链式调用
},
removeCookie: function(name) {
this.setCookie(name, '', -1);
},
getCookie: function(name, callback) {
var cookieArr = document.cookie.split('; ');
for(var i = 0, len = cookieArr.length; i < len; i++){
var itemCookieArr = cookieArr[i].split('=');
if(itemCookieArr[0] == name){
callback(itemCookieArr[1]);
return this;
}
}
callback(undefined);
return this;
}
}
iframe
iframe就是一个标签dom元素.
- 可以一个网页里嵌入另一个网页:
导航栏tab切换页(古老的做法),在线编辑器,广告植入.导航栏tab切换页(古老的做法),在线编辑器,广告植入. - 历史记录管理,解决ajax化网站响应浏览器前进后退按钮的方案.
- 跨域通信等.
获取iframe内的window
- document.getElementsByTagName(‘iframe’)[0].contentWindow.xxx
- window.frames[‘iframe的name’].xxx;
- document.iframes[name].contentWindow;//IE专用- -
- document.iframes[i].contentWindow;//IE专用
父级窗口对象
window.parent
顶级窗口对象
window.top
前端必备网络知识
当在浏览器里输入一个url后的执行过程：
- 浏览器通过DNS域名解析到服务IP（ping url）
- 客户端（浏览器）通过TCP协议建立到服务端的TCP链接（三次握手）
- 客户端向web服务器端（HTTP服务器）发送一个HTTP协议包，请求服务器端的资源文档
客户端发起一个HTTP会话到服务IP，通过TCP进行封装数据包，输入到网络层 - 服务器向客户端发送HTTP协议应答包
- 客户端与服务器断开连接（四次挥手），客户端解析HTML文档
TCP/UDP（传输层协议）
面向连接的TCP
TCP（Transmission Control Protocol，传输控制协议）是基于连接的协议，即在正式收发数据前，必须和对方建立可靠的连接。一个TCP连接必须要经过三次“对话”才能建立起来。
面向非连接的UDP协议
UDP（User Data Protocol，用户数据报协议）是与TCP相对应的协议。它是面向非连接的协议，它不与对方建立连接，而是直接就把数据包发送过去。
‘三次握手’
- 先Client端发送连接、请求报文。
- Server端接受连接后回复ACK报文，并为这次连接分配资源。
- Client端接收到ACK报文后也向Server端发送ACK报文，并分配资源，这样TCP连接就建立了。
采用三次握手是为了防止失效的连接请求报文段突然又传送到主机，因而产生错误：
client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点滞留以致延误到达server，server收到此早已失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。如果采用‘两次握手’就建立连接，由于client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据,但server却以为新的运输连接已经建立，并一直等待client发来数据。这样，server的很多资源就白白浪费掉了。
‘四次挥手’
- Client端发起中断连接请求，也就是发送FIN报文。Server端接到FIN报文后，意思是说"我Client端没有数据要发给你了"，但是如果你还有数据没有发送完成，则不必急着关闭（Socket），可以继续发送数据。
- server发送ACK，“告诉Client端，你的请求我收到了，但是我还没准备好，请继续等我的消息”。
wait:这个时候Client端就进入FIN_WAIT状态，继续等待Server端的FIN报文。 - 当Server端确定数据已发送完成，则向Client端发送FIN报文，“告诉Client端，好了，我这边数据发完了，准备好关闭连接了”
- Client端收到FIN报文后，"就知道可以关闭连接了，但是他还是不相信网络，怕Server端不知道要关闭，所以发送ACK后进入TIME_WAIT状态，如果Server端没有收到ACK则可以重传。“，Server端收到ACK后，“就知道可以断开连接了”。Client端等待了2MSL后依然没有收到回复，则证明Server端已正常关闭，那好，我Client端也可以关闭连接了。Ok，TCP连接就这样关闭了！