HTTP和浏览器

从地址栏输入URL到呈现页面

1.浏览器向服务器请求解析URL中域名对应的IP地址。

2.建立TCP连接（三次握手）。

3.浏览器发出读取文件的HTTP请求，第三次握手发出的

4.服务器对浏览器做出响应，并把对应的HTML文本发给浏览器

5.浏览器将该HTML文本展示

6.释放TCP连接

建立TCP连接，三次握手，四次挥手

三次握手

1.第一次握手：client将SYN置为1，随机产生一个值seq=J，并将数据包发给Server，Client进入SYN_SENT状态

2.第二次握手，Server收到数据包，Server将SYN和ACK都置为1，ack = J+1；随机产生一个seq=K，发给Client，并进入SYN_RCVD状态。

3.第三次：client收到确认后，检查ack是否为J+1，ACK是否为1，正确则将标志位ACK置为1，ack = K+1，并将数据发给Server，server检查ack是否为K+1，ACK是否为1，如果正确则建立连接成功。

HTTP的方法，post，get

HTTP1.0 定义了三种请求方法，GET，POST和HEAD方法，

HTTP1.1新增六种：OPTIONS,PUT,PATCH,DELETE,TRACH,CONNECT

 

表现形式上:get请求的数据会附加在URL后面，以？分割，多参数用&连接，并且以ASCII编码，部分非ASCII 需编码，可缓存； post请求数据放在请求体中，不可缓存。

传输数据：GET请求，HTTP规范对URL长度没有进行限制，而是浏览器和服务器对URL的长度加以限制，所以GET请求时，传输数据会受限制；

POST不是URL传值，理论上无限制，但服务器一般会对POST传输的数据大小进行限制。

安全性 POST利用请求体传值安全性更高。

xss

跨站脚本攻击，是指攻击者在返回的HTML中嵌入JavaScript脚本，为了减轻这些攻击需要在http头部配上set-cookie:'httponly',会禁止js访问cookie,

攻击类型：反射，

存储，基于DOM

解决办法：httponly防止截取cookie，

输入检查，对输入进行过滤，特别是<>

输出检查：输出时，进行编码和转义，

CSRF

跨站请求伪造，攻击者借助受害者的cookie骗取服务器的信任，以受害者的名义伪造请求，发送给受攻击的服务器，从而进行攻击。

cookie是服务器发送到浏览器 并保存在本地的一小块数据，主要用于，会话状态管理，

防范：验证码

Referer check检测请求来源是否合法，或者添加随机产生的token

 

AJAX

就是异步的JavaScript和XML，

同步是这一步完成后，才能进行下一步，一步的话，不等这一步回调返回，即开始执行下一步了。

AJAX包含的技术：使用css和XHTML表示，使用DOM模型交互，使用XMLHttpRequest和服务器进行异步通信。Js绑定和调用。

原理简单来说，通过 XMLHTTPRequest对象向服务器发送请求，从服务器获取数据，然后进行更新页面，

优点：无刷新更新数据，异步与服务器通讯，减少后端负荷，

AJAX，无法使用back和history功能。

会引起安全问题，跨站脚本攻击，SQL注入

搜索引擎支持较弱。

原生

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","ajax_info.json",true);//POST可以发送大量数据
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置请求，GET忽略。
xmlhttp.send();

xmlhttp.onreadystatechange = function(){ 
if(xmlhttp.status == 200 && xmlhttp.readyState == 4){ 
 console.log(xhr.responseText);
 }

jquery中

$.ajax({
    type:'get',
    url:'abc.php',
    data:{},
    dataType:'json',
    timeout:3000,
    beforeSend:function(){ 
 // 发送之前就会进入这个函数
 // return false 这个ajax就停止了不会发 如果没有return false 就会继续
     },
     success:function(data){ // 成功拿到结果放到这个函数 data就是拿到的结果
 },
     error:function(){//失败的函数
 },
     complete:function(){//不管成功还是失败 都会进这个函数
 }
})


$.ajax({
type:'get',
url:'',
data:{},
dataType:"json",
success:function(data){
    
}
})

axios

axious.get('/uesr?id=1')
.then(function(response){
    console.log(response);
}).catch(function(error){
    console.log(error);
});

//post也一样

post，get区别

1、从http的标准来看，get安全，针对服务器来说的，get用于获取数据不会引起数据发生变化，post可能会引起数据发生变化。

2、get传参，参数在URL中，不安全，而post参数在request body里面，post比get安全，并且get会被缓存，但post支持多种编码，提交数据理论上没限制。

GET和POST是什么?HTTP协议中的两种发送请求的方法。

HTTP是什么?HTTP是基于TCP/IP的关于数据如何在万维网中如何通信的协议。

HTTP的底层是TCP/IP。所以GET和POST的底层也是TCP/IP，也就是说，GET/POST都是TCP链接。GET和POST能做的事情是一样一样的。你要给GET加上request body，给POST带上url参数，技术上是完全行的通的。

响应式布局和兼容性

优势：针对不同的设备灵活性强，但兼容各种设备代码较多，

1.先写固定布局，在添加媒体查询，和响应式代码。

2.一般要加meta标签，name=“viewport” content = "width=device-width,initial-scale=1,minimum-scale = 1,user-scalable =no" 并且禁止缩放。

3、@media screen and (max-width:980px){

}

link 中media也可以。

4、宽度百分比

兼容性

解决方案主要是css hack(不同的浏览器，不同的样式)

1、默认内外边距不同，用*margin：0；padding：0；

2、块元素含有图片时，ie6-7会出现图片下有空隙。

解决：div和img同一行

图片转化为block,(img是行内替换元素，与incline-block有相似)

设置图片垂直对齐。设置浮动。

3、ul和ol列表缩进问题

IE：margin :0;

firebox :margin :0; padding:0; list-style:none;

4、针对IE。HTML条件注释，

a标签加 样式，设置display：block；

5、IE6双边距，display：incline；

height太小，overflow：hidden；

6、透明度问题：用各个浏览器的私有属性。