Ajax复习

痛定思痛。 2023-10-15 09:13 30阅读 0赞

#### Ajax复习 ####

#### 一、简介 ####

AJAX 全称为 Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

一句话总结：**无刷新通信**。

#### 二、 特点 ####

*  优点

> 无刷新通信
> 
> 允许你根据用户事件来更新部分页面内容

*  缺点

> 1.  没有浏览历史，不能回退
> 2.  存在跨域问题(同源)
> 3.  SEO 不友好

#### 三、**核心对象** ####

**XMLHttpRequest**，AJAX 的所有操作都是通过该对象进行的。

#### 四、**jQuery** **中的** **AJAX** ####

*  get 请求

$.get(url, [data], [callback], [type])
    
    url:请求的 URL 地址。
    
    data:请求携带的参数。
    
    callback:载入成功时回调函数。
    
    type:设置返回内容格式，xml, html, script, json, text, _default。

*  post请求

$.post(url, [data], [callback], [type])
    
    url:请求的 URL 地址。 
    
    data:请求携带的参数。
    
    callback:载入成功时回调函数。
    
    type:设置返回内容格式，xml, html, script, json, text, _default。

#### 五、跨域 ####

*  **同源策略**

> 同源策略(Same-Origin Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。同源： **协议、域名、端口号 必须完全相同**。
> 
> 违背同源策略就是跨域

#### 六、**解决跨域** ####

*  JSONP，通过动态创建标签、从而实现跨域。
 *  **CORS**，服务端解决跨域。

#### 七、其他学习点 ####

##### 7.1、防止重复提交方案 #####

<!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>
        <button>点击发送</button>
        <script>
            //获取元素对象
            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();
            }
        </script>
    </body>
    </html>

##### 7.1、缓存解决方案 #####

> 加上时间戳，作为参数。

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>IE缓存问题</title>
        <style>
            #result{
          
                width:200px;
                height:100px;
                border:solid 1px #258;
            }
        </style>
    </head>
    <body>
        <button>点击发送请求</button>
        <div id="result"></div>
        <script>
            const btn = document.getElementsByTagName('button')[0];
            const result = document.querySelector('#result');
    
            btn.addEventListener('click', function(){
          
                const xhr = new XMLHttpRequest();
                xhr.open("GET",'http://127.0.0.1:8000/ie?t='+Date.now());
                xhr.send();
                xhr.onreadystatechange = function(){
          
                    if(xhr.readyState === 4){
          
                        if(xhr.status >= 200 && xhr.status< 300){
          
                            result.innerHTML = xhr.response;
                        }
                    }
                }
            })
        </script>
    </body>
    </html>