XHR 的事件与FormData-526互联

XHR 的事件

　　load事件

    //1.load事件
            //响应数据可用时触发        
           const url ='https://www.imooc.com/api/http/search/suggest?words=js';
                const xhr = new XMLHttpRequest();
               // xhr.onload = () => {
               //         /* if (xhr.readyState != 4) return; */
               //          if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
               //          console.log(xhr.response);
               //          }
               //      };
                 
                 xhr.addEventListener('load', () => {
                     if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                     console.log(xhr.response);
                     }
                 },false);
                 
                    xhr.open('GET', url, true);
                   
                    xhr.send(null);    
                                                 
                //IE6~8不支持load事件

　　erro事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            //2.error事件
            //请求发生错误的时触发    
            //const url ='https://www.imooc.com/api/http/search/suggest?words=js';
            const url = 'https://www.iimooc.com/api/http/search/suggest?words=js';
            
            
            const xhr = new XMLHttpRequest();
            xhr.addEventListener('load', () => {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                    console.log(xhr.response);
                }
            }, false);
            
            xhr.addEventListener('error',()=>{
                console.log('error');
            },false)
            
            xhr.open('GET', url, true);
            
            xhr.send(null);
            //IE10开始支持
        </script>
    </body>
</html>

　　abort事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            //3.abort事件
            //调用abort（）终止请求时触发
            const url ='https://www.imooc.com/api/http/search/suggest?words=js';
            const xhr = new XMLHttpRequest();
            xhr.addEventListener('load', () => {
                if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                    console.log(xhr.response);
                }
            }, false);
            
            xhr.addEventListener('abort',()=>{
                console.log('abort');
            },false);
            
            xhr.open('GET', url, true);
            
            xhr.send(null);    
            
            xhr.abort();    
            
            //IE10开始支持    
        </script>
    </body>
</html>

　　timeout事件

FormData

　　使用Ajax提交表单

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>FormData</title>
    </head>
    <body>
        <form id="login" action="https://www.imooc.com/api/http/search/suggest?words=js" method="post"
            enctype="application/x-www-form-urlencoded">
            <input type="text" name="username" placeholder="用户名" />
            <input type="password" name="password" placeholder="密码" />
            <input id="submit" type="submit" value="提交" />
        </form>
        <script>
            //1.使用Ajax提交表单
            
            //2.FormDate的基本用法
            //通过HTML表单元素创建FormDate对象
            //const fd = new FormData(表单元素);
            //data.append('age',18);
            //data.append('sex','male');
            //xhr.send（fd）；
            
            //通过append（）方法添加数据    
            
            const login = document.getElementById('login');
            //console.log(login.username);
            //console.log(login.password);
            const {
                username,
                password
            } = login;
            const btn = document.getElementById('submit');

            const url = 'https://www.imooc.com/api/http/search/suggest?words=js'

            btn.addEventListener(
                'click',
                e => {
                    //阻止表单自动提交
                    e.preventDefault();
                    //表单数据验证

                    //发生Ajax请求
                    const url = 'https://www.imooc.com/api/http/search/suggest?words=js';
                    const xhr = new XMLHttpRequest();
                    xhr.addEventListener('load', () => {
                            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                                console.log(xhr.response);
                            }
                        },
                        false
                    );
                    xhr.open('POST', url, true);

                    //组装数据
                    //const data = 'username=${username.value}&password=${passwrod.value}';
                    
                    const data = new FormData(login);
                    data.append('age',18);
                    data.append('sex','male');
                    //console.log(data);
                    /* for(const item of data){
                        console.log(item);
                    } */
                    // xhr.setRequestHeader(
                    //     'Content-Type',
                    //     'application/x-www-form-urlencoded'
                    // );

                    xhr.send(data);

                    //xhr.send('username=lyw&passwrod=12345')
                },
                false
            );
        </script>
    </body>
</html>

　　 FormData的基本用法