原生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();

  1. 使用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请求。

相关推荐
前端君4 小时前
实现最大异步并发执行队列
javascript
知识分享小能手5 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队6 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
萌萌哒草头将军6 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy7 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
林_深时见鹿7 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
GDAL7 小时前
Knockout.js 任务调度模块详解
javascript·knockout
椒盐螺丝钉7 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~7 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
GW_Cheng7 小时前
分享一个vue2的tinymce配置
开发语言·javascript·ecmascript