知识总结

学习总结

Php代码简单书写

php的数据类型：int整型,float浮点型,string字符串,boolean布尔型,数组array,对象object (注意：这里的对象并不是js中的对象,而是通过构造函数new 出来的对象)
输出的三种方法：
echo=>用来输出基本数据类型，true会被转化成1输出，false会被转化成空白的内容
print_r()=>用来输出所有的数据类型，true会被转化为1，false会被转化为空白内容
var_dump()=>用来输出所有的数据类型，布尔型的true和false会被正常输出，输出所有的数据类型和信息
php中的字符串：单引号和双引号，单引号和双引号在js中一样，但在php中单引号就是普通的字符串，双引号是相当于js中的模板字符串.
数组：数组分为索引型和关联型，索引型：$arr=array(1,2,3,4);关联型：$arr=array(“name”=>’shi’,”age”=>18);
解决中文乱码问题
header(‘content-type:text/html;charset=utf-8’);

HTTP传输协议和cookie

http传输协议：超文本传输协议（应用层协议），端口号默认为80，https默认端口号是443
http请求的步骤：1.建立连接：基于TCP/IP协议的三次握手，保证了可以正常通信2.前端发送请求：以请求报文的形式3.后端响应：以响应报文的形式返回4.断开连接：基于TCP/IP的四次挥手，保证不再通信
常见的响应状态码
类型：1–：代表正在继续执行
2–：代表各种意义上的成功
3–：表示重定向
4–：表示客户端错误
5–：表示服务端错误
常见的状态码：
200：表示请求成功
301：永久重定向
304：缓存
404：资源路径错误
403：权限不够
500：内部服务器错误
502：服务器维护

常见的请求方式：
post:倾向于向服务器传递数据
get：倾向于向服务器获取数据
put:多用于向服务器传递数据，并让服务器保存起来
delete:多用于让服务器删除一些数据
head:只是为了获取响应头信息
pacth:和put类似，倾向于局部刷新
connect:预留方式，管道连接改成代理连接方式
options:用于允许前端查看服务器性能
get请求和post请求的区别：
get: 1.在url后面拼接参数（请求体中是空的）
2.存储大小有限制，在2kb左右(IE浏览器最大是2kb左右)
3.相对于post而言不安全（明文发送）
4.倾向于向服务端获取数据
5.会被浏览器主动缓存
6.数据格式必须是url编码，如果不是，浏览器会自动转化为url编码
post:
1.倾向于向服务器传递数据
2.在请求体中传递数据
3.相对于get是安全的（暗文发送）
4.不会被浏览器主动缓存，需要手动设置
5.存储大小理论上没有限制，但是会被服务器限制
6.数据格式没有限制，但是要和请求头中的content-type一致
cookie的特点:
1.按照域名存储，与资源路径地址无关
2.存储大小为4kb或者50条cookie
3.时效性：默认为会话级别即关闭浏览器就消失了
4.请求自动携带：如果cookie中有内容，则当前域名下的任意一个请求，都会自动携带到请求头中，如果没有内容就不携带
5.前后端操作：前端利用js进行cookie的增删改查，后端利用各种后端语言进行cookie的增删改查
cookie的操作：

// An highlighted block
//增：
document.cookie(“key1=value1”);
//一次只能存储一条cookie数据
//改：
document.cookie(“key1=value2”);

查：document.cookie;
key1=value1; key2=value2的形式，是一个字符串，以分号和空格分隔键值对

// An highlighted block
//cookie的expires
//设置过期时间
let date=new Date();
date.setTime(date.getTime()-8*60*60*1000+15*1000); //cookie过期时间为15秒
document.cookie=`name=shi;expires=${date}`;
//删:
let date=new Date();
date.setTime(date.getTime()-8*60*60*1000-1*1000); 
Document.cookie=`name=shi;expires=${date}`;

ajax

get请求和post请求：

// An highlighted block
//封装get方法
function getSend(url, cb) {
	let xhr = new XMLHttpRequest();
	xhr.open('GET', url);
	xhr.onload = function() {
		// if(xhr.status==200&&xhr.readyState==4){
		cb(xhr.responseText);
		// }
	}
	xhr.send(null);
}

