ajaxphp获取js变量在 JS 中若何应用 Ajax 来进行要求

在本教程中，我们将学习如何利用 JS 进行AJAX调用。

1.AJAX

术语AJAX 表示异步的 JavaScript 和 XML。

AJAX 在 JS 中用于发出异步网络要求来获取资源。
当然，不像名称所暗示的那样，资源并不局限于XML，还用于获取JSON、HTML或纯文本等资源。

ajaxphp获取js变量在 JS 中若何应用 Ajax 来进行要求 Node.js

有多种方法可以发出网络要求并从做事器获取数据。
我们将逐一先容。

2.XMLHttpRequest

XMLHttpRequest工具（简称XHR）在较早的时候用于从做事器异步检索数据。

之以是利用XML，是由于它首先用于检索XML数据。
现在，它也可以用来检索JSON, HTML或纯文本。

事例 2.1: GET

functionsuccess(){vardata=JSON.parse(this.responseText)console.log(data)}functionerror(err){console.log('ErrorOccurred:',err)}varxhr=newXMLHttpRequest()xhr.onload=successxhr.onerror=errorxhr.open("GET",""https://jsonplaceholder.typicode.com/posts/1")xhr.send()

我们看到，要发出一个大略的GET要求，须要两个侦听器来处理要求的成功和失落败。
我们还须要调用open()和send()方法。
来自做事器的相应存储在responseText变量中，该变量利用JSON.parse()转换为JavaScript 工具。

functionsuccess(){vardata=JSON.parse(this.responseText);console.log(data);}functionerror(err){console.log('ErrorOccurred:',err);}varxhr=newXMLHttpRequest();xhr.onload=success;xhr.onerror=error;xhr.open("POST","https://jsonplaceholder.typicode.com/posts");xhr.setRequestHeader("Content-Type","application/json;charset=UTF-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 API

Fetch 是一个用于进行AJAX调用的原生 JavaScript API，它得到了大多数浏览器的支持，现在得到了广泛的运用。

3.1 API用法

fetch(url,options).then(response=>{//handleresponsedata}).catch(err=>{//handleerrors});

API参数

fetch() API有两个参数

url是必填参数，它是您要获取的资源的路径。
options是一个可选参数。
不须要供应这个参数来发出大略的GET要求。
method: GET | POST | PUT | DELETE | PATCHheaders: 要求头，如 { “Content-type”: “application/json; charset=UTF-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 示例：GET

constgetTodoItem=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:"delectusautautem",completed:false}

在上面的代码中须要把稳两件事:

fetch API返回一个promise工具，我们可以将其分配给变量并稍后实行。
我们还必须调用response.json()将相应工具转换为JSON

缺点处理

我们来看看当HTTP GET要求抛出500缺点时会发生什么：

fetch('http://httpstat.us/500')//thisAPIthrow500error.then(response=>()=>{console.log("Insidefirstthenblock");returnresponse.json();}).then(json=>console.log("Insidesecondthenblock",json)).catch(err=>console.error("Insidecatchblock:",err));

Insidefirstthenblock➤ⓧInsidecatchblock:SyntaxError:UnexpectedtokenIinJSONatposition4

我们看到，纵然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("Insidecatchblock:",err));functionhandleErrors(response){if(!response.ok){//throwerrorbasedoncustomconditionsonresponsethrowError(response.statusText);}returnresponse;}

➤Insidecatchblock:Error:InternalServerErrorathandleErrors(Scriptsnippet%239:9)3.3 示例：POST

fetch('https://jsonplaceholder.typicode.com/todos',{method:'POST',body:JSON.stringify({completed:true,title:'newtodoitem',userId:1}),headers:{"Content-type":"application/json;charset=UTF-8"}}).then(response=>response.json()).then(json=>console.log(json)).catch(err=>console.log(err))

Response➤{completed:true,title:"newtodoitem",userId:1,id:201}

在上面的代码中须要把稳两件事:-

POST要求类似于GET要求。
我们还须要在fetch() API的第二个参数中发送method，body 和headers 属性。
我们必须须要利用 JSON.stringify() 将工具转成字符串要求body参数4.Axios API

Axios API非常类似于fetch API，只是做了一些改进。
我个人更喜好利用Axios API而不是fetch() API，缘故原由如下：

为GET 要求供应 axios.get()，为 POST 要求供应 axios.post()等供应不同的方法，这样使我们的代码更简洁。
将相应代码（例如404、500）视为可以在catch()块中处理的缺点，因此我们无需显式处理这些缺点。
它供应了与IE11等旧浏览器的向后兼容性它将相应作为JSON工具返回，因此我们无需进行任何解析4.1 示例：GET

//在chrome掌握台中引入脚本的方法varscript=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:"delectusautautem",completed:false}

我们可以看到，我们直策应用response得到相应数据。
数据没有任何解析工具，不像fetch() API。

缺点处理

axios.get('http://httpstat.us/500').then(response=>console.log(response.data)).catch(err=>console.error("Insidecatchblock:",err));

Insidecatchblock:Error:NetworkError

我们看到，500缺点也被catch()块捕获，不像fetch() API，我们必须显式处理它们。

4.2 示例：POST

axios.post('https://jsonplaceholder.typicode.com/todos',{completed:true,title:'newtodoitem',userId:1}).then(response=>console.log(response.data)).catch(err=>console.log(err))

{completed:true,title:"newtodoitem",userId:1,id:201}

我们看到POST方法非常简短，可以直接通报要求主体参数，这与fetch（）API不同。

作者：Danny Markov 译者：前端小智来源：tutorialzine

原文：https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know