AJAX基础 part2

AJAX解决ie缓存问题

当前端页面向服务起连续发送两条请求时，在ie浏览器中，第二次发送走的是第一次发送时产生的缓存，所以不能够及时的更新数据，解决办法就是在请求的url后加上一个动态可变的参数，这里以当前时间戳Date.now()为例；

 xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());

请求超时与网络异常

在服务端设置三秒的响应延时，模拟网络超时

在前端html中处理超时，并执行超时回调

效果

AJAX取消请求

<div id="result">

    </div>
    <button>点击发送请求</button>
    <button>点击取消请求</button>

const btns = document.querySelectorAll('button');
let x = null; 
btns[0].onclick = function(){
	x = new XMLHttpRequest();
	x.open('GET','http://127.0.0.1:8000/delay');
	x.send();
}
btns[1].onclick = function(){ //取消按钮点击后，取消请求
x.abort();
}

重复发送请求的问题

用户每点击依次发送请求按钮，页面就会向服务器发送一个请求，但是如果用户连续发送同一个请求，则会给服务器造成很大的压力，因此我们在此设置一个表示请求是否已经发送的变量，在发送请求之前判断之前是否已经正在发送该请求，如果已经发送了，那就将之前的请求取消并且创建一个新的请求。

 const btns = document.querySelectorAll('button');
        let x = null;

        let isSending = false;

        btns[0].onclick = function(){
            if(isSending) x.abort(); //如果正在发送，则取消请求，并创建一个新的请求
            x = new XMLHttpRequest();
            isSending = true;  //正在发送请求，将isSending改为true
            x.open('GET','http://127.0.0.1:8000/delay');
            x.send();
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    isSending = false; //请求完成，将isSending改为false
                }
            }
        }
        btns[1].onclick = function(){
            x.abort();
        }

jQuery发送AJAX请求

jquery使用$.get或者$.post来发送ajax请求

$('button').eq(0).click(function(){ //get请求
$.get('http://127.0.0.1:8000/iquery-server',{a:100,b:200},function(data){
	console.log(data);
            });
 })
$('button').eq(1).click(function(){//post请求
            $.post('http://127.0.0.1:8000/iquery-server',{a:100,b:200},function(data){
             console.log(data);
            });
 })

设置请求数据类型

我们在服务器响应返回一个json格式的数据

app.all('/iquery-server',(request, response)=>{
   
    response.setHeader('Access-Control-Allow-Origin','*');//设置响应头，设置允许跨域
    response.setHeader('Access-Control-Allow-Headers','*');
    const data = {
        name:'Sunner_Deer'
    };
    //对对象进行字符串转换
    let str = JSON.stringify(data);
    response.send(str);
});

在jquery请求中设置数据类型

$('button').eq(0).click(function(){  //设置了数据类型的请求
 	$.get('http://127.0.0.1:8000/iquery-server',{a:100,b:200},function(data){
console.log(data); 
	},'json');
})
$('button').eq(1).click(function(){//没有设置数据类型的请求
	$.post('http://127.0.0.1:8000/iquery-server',{a:100,b:200},function(data){
console.log(data);
	});
})

效果

通用型方法

  $('button').eq(2).click(function(){
            $.ajax({
                url:'http://127.0.0.1:8000/delay',
                //参数
                data:{a:100, b:200},
                //请求类型
                type:'GET',
                //响应体结果数据类型
                dataType:'json',
                //成功回调
                success:function(data){
                    console.log(data);
                },
                //超时时间
                timeout:2000,
                //失败回调
                error:function(){
                    console.log('出错啦！');
                }
            })
        })

乌云后面依然是灿烂的晴天 加油！