js学习总结----ajax中的http请求方式及同步编程和异步编程

Posted 2020-09-30

一、请求方式

var xhr = createXHR();
xhr.open("get","/getList?num=12",true);
xhr.open("post","/getList",true);
xhr.send(‘{"name":"zhangsan","age":7}‘)
//HTTP METHOD;客户端向服务器端发送请求的方式
//以下的请求方式不管哪一种都可以向服务器传递数据，也可以从服务器中获取到数据，从本质意义上讲以下的方式是没有任何区别的，例如用post做的事情用get也能做，而我们接下来讲的区别都是目前开发者们约定俗成的规范：
/*
    GET:一般应用于从服务器获取数据（给服务器的数据少，从服务器拿的数据多，项目中最常用的请求方式就是get）
        使用GET请求给服务器传递内容我们一般都使用"URL问号传参的方式"
    POST:一般应用于向服务器推送数据(给服务器的多，从服务器拿下来的少)
        使用POST请求给服务器传递内容我们一般都使用"请求主体的方式"传递给服务器
    PUT:一般应用于给服务器上增加资源文件（我们上传图片功能）
    DELETE:一般应用于从服务器上删除资源文件
    HEAD:一般应用于只获取服务器的响应头信息
*/

/*
    GET PK POST
    大小问题:
        GET请求传递给服务器的内容存在大小的限制，而POST理论上没有限制
        原因:GET通过URL传参给服务器，而每个浏览器对于URL的长度存在限制，谷歌8kb、火狐7kb、IE12kb的长度限制，如果URL的长度超过限制，浏览器会把超出的部分截取
    缓存的问题:
        GET请求会出现缓存（这个缓存不一定是304）,POST是没有缓存的
        在项目中我们的GET请求一般不会让其出现缓存"清楚缓存"：在url的末尾加一个随机数
        xhr.open("get","/getList?num=12&_="+Math.random(),true);
    安全问题
        一般来说GET不安全，而POST相对安全一些
*/

二、同步编程和异步编程

//同步（SYNC）和异步（ASYNC）编程
//JS是属于单线程的，我们最好使用异步编程
//定时器都是异步编程的
//事件绑定都是异步编程的
//回调函数也可以理解为异步编程
//在AJAX中可以使用异步编程
var count = 0;
window.setInterval(function(){
    count++;
    console.log(count);//再输出1
},1000)//如果定时器的时间设置为0也不是立马执行，而是需要等待一段时间，我们设定的时间是1000ms，但是不一定时间到就会执行，如果当前浏览器的线程被占用，会一直等待
console.log(count);//先输出0
while(1){

}//加了while之后定时器里面的代码就不会执行

//如果多个定时器的时间都到了，先执行时间短的这个定时器

//AJAX中的同步:当AJAX任务开始的时候（XHR.SEND）需要等到readyState===4，才可以执行下面的任务
//AJAX中的异步:当AJAX任务开始的时候（XHR.SEND）不需要等到readyState===4，我们依然可以继续做其他的任务，并且只有其他的任务完成后，我们在看是否为4，到达4的时候做一些相关的操作