当前位置: 首页 > news >正文

原生js访问http获取数据的方法

在原生JavaScript中,直接通过浏览器端的JavaScript访问HTTP接口获取数据通常涉及XMLHttpRequest对象或现代的fetch API。

1. 使用XMLHttpRequest

XMLHttpRequest是一个老旧的API,但在某些情况下仍然很有用。以下是一个简单的例子:

javascrip

var xhr = new XMLHttpRequest();

xhr.open("GET", "https://api.example.com/data", true);

xhr.onreadystatechange = function () {

    if (xhr.readyState == 4 && xhr.status == 200)

        console.log(xhr.responseText); // 这里是返回的文本数据

};

xhr.send();

2. 使用fetch API

fetch API是一个更现代、更强大且基于Promise的HTTP请求API。以下是一个使用fetch获取数据的例子:

javascript

fetch('https://api.example.com/data')

    .then(response => response.json()) // 或者 response.text() 如果你知道返回的是文本

    .then(data => console.log(data)) // 这里是返回的JSON数据

    .catch((error) => {

        console.error('Error:', error);

    });

注意:

由于浏览器的同源策略(Same-Origin Policy),你可能无法直接通过JavaScript从与你的网页不同源的服务器获取数据。为了解决这个问题,你可以使用CORS(跨来源资源共享)或JSONP等技术。

在实际项目中,处理HTTP请求时通常会考虑更多的错误处理和边界情况。

如果你正在开发一个单页面应用(SPA)或复杂的Web应用,你可能会考虑使用像Axios或Fetch API的polyfill(如whatwg-fetch)这样的库来更方便地处理HTTP请求。

 

相关文章:

  • 数据在计算机内的表示和存储
  • 哈夫曼树的构造,哈夫曼树的存在意义--求哈夫曼编码
  • 【安卓跨进程通信IPC】-- Binder
  • 简易图像处理器的设计
  • ChatGLM3-6B部署
  • Python代码关系图生成,帮助快速熟悉一个项目
  • Vue.js的核心概念:如何理解Vue.js的声明式渲染、组件系统、Vue实例、Vue生命周期等核心概念。
  • 机器学习实战项目一(卡通化图像)
  • Linux命令篇(一):文件管理部分
  • 阿里云短信服务使用(Java)
  • C# 语言类型(二)—预定义类型之字符串及字符类型简述
  • 深入理解Java中的List集合:解析实例、优化技巧与最佳实践
  • HackTheBox-Machines--Lazy
  • 数据结构——图
  • Lua的几个特殊用法
  • [Vue CLI 3] 配置解析之 css.extract
  • 5、React组件事件详解
  • android 一些 utils
  • CODING 缺陷管理功能正式开始公测
  • ComponentOne 2017 V2版本正式发布
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • es6--symbol
  • Java 网络编程(2):UDP 的使用
  • JavaScript函数式编程(一)
  • laravel5.5 视图共享数据
  • node入门
  • Python学习之路13-记分
  • vue2.0项目引入element-ui
  • 湖南卫视:中国白领因网络偷菜成当代最寂寞的人?
  • 快速构建spring-cloud+sleuth+rabbit+ zipkin+es+kibana+grafana日志跟踪平台
  • 面试遇到的一些题
  • 前端自动化解决方案
  • 如何利用MongoDB打造TOP榜小程序
  • 一起参Ember.js讨论、问答社区。
  • shell使用lftp连接ftp和sftp,并可以指定私钥
  • ​水经微图Web1.5.0版即将上线
  • !! 2.对十份论文和报告中的关于OpenCV和Android NDK开发的总结
  • # 执行时间 统计mysql_一文说尽 MySQL 优化原理
  • (2024,LoRA,全量微调,低秩,强正则化,缓解遗忘,多样性)LoRA 学习更少,遗忘更少
  • (C#)Windows Shell 外壳编程系列9 - QueryInfo 扩展提示
  • (C语言)共用体union的用法举例
  • (zt)最盛行的警世狂言(爆笑)
  • (分享)自己整理的一些简单awk实用语句
  • (附源码)ssm教师工作量核算统计系统 毕业设计 162307
  • (黑马出品_高级篇_01)SpringCloud+RabbitMQ+Docker+Redis+搜索+分布式
  • (四)c52学习之旅-流水LED灯
  • (转)jdk与jre的区别
  • (转)Scala的“=”符号简介
  • .cfg\.dat\.mak(持续补充)
  • .NET/C# 利用 Walterlv.WeakEvents 高性能地定义和使用弱事件
  • @PreAuthorize注解
  • @RequestParam详解
  • @selector(..)警告提示
  • [ 云计算 | AWS ] AI 编程助手新势力 Amazon CodeWhisperer:优势功能及实用技巧
  • [Android Pro] AndroidX重构和映射