5-1，3，5：XHR的属性，方法，事件-526互联

XHR的属性

responseType和response属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script>
        //responseType和response属性
        const url = 'https://www.imoo.com/api/http/search/suggest?words=js';
        let xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () =>{
          if (xhr.readyState !=4 )return;
          if ((xhr.status >=200 && xhr.status <300)||xhr.status === 304 ){
              //文本形式的响应内容
              //responseText = ''或'text'的时候才能使用
          // console.log('responseText.',xhr.responseText);
              //可以用来代替responseText
          console.log(JSON.parse('response',xhr.response));
          //console.log(JSON.pars(xhr.responseText));
          }
        };
        xhr.open('GET',url,true);

        // xhr.responseText = '';
        // xhr.responseText = 'text';
        // xhr.responseText = 'json';

        xhr.send(null);

    </script>
    <script>
        //1.responseType和response属性
        const url ='https://www.imooc.com/api/http/search/suggest?words=js';
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                //文本形式的响应内容
            console.log('responseTest',xhr.responseText);
            console.log('response',xhr.responseText);
            //console.log(JSON.parse(xhr.responseText));
        }
        };

        xhr.open('GET', url, true);
        //xhr.responseType='';
        xhr.responseType='json';
        xhr.send(null);
    </script>
    <script>
        //1.responseType和response属性
        const url ='https://www.imooc.com/api/http/search/suggest?words=js';
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                //文本形式的响应内容
                // console.log('responseTest',xhr.responseText);
                console.log('response',xhr.response);
                //console.log(JSON.parse(xhr.responseText));
            }
        };
        xhr.open('GET', url, true);
        //xhr.responseType='';
        xhr.responseType='json';
        xhr.send(null);
    </script>
<!--timeout属性.-->
    <script>
        const url ='https://www.imooc.com/api/http/search/suggest?words=js';
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                console.log(xhr.response);
            }
        };
        xhr.open('GET', url, true);

        xhr.timeout = 10;

        xhr.send(null);
        //IE6~7不支持，IE8开始支持
    </script>
    <!--
    withCredentials属性
    知道使用Ajax发送请求时使用是否携带Cookie
    使用Ajax发送请求，默认情况下，同城时，会携带Cookie；跨域时，不会
    xhr.withCredentials = true;
    最终能是否成功跨域携带Cookie，还要看服务器是否同意
    -->
    <script>
        const url ='https://www.imooc.com/api/http/search/suggest?words=js';
        //const url ='./index.html';
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = () => {
            if (xhr.readyState != 4) return;
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
                console.log(xhr.response);
            }
        };
        xhr.open('GET', url, true);
        xhr.withCredentials = true;
        xhr.send(null);
        //IE6~9不支持，IE10开始支持

    </script>
</body>
</html>

XHR方法

　　abort（）；

　　　　终止当前请求的

//1.abort
//终止当前请求
//一般配合abort事件一起使用
const url ='https://www.imooc.com/api/http/search/suggest?words=js';
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = () => {
    if (xhr.readyState != 4) return;
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
        console.log(xhr.response);
    }
};
xhr.open('GET', url, true);

xhr.send(null);

xhr.abort();

　　setRequestHeader()

　　　　设置请求头信息的

<script>
    //2.setRequestHeader()
    //可以设置请求头信息
    //xhr.setRequestHeader(头部字段的名称，头部字段的值)
    const url ='https://www.imooc.com/api/http/search/suggest?words=js';
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
        }
    };
    xhr.open('GET', url, true);
    //请求头中的Content-Type 字段来告诉服务器，浏览器发送的数据是什么格式的
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

    // xhr.send(null);
    xhr.send(null);
</script>

<script>
    //2.setRequestHeader()
    //可以设置请求头信息
    //xhr.setRequestHeader(头部字段的名称，头部字段的值)
    const url ='https://www.imooc.com/api/http/search/suggest?words=js';
    const xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
        if (xhr.readyState != 4) return;
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {
            console.log(xhr.response);
        }
    };
    xhr.open('POST', url, true);

    //请求头中的Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    //xhr.setRequestHeader('Content-Type','application/json');
    //xhr.send(null);
    xhr.send('username=lyw&age=18');
    /* xhr.send(({
        username:'lyw'
    })
    ); */
</script>

XHR的事件

　　load事件

<script>
    //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事件
</script>

　　error事件

<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>

　　abort事件

<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>

　　timeout事件

<script>
    //4.timeout事件
    //请求超时后触发
    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('timeout',()=>{
        console.log('timeout');
    },false);

    xhr.open('GET', url, true);
    xhr.timeout = 10;
    xhr.send(null);

    xhr.abort();

    //IE10开始支持
</script>

xmlhttprequest xhr 39使用方法

组件属性事件

控件属性事件

指令事件双向属性