ajax基础

基本用法

    // 1. 创建请求对象
    const xhr = new  XMLHttpRequest();
    // 2. 初始化 设置请求方法和URL
    xhr.open('GET','http://127.0.0.1:8001/server');
    // 3. 发送
    xhr.send();
    //4. 事件绑定 处理服务端返回的结果
    // readyState 是xhr对象的属性。表示状态 0 未初始化 1 载入 2 载入完成 3 解析 4 完成
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){ // 服务端返回了所有结果
            if(xhr.status >= 200 && xhr.status < 300){// 响应状态码2xx：2开头都是成功 
                // 处理结果 有 行 头 空行 体
                // 响应行
                console.log(xhr.status);
                console.log(xhr.statusText);
                // 响应头
                console.log(xhr.getAllResponseHeaders());
                // 响应体
                console.log(xhr);
                result.innerHTML = xhr.responseText;
            }
        }
    }

传参

GET 传参：参数key=value拼接在URL末尾
POST 传参：xhr.send('key=value') 可以传递任意格式的参数，最终要因后端指定的格式而异

设置请求头

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');// 默认请求头
xhr.setRequestHeader('token', '123456') // 自定义请求头
res.setHeader('Access-Control-Allow-Origin','*');

Content-Type：设置请求类型

xhr.responseType = 'json'：自动将json数据转换成对象

ajax在IE中的缓存问题

IE浏览器会对AJAX请求的结果进行缓存，即使设置了If-Modified-Since头，也不会生效。
再次发送请求时直接从本地获取缓存
解决方法：
在请求头中添加Cache-Control: no-cache
请求URL添加时间戳，保持每次请求URL不一致

超时设置

xhr.timeout = 1000; // 单位毫秒
xhr.ontimeout = function(){
    console.log('请求超时');
}

网络异常设置

xhr.onerror = function(){
    console.log('网络异常');
}

取消请求

xhr.abort();

防止重复发送请求

设置正在请求的标识，取消上一次再发送新的请求

jQuery中的Ajax

jQuery中的Ajax是通过$.ajax()方法来发起请求

$.get('http://127.0.0.1:8001/server',{a:100},function(data){
    console.log(data);
},'json')

$.post('http://127.0.0.1:8001/server',{a:100},function(data){
    console.log(data);
},'json')

$.ajax({
    url:'http://127.0.0.1:8001/server',
    type:'post',
    data:{a:100},
    dataType:'json',
    Headers:{token:'123456'},
    success:function(data){
        console.log(data);
    },
    error:function(err){
        console.log(err);
    }
}

axios中ajax的使用

axios基于Promise

axios.default.baseURL = 'http://127.0.0.1:8001';
// get请求
axios.get('/server',{
        params:{
            id:100
        },
        headers:{
            token:'123456'
        }
    })
    .then(function(res){
        console.log(res);
    })
    .catch(function(err){
        console.log(err);
    })
// post请求 第二个参数是请求体  第三个参数是其他配置
axios.post('/server',{
        name:'tom',
        age:18
    },
    {
        params:{
            id:100
        },
        headers:{
            token:'123456'
        }
    })
    .then(function(res){
        console.log(res);
    })
    .catch(function(err){
        console.log(err);
    })
// 通用方式： 函数方式发起请求
axios({
        method:'post',
        url:'/server',
        // 请求参数
        data:{
            name:'tom',
            age:18
        },
        params:{
            id:100
        },
        headers:{
            token:'123456'
        }
    }).then((res)=>{
        console.log(res);
    })
    .catch((err)=>{
        console.log(err);
    })

fetch函数发起ajax 请求

fetch('/server',{
        method:'post',
        mode:'cors',// 跨域请求 no-cors cors *same-origin
        headers:{
            token:'123456'
        },
        // 请求参数
        body:JSON.stringify({
            name:'tom',
            age:18
        }),
        headers:{
            'Content-Type':'application/json'
        }
    })
    .then((res)=>{
        return res.json();// res.text()
    }).then(res={
        console.log(res);
    })// fetch是双重Promise
    .then((res)=>{
        console.log(res);
    })
    .catch((err)=>{
        console.log(err);
    })

跨域

同源策略

同源策略是浏览器的安全策略，同源策略限制了从一个源加载的文档或脚本只能来自同一个源。
协议、域名、端口都必须相同。
ajax默认遵循同源策略，即ajax请求只能在同源的页面中进行。

什么是跨域

跨域是指违背同源策略的请求行为。

跨域解决方案

1. JSONP
2. CORS
3. WebSocket
4. 代理服务器

JSONP

JSONP的全称是JSON with Padding，即JSON+Padding。非官方解决方案。

JSONP的原理是，通过script标签的跨域能力来发送请求。
JSONP的缺点是，只支持GET请求，且只支持GET请求的返回数据类型是text/plain。

JSONP的优点是，兼容性好，支持跨域，支持GET和POST请求。

• JSONP的使用步骤：
  1. 定义一个回调函数，并将其命名为callback。
  2. 在回调函数中，使用JSON.parse()方法将返回的JSON字符串转换为JSON对象。

后端路由

// jsonp
app.all('/jsonp-server',(req,res)=>{
    const data = {
        name:'jsonp'
    };
    const param = JSON.stringify(data);
    return res.send(`handle(${param})`)// 必须返回一个函数的调用，该函数前端必须先声明
})

前端jsonp的使用

<body>
    <div id="result"></div>
    <script>
        // 处理响应的数据
        function handle(data){
            const result = document.getElementById('result');
            result.innerHTML = data.name;
        }

        const div = document.getElementById('div');
        // 1. 动态创建script标签发起请求
        div.onclick = function(){
            const script = document.createElement('script')
            script.src = 'http://127.0.0.1:8001/jsonp-server'
            document.body.appendChild(script)
        }
    </script>
    // 2. 静态发起请求
    <script src="http://127.0.0.1:8001/jsonp-server"></script>
</body>

jQuery中使用jsonp callback

后端路由

// jquery jsonp
app.all('/jsonp-server',(req,res)=>{
    const data = {
        name:'jsonp'
    };
    const callback = req.query.callback;
    res.send(`${callback}(${JSON.stringify(data)})`);
})

前端jsonp的使用

<body>
    <div id="result"></div>
    <button>请求</button>
    <script>
        // 发起请求
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8001/jsonp-server?callback=?', function(data){
                $('#result').html(`name:${data.name}`)
            })
        })
    </script> 
</body>

CROS 跨域资源共享

官方跨域解决方案
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应后会对响应放行
后端的响应头设置Access-Control-Allow-Origin等
res.setHeader('Access-Control-Allow-Origin','*');
res.setHeader('Access-Control-Allow-Headers','*');
res.setHeader('Access-Control-Allow-Method','*');