在 JS 中如何使用 Ajax 来进行请求

人已经过原 Danny Markov 授权翻译

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

1.AJAX

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

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

有多种方法可以发出网络请求并从服务器获取数据。我们将一一介绍。

2.XMLHttpRequest

XMLHttpRequest对象（简称XHR）在较早的时候用于从服务器异步检索数据。

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

事例 2.1: GET

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("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; 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 => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

API参数

fetch() API有两个参数

url是必填参数，它是您要获取的资源的路径。
options是一个可选参数。不需要提供这个参数来发出简单的GET请求。

method: GET | POST | PUT | DELETE | PATCH
headers: 请求头，如 { “Content-type”: “application/json; charset=UTF-8” }
mode: cors | no-cors | same-origin | navigate
cache: default | reload | no-cache
body: 一般用于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

const 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 示例：POST

fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify({
      completed: true,
      title: 'new todo item',
      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: "new todo item", 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控制台中引入脚本的方法

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 示例：POST

axios.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不同。

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

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

者 | 猪哥

责编 | maozz

JSON的诞生原因是因为XML整合到HTML中各个浏览器实现的细节不尽相同，所以道格拉斯·克罗克福特（Douglas Crockford）和奇普·莫宁斯达（Chip Morningstar）一起从JS的数据类型中提取了一个子集，作为新的数据交换格式，因为主流的浏览器使用了通用的JavaScript引擎组件，所以在解析这种新数据格式时就不存在兼容性问题，于是他们将这种数据格式命名为 “JavaScript Object Notation”，缩写为 JSON，由此JSON便诞生了！

今天我们来学习一下JSON的结构形式、数据类型、使用场景以及注意事项吧！

JSON格式

上面我们知道JSON是从JavaScript的数据类型中提取出来的子集，那JSON有几种结构形式呢？又有哪些数据类型呢？他们又分别对应着JavaScript中的哪些数据类型呢？

JSON的2种结构形式，键值对形式和数组形式。

举了一个JSON的实例，就是键值对形式的，如下：

{
"person": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "抚州市",
"county": "崇仁县"
}
}
}

这种结构的JSON数据规则是：一个无序的“‘名称/值’对”集合。一个对象以 {左括号开始， }右括号结束。每个“名称”后跟一个 :冒号；“‘名称/值’ 对”之间使用 ,逗号分隔。

因为大多数的时候大家用的JSON可能都是上面那种key-value形式，所以很多人在讲解JSON的时候总是会忽略数组形式，这一点是需要注意的。

那JSON的数组形式是怎么样的呢？举一个实例吧！

["pig", 18, "man", "江西省抚州市崇仁县"]

数组形式的JSON数据就是值（value）的有序集合。一个数组以 [左中括号开始， ]右中括号结束。值之间使用 ,逗号分隔。

JOSN的6种数据类型

上面两种JSON形式内部都是包含value的，那JSON的value到底有哪些类型，而且上期我们说JSON其实就是从Js数据格式中提取了一个子集，那具体有哪几种数据类型呢？

string：字符串，必须要用双引号引起来。
number：数值，与JavaScript的number一致，整数（不使用小数点或指数计数法）最多为 15 位，小数的最大位数是 17。
object：JavaScript的对象形式，{ key:value }表示方式，可嵌套。
array：数组，JavaScript的Array表示方式[ value ]，可嵌套。
true/false：布尔类型，JavaScript的boolean类型。
：空值，JavaScript的。

以上数据形式图片来源JSON官方文档：http://www.json.org/json-zh.html

JSON使用场景

介绍完JSON的数据格式，那我们来看看JSON在企业中使用的比较多的场景。

接口返回数据和序列化。JSON用的最多的地方莫过于Web了，现在的数据接口基本上都是返回的JSON，具体细化的场景有：

Ajxa异步访问数据
RPC远程调用
前后端分离后端返回的数据
开放API，如百度、高德等一些开放接口
企业间合作接口

这种API接口一般都会提供一个接口文档，说明接口的入参、出参等，

一般的接口返回数据都会封装成JSON格式，比如类似下面这种

{
"code": 1,
"msg": "success",
"data": {
"name": "pig",
"age": "18",
"sex": "man",
"hometown": {
"province": "江西省",
"city": "抚州市",
"county": "崇仁县"
}
}
}

程序在运行时所有的变量都是保存在内存当中的，如果出现程序重启或者机器宕机的情况，那这些数据就丢失了。一般情况运行时变量并不是那么重要丢了就丢了，但有些内存中的数据是需要保存起来供下次程序或者其他程序使用。

保存内存中的数据要么保存在数据库，要么保存直接到文件中，而将内存中的数据变成可保存或可传输的数据的过程叫做序列化，在Python中叫pickling，在其他语言中也被称之为serialization，marshalling，flattening等等，都是一个意思。

正常的序列化是将编程语言中的对象直接转成可保存或可传输的，这样会保存对象的类型信息，而JSON序列化则不会保留对象类型！

为了让大家更直观的感受区别，猪哥用代码做一个测试，大家一目了然

Python对象直接序列化会保存class信息，下次使用loads加载到内存时直接变成Python对象。
JSON对象序列化只保存属性数据，不保留class信息，下次使用loads加载到内存可以直接转成dict对象，当然也可以转为Person对象，但是需要写辅助方法。

对于JSON序列化不能保存class信息的特点，那JSON序列化还有什么用？答案是当然有用，对于不同编程语言序列化读取有用，比如：我用Python爬取数据然后转成对象，现在我需要将它序列化磁盘，然后使用Java语言读取这份数据，这个时候由于跨语言数据类型不同，所以就需要用到JSON序列化。

存在即合理，两种序列化可根据需求自行选择！

最后就是生成Token和配置文件

首先声明Token的形式多种多样，有JSON、字符串、数字等等，只要能满足需求即可，没有规定用哪种形式。

JSON格式的Token最有代表性的莫过于JWT（JSON Web Tokens）。

随着技术的发展，分布式web应用的普及，通过Session管理用户登录状态成本越来越高，因此慢慢发展成为Token的方式做登录身份校验，然后通过Token去取Redis中的缓存的用户信息，随着之后JWT的出现，校验方式更加简单便捷化，无需通过Redis缓存，而是直接根据Token取出保存的用户信息，以及对Token可用性校验，单点登录更为简单。

使用JWT做过app的登录系统，大概的流程就是：

用户输入用户名密码
app请求登录中心验证用户名密码
如果验证通过则生成一个Token，其中Token中包含：
用户的uid、Token过期时间、过期延期时间等，然后返回给app
app获得Token，保存在cookie中，下次请求其他服务则带上
其他服务获取到Token之后调用登录中心接口验证
验证通过则响应

JWT登录认证有哪些优势：

性能好：服务器不需要保存大量的session
单点登录（登录一个应用，同一个企业的其他应用都可以访问）：使用JWT做一个登录中心基本搞定，很容易实现。
兼容性好：支持移动设备，支持跨程序调用，Cookie 是不允许垮域访问的，而 Token 则不存在这个问题。
安全性好：因为有签名，所以JWT可以防止被篡改。更多JWT相关知识自行在网上学习，本文不过多介绍！

说实话JSON作为配置文件使用场景并不多，最具代表性的就是npm的package.json包管理配置文件了，下面就是一个npm的package.json配置文件内容。

{
"name": "server", //项目名称
"version": "0.0.0",
"private": true,
"main": "server.js", //项目入口地址，即执行npm后会执行的项目
"scripts": {
"start": "node ./bin/www" ///scripts指定了运行脚本命令的npm命令行缩写
},
"dependencies": {
"cookie-parser": "~1.4.3", //指定项目开发所需的模块
"debug": "~2.6.9",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0"
}
}

但其实JSON并不合适做配置文件，因为它不能写注释、作为配置文件的可读性差等原因。

配置文件的格式有很多种如：toml、yaml、xml、ini等，目前很多地方开始使用yaml作为配置文件格式。

JSON在Python中的使用

最后我们来看看Python中操作JSON的常用方法有哪些，在Python中操作JSON时需要引入json标准库。

import json

类型转换

Python类型转JSON：json.dump

# 1、Python的dict类型转JSON
person_dict = {'name': 'pig', 'age': 18, 'sex': 'man', 'hometown': '江西抚州'}
# indent参数为缩进空格数
person_dict_json = json.dumps(person_dict, indent=4)
print(person_dict_json, '\n')
# 2、Python的列表类型转JSON
person_list = ['pig', 18, 'man', '江西抚州']
person_list_json = json.dumps(person_list)
print(person_list_json, '\n')
# 3、Python的对象类型转JSON
person_obj = Person('pig', 18, 'man', '江西抚州')
# 中间的匿名函数是获得对象所有属性的字典形式
person_obj_json = json.dumps(person_obj, default=lambda obj: obj.__dict__, indent=4)
print(person_obj_json, '\n')

执行结果：

JSON转Python类型：json.loads

# 4、JSON转Python的dict类型
person_json = '{ "name": "pig","age": 18, "sex": "man", "hometown": "江西抚州"}'
person_json_dict = json.loads(person_json)
print(type(person_json_dict), '\n')
# 5、JSON转Python的列表类型
person_json2 = '["pig", 18, "man", "江西抚州"]'
person_json_list = json.loads(person_json2)
print(type(person_json_list), '\n')
# 6、JSON转Python的自定义对象类型
person_json = '{ "name": "pig","age": 18, "sex": "man", "hometown": "江西抚州"}'
# object_hook参数是将dict对象转成自定义对象
person_json_obj = json.loads(person_json, object_hook=lambda d: Person(d['name'], d['age'], d['sex'], d['hometown']))
print(type(person_json_obj), '\n')

执行结果如下：

对应的数据类型

上面我们演示了Python类型与JSON的相互转换，最开始的时候我们讲过JSON有6种数据类型，那这6种数据类型分别对应Python中的哪些数据类型呢？

需要注意的点

JSON的键名和字符串都必须使用双引号引起来，而Python中单引号也可以表示为字符串，所以这是个比较容易犯的错误！

Python类型与JSON相互转换的时候到底是用load/dump还是用loads\dumps？

他们之间有什么区别？
什么时候该加s什么时候不该加s？

这个我们可以通过查看源码找到答案：

不加s的方法入参多了一个fp表示filepath，最后多了一个写入文件的操作。

所以我们在记忆的时候可以这样记忆：

加s表示转成字符串(str)，不加s表示转成文件。

Python自定义对象与JSON相互转换的时候需要辅助方法来指明属性与键名的对应关系，如果不指定一个方法则会抛出异常！

相信有些看的仔细的同学会好奇上面使用json.dumps方法将Python类型转JSON的时候，如果出现中文，则会出现：

\u6c5f\u897f\u629a\u5dde

这种东西，这是为什么呢？

原因是：Python 3中的json在做dumps操作时，会将中文转换成unicode编码，并以16进制方式存储，而并不是UTF-8格式！

总结

今天我们学习了JSON的2种形式，切记JSON还有[...]这种形式的。

学习了JSON的6种数据类型他们分别对于Python中的哪些类型。

了解了JSON的一些使用场景以及实际的例子。

还学习了在Python中如何使用JSON以及需要注意的事项。

一个JSON知识点却分两篇长文（近万字）来讲，其重要性不言而喻。因为不管你是做爬虫、还是做数据分析、web、甚至前端、测试、运维，JSON都是你必须要掌握的一个知识点

本文为作者投稿，版权归作者个人所有。

步一步的教程，向您介绍使用 PyScript 的 HTTP 请求

在 PyScript 中发出请求是一个热门话题，因为 python 的流行模块请求它在 Pyodide 中不受支持。幸运的是，还有其他方法可以在 PyScript 中发出 HTTP 请求。

方法 #1 — 使用 Pyodide 的 pyfetch（最佳方法）

由于 PyScript 建立在 pyodide 之上，因此您可以使用任何来自 pyodide 的 API。

但是..什么是真正的pyfetch？

根据 pyodide 的文档，pyfetch 是 JavaScript fetch 的包装器。

Pyodide 提供了 pyodide.http.pyfetch ，它是一个方便的 JavaScript fetch 包装器。

与 python 不支持的模块请求相比，fetch 的一个好处是 fetch 是异步的。

主要问题是请求是同步的，而 fetch 是异步的。可以使用 XMLHttpRequest 进行同步调用，但是它不能支持很多选项并且效率不高。

我们来看看pyodide.http.pyfetch的定义

async http.pyfetch(url: str, **kwargs) → pyodide.http.FetchResponse

文档指出 **kwargs 可以是用于 Javascript 的 Fetch API 的任何可选参数。

这些参数中包括正文、标题、方法

from pyodide.http import pyfetch
import asyncioresponse = await pyfetch(url="https://jsonplaceholder.typicode.com/todos/1", method="GET")output = f"GET request=> status:{response.status}, json:{await response.json()}"

这里最重要的是你必须导入 asyncio 包，否则你会得到奇怪的错误。这个无证的细节困扰了我好几个小时。幸运的是，我找到了一篇对我有帮助的好文章。希望当您阅读本文时，这已经解决了。

使用 pyfetch 的 HTTP GET 请求的完整示例：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
         <style>
            h1 {
                font-size: 20px; 
                color: green; 
                text-transform: uppercase;
                text-align: center; 
                margin: 0 0 35px 0; 
                text-shadow: 0px 1px 0px #f2f2f2;
            }
        </style>
    </head>
    <body style='font-size: 20px;'>
        <h1>PyScript - HTTP Requests pyfetch</h1>
        <div id="request_output"></div>

    <py-script>
from pyodide.http import pyfetch
import asyncio

response = await pyfetch(url="https://jsonplaceholder.typicode.com/todos/1", method="GET")

output = f"GET request=> status:{response.status}, json:{await response.json()}"

pyscript.write('request_output', output)
    </py-script>
    </body>
</html>

方法 #2 — XMLHttpRequest 和其他 JS 函数

在 PyScript 中发出 HTTP 请求的第二种方法是使用其他 JavaScript 函数。您可以使用 JS 模块在 PyScript 中调用任何 javascript 函数/对象。

from js import XMLHttpRequest

req = XMLHttpRequest.new()
req.open("GET", "https://jsonplaceholder.typicode.com/todos/1", False)
req.send(None)
output = str(req.response)

请记住，如果您以这种方式使用 XMLHttpRequest，您需要发出一个具有一些实际原始输出/json 的 Web 请求。如果不是，它会弹出一个 CORS 错误，如果你愿意，你可以在浏览器中禁用它。

使用 XMLHttpRequest 的 HTTP GET 请求的完整示例：

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
         <style>
            h1 {
                font-size: 20px; 
                color: green; 
                text-transform: uppercase;
                text-align: center; 
                margin: 0 0 35px 0; 
                text-shadow: 0px 1px 0px #f2f2f2;
            }
        </style>
    </head>
    <body style='font-size: 20px;'>
        <h1>PyScript - HTTP Requests XMLHttpRequest</h1>
        <div id="request_output"></div>

    <py-script>
from js import XMLHttpRequest

req = XMLHttpRequest.new()
req.open("GET", "https://jsonplaceholder.typicode.com/todos/1", False)
req.send(None)
output = str(req.response)

pyscript.write('request_output', output)
    </py-script>
    </body>
</html>

结论

总之，PyScript PyScript 中的请求并不难掌握。它们只是现有 JavaScript 函数的包装器。

感谢您阅读本文。

在线咨询

上一篇：初识Node.js中的express框架
下一篇：htmlcssCSS圆形展开菜单#编程

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

在 JS 中如何使用 Ajax 来进行请求

1.AJAX

2.XMLHttpRequest

事例 2.1: GET

2.3 XMLHttpRequest vs Fetch

3. Fetch API

3.1 API用法

3.3 示例：GET

3.3 示例：POST

4.Axios API

4.1 示例：GET

4.2 示例：POST

您的项目需求