一个完整的xhr请求

来源:互联网 发布:淘宝网伟邦碎砖伸缩棍 编辑:程序博客网 时间:2024/06/01 07:49

以下是创建 XHR 对象的完整代码,告诉该对象要请求什么信息,设置成功或错误处理程序,然后实际地发送请求:

function handleSuccess () {   console.log( this.responseText ); // the HTML of https://unsplash.com/}function handleError () {   console.log( 'An error occurred \uD83D\uDE1E' );}const asyncRequestObject = new XMLHttpRequest();asyncRequestObject.open('GET', 'https://unsplash.com');asyncRequestObject.onload = handleSuccess;asyncRequestObject.onerror = handleError;asyncRequestObject.send();

API 和 JSON

可以获得网站的 HTML,但是可能不太实用。它返回的数据格式难以解析。如果我们希望获得的数据是能轻松解析的数据结构,那就很棒了。如果你觉得 JSON 很不错,那么你猜对了!

我们创建一个从 Unsplash 的 API 中获取图片并从《纽约时报》上获取相关文章的应用,而不是请求 Unsplash 的基础 URL。

在向 API 发出请求并返回 JSON 时,我们只需将该 JSON 响应转换为 JavaScript 对象。为此,我们可以使用 JSON.parse();。我们修改下 onload 函数以处理 JSON 响应:

function handleSuccess () {const data = JSON.parse( this.responseText ); // convert data from JSON to a JavaScript objectconsole.log( data );}asyncRequestObject.onload = handleSuccess;
原创粉丝点击