function postSend(url, cb, data) {
	let xhr = new XMLHttpRequest();
	xhr.open("POST", url);
	xhr.onload = function() {
		if (xhr.status == 200 && xhr.readyState == 4) {
			cb(xhr.responseText);
		}
	}
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	xhr.send(data);
}
//需要注意的是post请求要在发送请求前设置请求头
//Xhr.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’); 

ajax的状态码：获取用ajax对象.readyState
0：表示创建一个ajax对象成功了
1：表示open方法执行完毕
//2,3,4发生在xhr.send();之后
2：表示响应体已经回到了浏览器，但是此时还不能用（响应报文形式）
3：浏览器正在解析响应报文，分离出响应体
4：浏览器分离响应体成功，可以使用了，请求结束

Ajax兼容性问题
创建ajax对象时=>
IE低版本：let xhr=new ActiveXObject(‘Micorsoft.XMLHTTP’);
标准浏览器:let xhr=new XMLHttpRequest();
接受响应的事件=>
IE低版本：xhr.onreadystatechange=function(){} (没有onload事件)
标准浏览器：xhr.οnlοad=function(){}
xhr.onreadystatechange=function(){}
ajax的顺序：1->2->4->3

同源策略以及跨域的解决办法

同源策略：浏览器规定的，仅限于浏览器，服务器不受限制,即传输协议，域名，端口号，都相同才满足同源策略
跨域请求：触发了同源策略的请求
跨域请求的解决方法：
1.jsonp=>利用了src属性，创建一个script标签，再把文件里的函数实现了，函数名是callback，或者cb后面的值
2.Cors=>跨域资源共享，只要后端在其中加入以下即可，就能访问=>
header(“Access-Control-Allow-Origin:*”); // 允许哪些域名请求我
// header(“Access-Control-Request-Methods:GET, POST, PUT, DELETE, OPTIONS”); // 允许哪些请求方式
header(‘Access-Control-Allow-Headers:x-requested-with,content-type,test-token,test-sessid’); // 允许携带哪些请求头信息
3.代理服务器=>利用服务器不受同源策略的影响，让代理的服务器去请求目标服务器的接口，要注意修改配置文件

promise

promise:为了解决回调地狱问题(异步编程解决方案)
回调函数：调用一个a函数时，将b函数作为实参传入，在a函数中用变量接收，作为形参，调用b函数
回调地狱：多个回调函数嵌套在一起会引发回调地狱

// An highlighted block
//基本结构：
let p= new Promise(function(resolve,reject){
//异步的操作
});
p.then(function(res){  //成功时执行
});
P.catch(function(){
});

//封装pGetSend方法，简便promise操作
function pGetSend(url) {
	let p = new Promise(function(resolve, reject) {
		let xhr = new XMLHttpRequest();
		xhr.open('GET', url);
		xhr.onload = function() {
			resolve(xhr.responseText);
		}
		xhr.send(null);
	});
	return p;
}
//Promise操作简化版
pGetSend('./a.php')  //该函数返回一个promise对象
.then(function(res){
//第一个请求
let data=JSON.parse(res);
return pGetSend(`./b.php?n1=${data.n1}&n2=${data.n2}`);

})
.then(function(res){
//第二个请求
Console.log(res);
})

async/await

async关键字写在函数前面，表示该函数是异步函数
await关键字必须跟async才能使用,后面必须是一个promise对象，在await前用一个变量接受本应该出现在then()中的数据
当await后面跟promise对象时，那么代码会停在这里，等到后面的promise里面的异步事情做完以后，把结果传递给前面的变量，再继续向后执行

// An highlighted block
async function fn(){
let res1=await pGetSend('./a.php');
let data=JSON.parse(res1);
let res2=await pGetSend(`./b.php?n1=${data.n1}&n2=${data.n2}`);
Console.log(res2);
}
fn();

babel可以转化语法层面的兼容，但是方法层面的兼容不可以