首页
学习
活动
专区
圈层
工具
发布

异步编程Ajax的详解,并对其进行封装整理

~ 499 客户端错误 500 ~ 599 服务端错误 (2)xhr的基本使用 在使用xhr之前,我们要创建一个xhr的实例对象 let xhr = new XMLHttpRequest() 然后再调用...4,即是否已经接收所有的响应,然后还可以再继续判断一下 status 属性,看看状态码是否为 200,当上述都成立了,我们再去 responseText 属性 或 responseXML 属性中获取响应数据...{data}`) }) .catch(err => { console.log(`请求失败,状态为${err}`) }) 其调用的是一个综合的方法,传入的参数是一个对象,对象中传入多个参数。...CORS(跨域资源共享)要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通,我们只需要设置一个名为 Origin 的头部,值为当前页面的源信息(协议、域名、端口),例如 Origin : http...://example.com ;然后服务器需要设置一个名为 Access-Control-Allow-Origin 的响应头部,其值为允许跨域访问的源信息,若服务器设置的 Access-Control-Allow-Origin

2K20
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    高级前端:详解手写原生Ajax的实现

    ~ 499 客户端错误 500 ~ 599 服务端错误 (2)xhr的基本使用 在使用xhr之前,我们要创建一个xhr的实例对象 let xhr = new XMLHttpRequest() 然后再调用...4,即是否已经接收所有的响应,然后还可以再继续判断一下 status 属性,看看状态码是否为 200,当上述都成立了,我们再去 responseText 属性 或 responseXML 属性中获取响应数据...{data}`) }) .catch(err => { console.log(`请求失败,状态为${err}`) }) 其调用的是一个综合的方法,传入的参数是一个对象,对象中传入多个参数。...CORS(跨域资源共享)要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通,我们只需要设置一个名为 Origin 的头部,值为当前页面的源信息(协议、域名、端口),例如Origin : http...://example.com ;然后服务器需要设置一个名为 Access-Control-Allow-Origin 的响应头部,其值为允许跨域访问的源信息,若服务器设置的 Access-Control-Allow-Origin

    2K20

    Ajax全接触-imooc

    Ajax介绍  同步——客户端发起请求,服务端需要处理,响应,此时客户端完全等待,当服务器处理完毕,客户端重新载入页面,如果出现错误,再次发生请求,处理,等待......异步——填写表单时,页面当时就把数据发送到服务器(发送请求),服务器处理响应,把结果发给页面,过程中不不要重新加载页面,填写的错误会实时显示,不会有任何的等待 XMLHttpRequest对象——可以用于后台和服务器交换数据...一个响应包含三部分: 1 数字和文字组成的状态码,显示请求成功还是失败; 2 响应头,包含许多有用的信息,如服务器类型、日期时间、内容类型和长度; 3 响应体,相应正文; HTTP状态码 1XX:信息类...,例如:404 NOT FOUND 5XX:服务器错误,表示服务器不能完成对请求的处理:如 500 XMLHttpRequest发送请求 open(method,url,async) (发送请求方法时GET....js结尾,而是内部是否为合法的JS内容; 2.用script标签加载资源是没有跨域问题的,比如加载jQuery; 3.在资源加载进来之前定义好一个函数,这个函数接收一个参数(数据),函数里面利用这个参数做一些事情

    6.2K20

    全面分析前端的网络请求方式

    status 表示 http请求的状态, 初始值为 0。如果服务器没有显式地指定状态码, 那么 status将被设置为默认值, 即 200。...total,已经加载的资源大小 loaded,用这两个值可以计算加载进度。...异常处理 onerror xhr.onerror = callback; 当 ajax资源加载失败时会触发 callback。...可以发现,调用 reject有三种可能: 1.请求超时 2.请求失败 注意:当和服务器建立简介,并收到服务器的异常状态码如 404、500等并不能触发 onerror。...浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

    2.2K40

    XMLHttpRequest用法介绍

    如果登录失败往往是跳转到原网页重新登陆,如果是这种情况话就会造成资源的浪费,因为返回的HTMl网页中大多数元素都是重复的。...,对应的XMLHttpRequest对象会复位到未初始化的状态 responseText 服务器响应的文本内容 ResponseXML 服务器响应的XML内容对应的DOM对象 Status 服务器返回的...500表示“服务器内容部错误” statusText 服务器返回状态码的文本信息 readyState 表示XMLHttpRequest对象的状态 0=未初始化。...四、处理服务器返回的信息       在第二部中我们为XMLHttpRequest指定了响应处理函数,响应处理函数检查XMLHttpRequest对象的readyState属性值的变化,如果readyState...值为4时,代表服务器已经传回所有信息,可以开始处理信息并更新页面内容了。

    2.2K50

    前端-Ajax的全面总结

    二.Ajax的原生写法 1.XMLHttpRequest对象 XMLHttpRequest 对象用于在后台与服务器交换数据,能够在不重新加载页面的情况下更新网页,在页面已加载后从服务器请求数据,在页面已加载后从服务器接收数据...2.实现流程 创建 XMLHttpRequest对象——>打开请求地址,初始化数据——>发送请求数据——>监听回调函数状态——>收到服务器返回的应答结果。...(3).关于status 由服务器返回的 HTTP 状态代码,200 表示成功,而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。...(后面会有http状态码的详细解读) 三.JQuery中的Ajax JQuery对原生Ajax做了很好的封装,使用起来非常简单方便,具体的很多方法如 $.ajax,$.post, $.get, $.getJSON...使用GET请求重定向 **404:客户端请求失败** 408:请求超时 **500:内部服务器错误,无法完成请求** 505:服务器不支持请求的HTTP协议的版本,无法完成处理 十.不可忽视的HTTP头文件

    2.6K30

    初学者必看Ajax的总结

    (默认为 true,一般不建议为 false) false:同步模式发出的请求会暂停所有 javascript 代码的执行,知道服务器获得响应为止,如果浏览器在连接网络时或者在下载文件时出了故障,页面就会一直挂起...2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。 3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。 4:响应已完成;您可以获取并使用服务器的响应了。...格式,这里做一个例子说明,如何利用 1、首先需要从 XMLHttpRequest 对象取回数据这是一个 JSON 串,把它转换为真正的 JavaScript 对象。...由于同源策略的限制,XmlHttpRequest 只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过 script 标签实现跨域请求,然后在服务端输出 JSON 数据并执行回调函数,...DOM 中 结构为:load(url,[data],[callback]) 使用 url 参数指定选择符可以加载页面内的某些元素 load 方法中 url 语法:url selector 注意:url

    3.2K40

    java中的jQuery与Ajax的应用,菜鸟教程

    减轻服务器和宽带的负担 开发和调试工具的缺乏 2.Ajax的XMLHttpRequest对象 Ajax的核心是XMLHttpRequest对象,它是Ajax实现的关键——发送异步请求、接收响应及执行回调都是通过它来完成的...(3)发送 Ajax 请求 (4)处理服务器响应 3.XMLHttpRequest属性: (1)ReadyState 0 “未初始化”, (XMLHttpRequest)对象已经创建...1 “发送”状态,已经准备好把一个请求发送到服务器。 2 “发送完成”状态,已经把一个请求发送到服务器端,但还没有响应。...3 “正在接收”状态,已经接收,还没有完全接收结束。 4 “已加载”状态,响应已经被完全接收。...500——服务器产生内部错误 4.方法 labort()暂停请求,并重置到未初始化状态 lopen() 加载要链接的页面 lsend() 把该请求发送到服务器 说明:1)

    1.8K30

    前后端交互的弯弯绕绕

    ;Axios 错误处理:接口请求,过程中难免会遇到异常错误: axios 语法中要如何处理呢?...因为,普通用户不会去控制台里看错误信息,我们要编写代码拿到错误并展示给用户在页面上,使用 axios 的 catch 方法,捕获这次请求响应的错误并做后续处理,具体的错误处理过程如下:如果请求成功发出且服务器也响应了状态码...URL 和是否异步发送请求: 使用 send 请求,send({});参数是通过请求体携带的数据,而GET请求是通过请求头携带数据的,所以要把send的参数置为null处理服务器响应: 通过监听 XMLHttpRequest...: 当然比较麻烦,所以还有一种方式:为 XMLHttpRequest 对象添加一个事件监听器用来监听 loadend 事件,loadend 事件在请求结束时触发,无论请求是成功还是失败;常用请求方法:URL...):如果异步操作失败,或者在执行过程中抛出了一个错误,Promise对象就会变为拒绝状态 在这个状态下,我们可以通过then()方法或catch()方法设置的回调函数来处理这个错误; 但是如果程序上的错误

    68120

    jQuery ajax - ajax() 方法jQuery ajax - ajax() 方法

    jQuery ajax - ajax() 方法 http://www.w3school.com.cn/jquery/ajax_ajax.asp jQuery Ajax 参考手册 实例 通过 AJAX 加载一段文本...请求失败时调用此函数。 有以下三个参数:XMLHttpRequest 对象、错误信息、(可选)捕获的异常对象。...参数:由服务器返回,并根据 dataType 参数进行处理后的数据;描述状态的字符串。 这是一个 Ajax 事件。...complete 当请求完成之后调用这个函数,无论成功或失败。传入 XMLHttpRequest 对象,以及一个包含成功或错误代码的字符串。...发送数据到服务器 默认情况下,Ajax 请求使用 GET 方法。如果要使用 POST 方法,可以设定 type 参数值。这个选项也会影响 data 选项中的内容如何发送到服务器。

    15.9K30

    JavaWeb全栈开发前后端交互通用标准

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 XMLHttpRequest 是 AJAX 的基础。...通过 AJAX,JavaScript 无需等待服务器的响应,而是: 在等待服务器响应时执行其他脚本 当响应就绪后对响应进行处理 Web的运作原理:一次HTTP请求对应一个页面。...,而如果失败,则显示错误消息: jQuery 代码: $("button").click(function(){ $("#div1").load("demo_test.txt",function...两种在客户端和服务器端进行请求-响应的常用方法是:GET 和 POST。 GET:从指定的资源请求数据 POST:向指定的资源提交要处理的数据 GET 基本上用于从服务器获得(取回)数据。...: POST'); // 响应头设置 header('Access-Control-Allow-Headers: x-requested-with, content-type'); //设置内容类型为

    8.2K20

    Ajax详解

    传统方法会刷新整个页面: 点击提交按钮后,正在input框输入内容时,服务器响应返回。会以重新加载整个页面的形式展示结果,同步加载,所以input框内输入的内容全部清空。 ?...客户端处理方式不同: 传统:需等待服务器响应完成并重新加载整个页面后,用户才能进行操作。 Ajax:动态更新页面中的局部内容,不影响用户在页面的其他操作。...常用属性: readyState:XMLHttpRequest的状态信息。 状态码表示的意义: 0:XMLHttpRequest对象未完成初始化。 1:XMLHttpRequest对象开始发送请求。...jQuery对Ajax进行了封装,可以解决上述问题。 语法: $.ajax([settings]); 常用属性参数: url:要请求的服务器资源。 type:请求方式,默认是GET。...error:请求失败调用的函数。 complete:请求完成调用的函数(无论成功或失败都会调用)。 使用jQuery发送Ajax请求,代码大大简化。

    1.2K40

    【JS】1942- 你知道 XHR 和 Fetch 的区别吗?

    支持跨域请求:通过服务器端设置允许跨域请求,从不同域的服务器获取数据。 事件驱动:提供了 onload、onerror、onprogress 等一系列事件来监听请求的状态变化。...设置回调函数:设置事件处理程序来处理请求完成、成功、失败等不同的状态。 发起请求:使用send()方法发送请求。...("请求失败,状态码:" + xhr.status); } }; // 发起请求 xhr.send(); XHR 的响应处理通常在onreadystatechange事件处理程序中完成。...在上面的例子中,我们等待 XHR 对象的状态变为 4(表示请求完成)并且 HTTP 状态码为 200(表示成功响应)时,解析响应数据。...错误处理:您可以使用.catch()方法来捕获任何请求或响应的错误。 使用async/await:如果需要,您还可以使用async/await来更清晰地处理异步操作。

    83310

    你知道 XHR 和 Fetch 的区别吗?

    支持跨域请求:通过服务器端设置允许跨域请求,从不同域的服务器获取数据。 事件驱动:提供了 onload、onerror、onprogress 等一系列事件来监听请求的状态变化。...设置回调函数:设置事件处理程序来处理请求完成、成功、失败等不同的状态。 发起请求:使用send()方法发送请求。...("请求失败,状态码:" + xhr.status); } }; // 发起请求 xhr.send(); XHR 的响应处理通常在onreadystatechange事件处理程序中完成。...在上面的例子中,我们等待 XHR 对象的状态变为 4(表示请求完成)并且 HTTP 状态码为 200(表示成功响应)时,解析响应数据。...错误处理:您可以使用.catch()方法来捕获任何请求或响应的错误。 使用async/await:如果需要,您还可以使用async/await来更清晰地处理异步操作。

    1.9K10

    无内鬼 整点AJAX

    ​ 目录 一、AJAX技术简介 特点 二、AJAX书写步骤 三、响应处理和响应流程 四、使用ajax发送get请求 五、使用ajax发送post请求 六、方法抽取(了解) 七、jQuery 中 ajax...,即对服务响应回浏览器的数据根据状态码和 AJAX 对象的状态信息进行不同的处理,在绑定状态改变的处理函数中写对应的逻辑代码即可。...status 表示响应的 HTTP 状态码,常见状态码如下: 200:成功 302:重定向 404:找不到资源 500:服务端错误 responseText 获得字符串形式的响应数据...cache:默认为 true(dataType 为 script 和 jsonp 时默认为 false,设置为 false 将禁用缓存。...有以下三个参数:XMLHttpRequest 对象、错误信息、捕获的异常对象。

    5.5K50
    领券