怎么制作营销网站,谁可以做网站优化排名推广,友情链接交换形式,万泉河网站建设在 JS 中怎么使用 Ajax 来进行请求发布时间#xff1a;2021-07-22 09:48:43来源#xff1a;亿速云阅读#xff1a;78作者#xff1a;chen本篇内容介绍了“在 JS 中怎么使用 Ajax 来进行请求”的有关知识#xff0c;在实际案例的操作过程中#xff0c;不少人都会遇到这样的…在 JS 中怎么使用 Ajax 来进行请求发布时间2021-07-22 09:48:43来源亿速云阅读78作者chen本篇内容介绍了“在 JS 中怎么使用 Ajax 来进行请求”的有关知识在实际案例的操作过程中不少人都会遇到这样的困境接下来就让小编带领大家学习一下如何处理这些情况吧希望大家仔细阅读能够学有所成1.AJAX术语AJAX 表示 异步的 JavaScript 和 XML。AJAX 在 JS 中用于发出异步网络请求来获取资源。当然不像名称所暗示的那样资源并不局限于XML还用于获取JSON、HTML或纯文本等资源。有多种方法可以发出网络请求并从服务器获取数据。我们将一一介绍。2.XMLHttpRequestXMLHttpRequest对象(简称XHR)在较早的时候用于从服务器异步检索数据。之所以使用XML是因为它首先用于检索XML数据。现在它也可以用来检索JSON, HTML或纯文本。事例 2.1: GETfunction success() { var data JSON.parse(this.responseText) console.log(data) } function error (err) { console.log(Error Occurred:, err) } var xhr new XMLHttpRequest() xhr.onload success xhr.onerror error xhr.open(GET, https://jsonplaceholder.typicode.com/posts/1) xhr.send()我们看到要发出一个简单的GET请求需要两个侦听器来处理请求的成功和失败。我们还需要调用open()和send()方法。来自服务器的响应存储在responseText变量中该变量使用JSON.parse()转换为JavaScript 对象。function success() { var data JSON.parse(this.responseText); console.log(data); } function error(err) { console.log(Error Occurred :, err); } var xhr new XMLHttpRequest(); xhr.onload success; xhr.onerror error; xhr.open(POST, https://jsonplaceholder.typicode.com/posts); xhr.setRequestHeader(Content-Type, application/json; charsetUTF-8); xhr.send(JSON.stringify({ title: foo, body: bar, userId: 1 }) );我们看到POST请求类似于GET请求。我们需要另外使用setRequestHeader设置请求标头“Content-Type” 并使用send方法中的JSON.stringify将JSON正文作为字符串发送。2.3 XMLHttpRequest vs Fetch早期的开发人员已经使用了好多年的 XMLHttpRequest来请求数据了。现代的fetch API允许我们发出类似于XMLHttpRequest(XHR)的网络请求。主要区别在于fetch()API使用Promises它使 API更简单更简洁避免了回调地狱。3. Fetch APIFetch 是一个用于进行AJAX调用的原生 JavaScript API它得到了大多数浏览器的支持现在得到了广泛的应用。3.1 API用法fetch(url, options) .then(response { // handle response data }) .catch(err { // handle errors });API参数fetch() API有两个参数1.url是必填参数它是您要获取的资源的路径。2.options是一个可选参数。不需要提供这个参数来发出简单的GET请求。method: GET | POST | PUT | DELETE | PATCHheaders: 请求头如 { “Content-type”: “application/json; charsetUTF-8” }mode: cors | no-cors | same-origin | navigatecache: default | reload | no-cachebody: 一般用于POST请求API返回Promise对象fetch() API返回一个promise对象。如果存在网络错误则将拒绝这会在.catch()块中处理。如果来自服务器的响应带有任何状态码(如200、404、500)则promise将被解析。响应对象可以在.then()块中处理。错误处理请注意对于成功的响应我们期望状态代码为200(正常状态)但是即使响应带有错误状态代码(例如404(未找到资源)和500(内部服务器错误))fetch() API 的状态也是 resolved我们需要在.then() 块中显式地处理那些。我们可以在response 对象中看到HTTP状态HTTP状态码例如200。ok –布尔值如果HTTP状态代码为200-299则为true。3.3 示例GETconst getTodoItem fetch(https://jsonplaceholder.typicode.com/todos/1) .then(response response.json()) .catch(err console.error(err)); getTodoItem.then(response console.log(response)); Response { userId: 1, id: 1, title: delectus aut autem, completed: false }在上面的代码中需要注意两件事:fetch API返回一个promise对象我们可以将其分配给变量并稍后执行。我们还必须调用response.json()将响应对象转换为JSON错误处理我们来看看当HTTP GET请求抛出500错误时会发生什么fetch(http://httpstat.us/500) // this API throw 500 error .then(response () { console.log(Inside first then block); return response.json(); }) .then(json console.log(Inside second then block, json)) .catch(err console.error(Inside catch block:, err)); Inside first then block ➤ ⓧ Inside catch block: SyntaxError: Unexpected token I in JSON at position 4我们看到即使API抛出500错误它仍然会首先进入then()块在该块中它无法解析错误JSON并抛出catch()块捕获的错误。这意味着如果我们使用fetch()API则需要像这样显式地处理此类错误-fetch(http://httpstat.us/500) .then(handleErrors) .then(response response.json()) .then(response console.log(response)) .catch(err console.error(Inside catch block:, err)); function handleErrors(response) { if (!response.ok) { // throw error based on custom conditions on response throw Error(response.statusText); } return response; } ➤ Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)3.3 示例POSTfetch(https://jsonplaceholder.typicode.com/todos, { method: POST, body: JSON.stringify({ completed: true, title: new todo item, userId: 1 }), headers: { Content-type: application/json; charsetUTF-8 } }) .then(response response.json()) .then(json console.log(json)) .catch(err console.log(err)) Response ➤ {completed: true, title: new todo item, userId: 1, id: 201}在上面的代码中需要注意两件事:-POST请求类似于GET请求。我们还需要在fetch() API的第二个参数中发送methodbody 和headers 属性。我们必须需要使用 JSON.stringify() 将对象转成字符串请求body 参数4.Axios APIAxios API非常类似于fetch API只是做了一些改进。我个人更喜欢使用Axios API而不是fetch() API原因如下为GET 请求提供 axios.get()为 POST 请求提供 axios.post()等提供不同的方法这样使我们的代码更简洁。将响应代码(例如404、500)视为可以在catch()块中处理的错误因此我们无需显式处理这些错误。它提供了与IE11等旧浏览器的向后兼容性它将响应作为JSON对象返回因此我们无需进行任何解析4.1 示例GET// 在chrome控制台中引入脚本的方法 var script document.createElement(script); script.type text/javascript; script.src https://unpkg.com/axios/dist/axios.min.js; document.head.appendChild(script); axios.get(https://jsonplaceholder.typicode.com/todos/1) .then(response console.log(response.data)) .catch(err console.error(err)); Response { userId: 1, id: 1, title: delectus aut autem, completed: false }我们可以看到我们直接使用response获得响应数据。数据没有任何解析对象不像fetch() API。错误处理axios.get(http://httpstat.us/500) .then(response console.log(response.data)) .catch(err console.error(Inside catch block:, err)); Inside catch block: Error: Network Error我们看到500错误也被catch()块捕获不像fetch() API我们必须显式处理它们。4.2 示例POSTaxios.post(https://jsonplaceholder.typicode.com/todos, { completed: true, title: new todo item, userId: 1 }) .then(response console.log(response.data)) .catch(err console.log(err)) {completed: true, title: new todo item, userId: 1, id: 201}我们看到POST方法非常简短可以直接传递请求主体参数这与fetch()API不同。“在 JS 中怎么使用 Ajax 来进行请求”的内容就介绍到这里了感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站小编将为大家输出更多高质量的实用文章
