首页 > 其他分享 >XHR的属性&XHR的方法&XHR的事件

XHR的属性&XHR的方法&XHR的事件

时间：2023-03-29 17:04:41浏览次数：21  
标签：status const xhr url XHR 事件 console response 属性

XHR的属性

responseType和response属性

　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>responseType和response属性</title>
    </head>
    <body>
        <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(JSON.parse(xhr.responseText));
                  }
                };
                xhr.open('GET', url, true);
                xhr.send(null);
        </script>
    </body>
</html>
复制代码

 

　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>responseType和response属性</title>
    </head>
    <body>
        <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>
    </body>
</html>
复制代码

 

 

 

 

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>responseType和response属性</title>
    </head>
    <body>
        <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>
    </body>
</html>
复制代码

 

 

 


timeout属性.

　　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>responseType和response属性</title>
    </head>
    <body>
        <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>
    </body>
</html>
复制代码

 

 

 

 


withCredentials属性

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>responseType和response属性</title>
    </head>
    <body>
        <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()

　　终止当前请求

　　一般配合abort事件一起使用

　　　　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>XHR 的方法</title>
    </head>
    <body>
        <script>
            //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();
        </script>
    </body>
</html>
复制代码

 

 

 

 


setRequestHeader()

　　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>XHR 的方法</title>
    </head>
    <body>
        <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);
                        
                        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                                                
                        xhr.send(null);
                                            
        </script>
    </body>
</html>
复制代码

 

　　

 

 

复制代码 
    //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'
                        })
                        ); */
复制代码

　　

 

 　　

复制代码 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>XHR 的方法</title>
    </head>
    <body>
        <script>                                
            //2.setRequestHeader()    
            //可以设置请求头信息
            //xhr.setRequestHeader(头部字段的名称，头部字段的值)    
                //const url ='https://www.imooc.com/api/http/search/suggest?words=js';
                const url ='https://www.imooc.com/api/http/json/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(JSON.stringify({
                            username:'lyw'
                        })
                        );
                                            
        </script>
    </body>
</html>
复制代码

 

　　

 

 

 

XHR的事件

load事件

　　

　　error事件

　　　　

　　abort事件

 　　　

　　timeout事件

　　　　

 

标签：status,const,xhr,url,XHR,事件,console,response,属性
From： https://www.cnblogs.com/yu3304/p/17269518.html

相关文章

  • 5-1，3，5：XHR的属性，方法，事件
    XHR的属性responseType和response属性<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head><body><scri......
  • echarts中的tooltip属性
     echarts鼠标放上去显示提示框属性详解tooltip tooltip={//提示悬浮框框组件trigger:'item',......
  • 第十篇 vue - 基础 -事件处理
    监听事件我们可以使用v-on指令(简写为@)来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click="methodName"或@click="handler"事件处理器的值可......
  • DOM之方法 事件监听 addEventListener
    ?就是HTML标签受到鼠标点击后、经过后、点击输入文字后等操作之后能触发函数功能的操作use语法：DOM对象.addEventListener('事件类型'，function(){})三步：DOM对象......
  • 第六篇 vue - 基础 - 计算属性
    基础示例模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象exportdefault......
  • frida class里面有哪些属性
    varhook_cls=Java.use(class_name)if(class_name.includes("DynamicCheck")){console.log("==================")......
  • Spring 事件
    事件Spring的默认事件是用来监听容器的，有如下事件：ContextStartedEvent、ContextStoppedEvent、ContextClosedEvent、ContextRefreshedEvent，分别表示容器启动、停止、关闭......
  • Android开发 触控事件分发_2_应用层的触控事件分发
    前言在上一篇博客讲解了系统层的触控通道注册，此篇博客将讲解应用层的触控事件分发分发概况流程通过下面的简单流程图大概了解，但是实际使用的时候分发并不是一个下面......
  • JSON 数组对象获取 其中某个属性的值
    importcn.hutool.json.JSONArray;importcn.hutool.json.JSONObject;importcn.hutool.json.JSONUtil;publicstaticvoidmain(String[]args){Strings......
  • 利用iframe和form的target属性做一个简单的异步提交form表单
    这是form部分<style>h5{text-align:center}form{display:block;padding:20px50px5px50px;background:#fff;margin:0auto;text-align:center;}......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99