从 https:// blob JSON url 调用数据并显示在 Javascript 网页中
[英]Calling data from https:// blob JSON url and displaying in Javascript webpage
问题描述
I am trying to take JSON data from an https:// blob url JSON file and display the data in a webpage using Javascript.
我正在尝试从 https:// blob url JSON 文件中获取 JSON 数据，并使用 Javascript 在网页中显示数据。 The JSON Data is an array of objects (files with data and formatting). JSON 数据是一组对象（带有数据和格式的文件）。
As it stands, this is the code that I am using:就目前而言，这是我正在使用的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>JavaScript - read JSON from URL</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="shortcut icon" href="#" />
</head>
<body>
<div id="myDiv">
<image id="div" />
</div>
<head>
<script>
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
var reader = new FileReader();
reader.onloadend = function () {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('https://xyz.blob.core.windows.net/xyz/xyz.json', function (dataUrl) {
window.external.notify(dataUrl);
document.querySelector("#div").src = dataUrl;
})
</script>
</script>
</body>
</html>
Any help would be appreciated.任何帮助，将不胜感激。 I am not sure if this is the right path at all to retrieve data from an https:// blob.我不确定这是否是从 https:// blob 检索数据的正确路径。 In addition, I am receiving the following two errors:此外，我收到以下两个错误：
A cookie associated with a resource at http://localhost/ was set with `SameSite=None` but without `Secure`. A future release of Chrome will only deliver cookies marked `SameSite=None` if they are also marked `Secure`. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5633521622188032.
Access to XMLHttpRequest at
'https://xyz.blob.core.windows.net/xyz.json' from origin 'http://localhost:7000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have read about these errors and realize I can get around the cross domain error using an AJAX call and using "jsonp" as the type of data, however, am trying to avoid using an AJAX call at all if there is a the FileReader() method already build for blobs.我已经阅读了这些错误并意识到我可以使用 AJAX 调用并使用“jsonp”作为数据类型来解决跨域错误，但是，如果有 FileReader( ) 方法已经为 blob 构建。
Thank you in advance!先感谢您！
1 个解决方案
解决方案1
0 2020-01-09 21:54:53
You need to understand that the term blob JSON url does not really exist.您需要了解术语blob JSON url并不真正存在。 A data URL exists, but you really need to understand what a data URL is:数据 URL存在，但您确实需要了解数据 URL是什么：
A data URL is not a traditional URL as you would understand it.数据 URL不是您所理解的传统 URL。 Its a URL scheme that actually contains data as a BASE64 encoded string.它是一个 URL 方案，实际上包含作为 BASE64 编码字符串的数据。
The next important thing is that FileReader is not a interface to work with data URLs or any URLs.下一个重要的事情是FileReader不是用于处理数据 URL 或任何 URL 的接口。 The FileReader API is useful when you have a File reference.当您有File引用时， FileReader API 很有用。 You usually get a File reference when the user selects or drops a file into your website.当用户选择文件或将文件放入您的网站时，您通常会获得File引用。 The important thing here is: File is a reference to a local file on the computer where the browser is opened.这里重要的是： File是对打开浏览器的计算机上本地文件的引用。 The readAsDataURL method of the FileReader API is used to convert a File to a data URL. FileReader API 的readAsDataURL方法用于将File转换为数据 URL。 This is useful when the user selects a file and you want to show a preview.当用户选择一个文件并且您想要显示预览时，这很有用。 Then you can use readAsDataURL .然后你可以使用readAsDataURL 。 It will basically read that file, convert it to BASE64 and prepend something like data:image/png;base64, in case of a png image in front of t.它基本上会读取该文件，将其转换为 BASE64 并在前面加上data:image/png;base64,以防 t 前面有 png 图像。
That being said reader.readAsDataURL(xhr.response);也就是说reader.readAsDataURL(xhr.response); is not really a useful thing.并不是真正有用的东西。 If your url actually targets a image you can just do <image id="div" src="http://example.com/your-image.png" /> .如果您的网址实际上是针对图像的，您可以执行<image id="div" src="http://example.com/your-image.png" /> 。 Or something like document.querySelector("#div").src = yourUrl;或者像document.querySelector("#div").src = yourUrl; . . You dont need the XMLHttpRequest.您不需要 XMLHttpRequest。
However if your URL returns a JSON and inside the JSON is a data url (or a normal url) you just need to retreive that data url.但是，如果您的 URL 返回 JSON，并且 JSON 内部是数据 url（或普通 url），则您只需要检索该数据 url。 And then you can do document.querySelector("#div").src = yourUrl;然后你可以做document.querySelector("#div").src = yourUrl; . . But in that case you need to make an AJAX request.但在这种情况下，您需要发出 AJAX 请求。
Actually you are making an AJAX request.实际上，您正在发出AJAX请求。 XMLHttpRequest is AJAX. XMLHttpRequest是AJAX。
A short note about jsonp : Don't use it.关于jsonp的简短说明：不要使用它。 It's a hack from a long time ago, you don't need it.这是很久以前的黑客，你不需要它。 What you're looking for is CORS .您正在寻找的是CORS 。 So yes, if you need to retrieve JSON from a different origin you need to use CORS .所以是的，如果您需要从不同的来源检索 JSON，则需要使用CORS 。 And you need to implement this on the server side.您需要在服务器端实现这一点。 Not in your javascript.不在你的 javascript 中。 However if your url is a direct BLOB url you dont need AJAX (and so XMLHTttpRequest .但是，如果您的网址是直接的BLOB网址，则您不需要 AJAX（因此XMLHTttpRequest 。
A last note about XMLHTttpRequest : If you're trying to use modern APIs: avoid it.关于XMLHTttpRequest的最后一点：如果您尝试使用现代 API：避免使用它。 There is the much cleaner and better fetch API that you should use.您应该使用更干净、更好的fetch API。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.