第三天HTTP和Cookie

1.ajax封装

	function ajax(options){
    var xhr = new XMLHttpRequest();
    // 获取请求参数
    var params = formdata(options.data); //a=1&b=2
    // get请求
    if (options.type=="GET") {
        xhr.open(options.type,options.url+'?'+params,options.isAsync);
        xhr.send();
    }
    //post请求
    if (options.type=="POST") {
        xhr.open(options.type,options.url,options.isAsync);
        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(params);
    }
    xhr.onreadystatechange = function(){
        if (xhr.readyState==4&&xhr.status==200) {
            options.success(xhr.responseText);
        }
    }
} 
	// 将对象 {  a:1 ,b:2 } 转为  a=1&b=2
	function formdata(obj){
	    var arr = [];
	    for(var k in obj){   
	        arr.push(k+'='+obj[k]);
	    }
	    return arr.join('&')
	}
	

调用

	ajax({
            type:'GET', //type----请求方式
            url:'demo.php', // url----地址
            data:{ // 传入信息
                a:1,
                b:2
            },
            isAsync:true,  // 同异步
            success:function(text){ // 返回接收信息
                console.log(text);
            }
        })

2、HTTP

程序员必备基础知识：通信协议------http、TCP、UDP

2.1 通信协议

都是通信协议，也就是通信时所遵守的规则，只有双方按照这个规则“说话”，对方才能理解。

2.2 常见的网络协议

http、TCP、UDP、FTP

前端向后端发送请求，需要建立连接（三次握手），如果数据传输完成，就需要断开连接啊（四次挥手）。

2.3 HTTP协议构成

客户端—>服务端：请求报文；

服务端—>客户端：响应报文；

请求报文：

行，头，空行，体。

2.4 完成一个HTTP请求

1、建立连接

2、发送请求

3、接受响应

4、断开连接

2.5 常见HTTP响应状态码

• 常见五种状态码

1**

2**

3**

4**

5**

200：标准请求成功

404：服务器找不到你的URL

2.6 get和post请求

2.6.1 GET

• 参数直接拼接在请求路径的后面
• GET请求是明文发送，相对不安全
• 不安全，传输数据量小，方便易用。

2.6.2 POST

• 参数以string的形式发送，也就是放在请求体中
• POST请求是密文发送，相对安全
• 安全，传输数据大，一般用做表单提交

3.cookie

3.1基础知识

1. 什么是会话：用户开启一个浏览器，访问一个网站，直到用户关闭浏览器，着整个过程就是一次会话。
2. HTTP无状态：一旦数据交互完成，浏览器和服务器的链接就关闭，再次交互就要重新建立连接，服务端就无法确认用户信息。
3. cookie：由于服务器无法确认用户信息，w3c提出，给每一个用户颁发一个通行证，无论谁访问都要携带通行证，这样服务器就可以从通行证确认用户信息。通行证就是cookie.
   (1).cookie默认是会话级别的，可以设置过期时间
   (2).cookie会保存在客户端

3.2前段操作cookie

• 获取cookie

	document.cookie   //获取的是完成的cookie字符串

• 设置cookie

document.cookie="key = value"

• 设置cookie的过期时间

	document.cookie = 'key=value;expires = 时间对象'
	document.cookie = 'age = 18;expires = '+new Date()

• cookie的删除

	//cookie不能直接删除，进行侧面删除
	//万能写法：
	document.cookie = "name = '';expires = =1"

3.3 cookie的特点

• cookie 是与浏览器相关的，不同的浏览器所保存的cookie也是不能相互访问的。
• cookie可能会被用户删除
• cookie的安全性不够高，如果想要保存用户名和密码，必须进行加密处理。
• cookie存储的数据在4k左右，cookie支持字符串形式的数据。
• • cookie信息存储在硬盘上，因此可以作为全局变量

3.4封装一个getcookie

function getCookie(key){
	var str = document.cookie;
    var arr = str.split('; ');// 分号+空格
    for(var i = 0;i < arr.length;i++){
        var item = arr[i].split('=');
        if(item[0]==key){
            return item[i];
        }
    }
    // 如果没有cookie，或者有cookie，但是没有找到key，得不到cookie，返回一个字符串
    return ';'
}

3.5封装一个 setcookie

function setCookie(key,value,day){
	var d = new Date();
    d.setDate(d.getDate()+day);
    document.cookie = key+'='+value+';expires'+d;
}

3.4 封装一个删除delcookie

function delCookie(key){
    setCookie(key,'',-1);
}

3.5 封装一个清空

function clearData(){
    localStorage.clear();
}

3.6 作用

1. 判断用户是否登陆过网站，以便下次登录时能够实现自动登录（或者记住密码）。
2. 保存上次登录的事件等信息。
3. 保存上次查看的页面。
4. 浏览计数。