跳到主要内容

21 篇博文 含有标签「Ajax」

查看所有标签

客户端​

$('button').eq(0).click(function() {
    $.getJSON('http://localhost:9000/jquery-jsonp?callback=?',function(data) {
        $('.result').html(`
            编号: ${data.id}<br>
            消息: ${data.msg}
        `)
    })
});

服务器端​

// 测试jquery的jsonp服务
app.all('/jquery-jsonp',(request,response) => {
    const data = {
        id: 1,
        msg: '该用户名已存在'
    };
    const str = JSON.stringify(data);
    // 接受callback参数
    let cb = request.query.callback;

    response.end(`${cb}(${str})`);
})
Ajax阅读需 1 分钟

CORS是什么？​

CORS（跨域资源共享），是官方的跨域解决方案，它的特点是是不需要再客户端做任何特殊的操作，完全在服务器中进行处理，支持GET和POST请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

设置允许跨域的相应头​

response.setHeader('Access-Control-Allow-Origin', '*')
Ajax阅读需 1 分钟

axios的CDN引入链接​

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

axios的GET请求​

const btns = document.querySelectorAll('button');
// 配置baseURL
axios.defaults.baseURL = 'http://localhost:8000';
btns[0].onclick = function() {
    axios.get('/axios-server',{
        // url参数
        params: {
            id: 666666,
            name: 'justin'
        },
        // 请求头信息
        headers: {
            color: "red"
        }
    }).then(value => {console.log(value);})
}

axios的POST请求​

btns[1].onclick = function () {
    axios.post('/axios-server',{
        username: 'pink',
        password: 123456
    }, {
        // url参数
        params: {
            id: 999,
            school: 'Tsinghua'
        },
        // 请求头参数
        headers: {
            height: 600,
            weight: 300
        }
    })
}
  • 第一个参数是URL
  • 第二个参数是请求体
  • 第三个参数是请求头参数

axios的通用函数发送请求​

btns[2].onclick = function() {
    axios({
        // 请求方式
        method: 'POST',
        url: '/axios-server',
        // url参数
        params: {
            vip: 100,
            name: 'jusitn'
        },
        // 头信息
        headers: {
            a: 100,
            b: 30000
        },
        // 请求体参数
        data: {
            username: 'admin',
            password: 123456
        }
    }).then(value => {console.log(value);})
}
Ajax阅读需 1 分钟

基础用法​

btn.onclick = function() {
    fetch('http://localhost:8000/fetch',{
        // 请求方法
        method: 'POST',
        // 请求头
        headers: {
            name: 'justin'
        },
        // 请求体
        body: {
            username: 'jusitn',
            password: 123456
        }
    }).then(value => {console.log(value);})
}
Ajax阅读需 1 分钟

什么是同源策略？​

同源策略是浏览器的一种安全策略。同源指的是协议、域名、端口号必须完全相同，违背同源策略就是跨域。

同源下访问URL可以简写​

const btn = document.querySelector('button');

btn.onclick = function() {
    const xhr = new XMLHttpRequest();
    // 因为满足同源策略，所以url路径可以简写
    xhr.open('GET','/data');
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readyState === 4) {
            if(xhr.status >= 200 && xhr.status < 300) {
                console.log(xhr.response);
            }
        }
    }            
}

注意事项​

  • 通过VScode右键打开的网页是5500端口，在进行测试的时候，我们一定要看清和我们服务器端口设置的端口是否一致，一旦不一致就会出现跨域问题。
Ajax阅读需 1 分钟

什么是JSONP？​

jsonp是一个非官方的跨域解决方案，只支持GET请求。

JSONP是如何工作的？​

网页中有一些原本就具有跨域能力的标签，比如img,link,iframe,script，jsonp就是利用script标签的跨域能力进行发送请求的。

  • 以script标签为例，jsonp接受的不能是普通的字符串，而应当是js代码

原生jsonp跨域案例​

  • 当用户的焦点离开输入框时，发送jsonp请求，然后返回该用户名已存在，同时将输入框的边框颜色变成红色。
  • 客户端：
// 获取input和p标签
const input = document.querySelector('input');
const p = document.querySelector('p');

// 定义handle函数
function handle(data) {
    input.style.border = 'solid 2px red';
    p.innerHTML = data.msg;
};

// 当用户的焦点移出输入框时触发函数
input.onblur = function() {
    // 获取用户输入的值
    let user_input = this.value;

    // 创建script标签,发送jsonp请求
    const script = document.createElement('script');
    // 向script标签中添加url
    script.src = "http://localhost:9000/jsonp";
    // 将创建好的script标签加到文档对象模型中
    document.body.appendChild(script);
  • 服务器端
// 测试jsonp服务
app.all('/jsonp',(request,response) => {
    const data = {
        id: 1,
        msg: '该用户名已存在'
    };
    const str = JSON.stringify(data);
    response.send(`handle(${str})`);
})
Ajax阅读需 2 分钟

什么是IE缓存问题​

答：IE缓存问题指的是IE浏览器遇到同样的Ajax请求的时候，会缓存返回结果，当返回结果发生变化的时候，浏览器显示的还是为变化的内容。

解决办法​

在请求的URL上加上?t= Date.now();

Ajax阅读需 1 分钟

目标：当点击最新请求的时候，将上一次未完成的请求取消掉​

  • 通过定义变量来存储表示是否正在发送请求的布尔值
  • 当用户点击发送请求的时候，开始判断这个变量是否为true,如果为true，则取消请求
  • 然后将变量置为true,直到检测到返回状态码为4将变量置为false

代码​

let isSending = false;
btn[0].onclick = function() {
    // 在此处判断是否正在发送，如果正在发送则取消
    if(isSending) xhr.abort();
    isSending = true;
    xhr = new XMLHttpRequest();
    xhr.open("GET","http://localhost:8000/cancel");
    xhr.send();
    xhr.onreadystatechange = function() {
        if(xhr.readystate === 4) {
            isSending = false;
        }
    }
};

实现效果​

Ajax阅读需 1 分钟