AJAX在各种框架下的使用

AJAX

1.ajax

不刷新的情况下,向服务器发起请求

1.优点:

• 无需刷新
• 事件触发更新部分内容

2.缺点:

• 没有浏览历史,不能回退
• 跨域问题
• SEO不友好

2.使用ajax原生

1.get/post

//获取button元素
  const btn = document.getElementsByTagName("button")[0]
  const result = document.getElementById("result")
  //绑定事件
  btn.onclick = function () {
      //1. 创建对象
      const xhr = new XMLHttpRequest()
      //2. 初始化 设置请求方法和 url
      xhr.open("GET", "http://127.0.0.1:8000/server?a=100&b=200&c=300")
      //3. 发送
      xhr.send()
      //4. 事件绑定 处理服务端返回的结果
      // on  when 当....时候
      // readystate 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
      // change  改变
      xhr.onreadystatechange = function () {
          //判断 (服务端返回了所有的结果)
          if (xhr.readyState === 4) {
              //判断响应状态码 200  404  403 401 500
              // 2xx 成功
              if (xhr.status >= 200 && xhr.status < 300) {
                  //处理结果  行 头 空行 体
                  //响应
                  // console.log(xhr.status);//状态码
                  // console.log(xhr.statusText);//状态字符串
                  // console.log(xhr.getAllResponseHeaders());//所有响应头
                  // console.log(xhr.response);//响应体
                  //设置 result 的文本
                  result.innerHTML = xhr.response
              } else {
              }
          }
      }
  }


  xhr.open('POST', 'http://127.0.0.1:8000/server');
  //设置请求头
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  xhr.setRequestHeader('name','atguigu');
  //3. 发送
  xhr.send('a=100&b=200&c=300');

2.设置返回json

xhr.responseType = 'json';

// 1. 手动对数据转化
// let data = JSON.parse(xhr.response);
// console.log(data);
// result.innerHTML = data.name;
// 2. 自动转换
console.log(xhr.response);
result.innerHTML = xhr.response.name;

//后端
const data = {
    name: 'atguigu'
};
//对对象进行字符串转换
let str = JSON.stringify(data);

3.IE缓存问题

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

4.请求超时和网络超时处理

//超时设置 2s 设置
xhr.timeout = 2000;
//超时回调
xhr.ontimeout = function(){
    alert("网络异常, 请稍后重试!!");
}
//网络异常回调
xhr.onerror = function(){
    alert("你的网络似乎出了一些问题!");
}

5.取消请求

x.abort();

6.重复请求

//获取元素对象
const btns = document.querySelectorAll('button');
let x = null;
//标识变量
let isSending = false; // 是否正在发送AJAX请求

btns[0].onclick = function(){
    //判断标识变量
    if(isSending) x.abort();// 如果正在发送, 则取消该请求, 创建一个新的请求
    x = new XMLHttpRequest();
    //修改 标识变量的值
    isSending = true;
    x.open("GET",'http://127.0.0.1:8000/delay');
    x.send();
    x.onreadystatechange = function(){
        if(x.readyState === 4){
            //修改标识变量
            isSending = false;
        }
    }
}

// abort
btns[1].onclick = function(){
    x.abort();
}

3.jquery

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

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

       $('button').eq(2).click(function(){
           $.ajax({
               //url
               url: 'http://127.0.0.1:8000/jquery-server',
               //参数
               data: {a:100, b:200},
               //请求类型
               type: 'GET',
               //响应体结果
               dataType: 'json',
               //成功的回调
               success: function(data){
                   console.log(data);
               },
               //超时时间
               timeout: 2000,
               //失败的回调
               error: function(){
                   console.log('出错啦!!');
               },
               //头信息
               headers: {
                   c:300,
                   d:400
               }
           });
       });

4.axios

axios.defaults.baseURL = 'http://127.0.0.1:8000';

       btns[0].onclick = function () {
           //GET 请求
           axios.get('/axios-server', {
               //url 参数
               params: {
                   id: 100,
                   vip: 7
               },
               //请求头信息
               headers: {
                   name: 'atguigu',
                   age: 20
               }
           }).then(value => {
               console.log(value);
           });
       }

       btns[1].onclick = function () {
           axios.post('/axios-server', {
               username: 'admin',
               password: 'admin'
           }, {
               //url 
               params: {
                   id: 200,
                   vip: 9
               },
               //请求头参数
               headers: {
                   height: 180,
                   weight: 180,
               }
           });
       }
   
       btns[2].onclick = function(){
           axios({
               //请求方法
               method : 'POST',
               //url
               url: '/axios-server',
               //url参数
               params: {
                   vip:10,
                   level:30
               },
               //头信息
               headers: {
                   a:100,
                   b:200
               },
               //请求体参数
               data: {
                   username: 'admin',
                   password: 'admin'
               }
           }).then(response=>{
               //响应状态码
               console.log(response.status);
               //响应状态字符串
               console.log(response.statusText);
               //响应头信息
               console.log(response.headers);
               //响应体
               console.log(response.data);
           })
       }

5.fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fetch 发送 AJAX请求</title>
</head>
<body>
    <button>AJAX请求</button>
    <script>
        //文档地址
        //https://developer.mozilla.org/zh-CN/docs/Web/API/WindowOrWorkerGlobalScope/fetch
        
        const btn = document.querySelector('button');

        btn.onclick = function(){
            fetch('http://127.0.0.1:8000/fetch-server?vip=10', {
                //请求方法
                method: 'POST',
                //请求头
                headers: {
                    name:'atguigu'
                },
                //请求体
                body: 'username=admin&password=admin'
            }).then(response => {
                // return response.text();
                return response.json();
            }).then(response=>{
                console.log(response);
            });
        }
    </script>
</body>
</html>

6.同源策略

浏览器的安全机制

协议,域名,端口号必须完全相同

7.jsonp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例</title>
</head>
<body>
    用户名: <input type="text" id="username">
    <p></p>
    <script>
        //获取 input 元素
        const input = document.querySelector('input');
        const p = document.querySelector('p');
        
        //声明 handle 函数
        function handle(data){
            input.style.border = "solid 1px #f00";
            //修改 p 标签的提示文本
            p.innerHTML = data.msg;
        }

        //绑定事件
        input.onblur = function(){
            //获取用户的输入值
            let username = this.value;
            //向服务器端发送请求 检测用户名是否存在
            //1. 创建 script 标签
            const script = document.createElement('script');
            //2. 设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/check-username';
            //3. 将 script 插入到文档中
            document.body.appendChild(script);
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery-jsonp</title>
    <style>
        #result{
            width:300px;
            height:100px;
            border:solid 1px #089;
        }
    </style>
    <script crossorigin="anonymous" src='https://cdn.bootcss.com/jquery/3.5.0/jquery.min.js'></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">

    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery-jsonp-server?callback=?', function(data){
                $('#result').html(`
                    名称: ${data.name}<br>
                    校区: ${data.city}
                `)
            });
        });
    </script>
</body>
</html>

8.CROS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');

        btn.onclick = function(){
            //1. 创建对象
            const x = new XMLHttpRequest();
            //2. 初始化设置
            x.open("GET", "http://127.0.0.1:8000/cors-server");
            //3. 发送
            x.send();
            //4. 绑定事件
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status < 300){
                        //输出响应体
                        console.log(x.response);
                    }
                }
            }
        }
    </script>
</body>
</html>