同步请求和异步请求

最新推荐文章于 2024-01-12 15:41:05 发布

newComerNewNewNew

最新推荐文章于 2024-01-12 15:41:05 发布

阅读量7.8k

点赞数 7

文章标签：服务器异步

本文链接：https://blog.youkuaiyun.com/lxiaopfeng/article/details/52527369

版权

1、同步请求和异步请求的区别

同步请求：客户端向服务器发送请求-->等待服务器响应-->处理完毕返回，客户端浏览器没有做别的事情。
同步连接请求数据时，当数据还未请求成功之前，用户界面做任何操作都是无效的，都是不会响应的。只有当请求数据完毕之后，才会响应用户交互，所以通常会卡死主线程。

异步请求：通过事件触发请求-->服务器处理请求-->处理完毕返回，但是客户端浏览器可以接着做别的事情
当异步请求时，会有单独的子线程去请求数据，而主线程依然响应处理用户交互，所以此时用户交互得到处理，用户流畅操作，用户体验比较好，所以开发过程中最多的还是异步链接

同步——如果使用者在服务运行的过程中阻塞时崩溃了，当它重新启动时，将无法重新连接到正在进行的调用，所以响应丢失了。使用者必须重复调用过程，并且期望这次不会崩溃。
异步——如果使用者在发送了请求之后等待响应时崩溃了，当它重新启动时，可以继续等待响应，所以响应不会丢失。

2、GET请求和POST请求的区别

GET请求，请求直接跟在URL后，以问号开始。因为服务器以及参数都会出现在请求接口中，也就是请求参数也是接口的一部分，而POST请求在接口中只有服务器地址，而参数会作为请求提交给服务器。
因为GET请求会出现在请求接口中，所以信息容易被捕获，安全性低，POST请求参数封装在请求体中，作为二进制流进行传输，不易被捕获，安全性高。
GET在请求时，接口的字节数有限制，支持小数据的提交，而POST请求从理论上来讲没有限制性，虽然理论上对于GET请求与POST请求都可以提交请求，但是GET多用于从服务器请求数据，而POST多用于向服务器提交数据。

3、实例：

（1）（2）实例中ajax.open方法中，第3个参数是设同步或者异步。同步的情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。而异步则需要 onreadystatechange事件处理，且值为4再正确处理下面的内容。
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成，且响应已就绪
status    200: "OK"
        404: 未找到页面
（1）

function RequestByGet(nProducttemp,nCountrytemp)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }             
    //Web page location.
    var URL="http://www.baidu.com/;
    xmlhttp.open("GET",URL, false);   //false 为同步请求
    //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=Shift_JIS")
    xmlhttp.send(null);
    var result = xmlhttp.status;
    //OK
    if(result==200)
    {
        document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
    }
    xmlhttp = null;
}

（2）

function RequestByGet(nProducttemp,nCountrytemp)
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }  
               
    //Web page location.
    var URL="http://www.baidu.com/";
    xmlhttp.open("GET",URL, true);//true 异步请求
    xmlhttp.onreadystatechange = handleResponse;
    //xmlhttp.SetRequestHeader("Content-Type","text/html; charset=UTF-8")
    xmlhttp.send(null);
}

function handleResponse()
{
    if(xmlhttp.readyState == 4 && xmlhttp.status==200)
    {
        document.getElementById("div_RightBarBody").innerHTML=xmlhttp.responseText;
        xmlhttp = null;
    }
}

async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。
（3）同步请求

 $.ajax({
                url : 'your url',
                data:{name:value},
                cache : false,
                async : false,
                type : "POST",
                dataType : 'json/xml/html',
                success : function (result){
                    do something....
                }
            });

（4）异步请求

       $.ajax({
                url : 'your url',
                data:{name:value},
                cache : false,
                async : true,
                type : "POST",
                dataType : 'json/xml/html',
                success : function (result){
                    do something....
                }
            });