HTML5与Node.js实现跨域AJAX数据获取
10 浏览量
更新于2024-08-29
收藏 139KB PDF 举报
本资源主要介绍了如何使用Node.js与Ajax技术在HTML5页面中实现跨域获取HTTP服务器返回的数据。示例中，HTML页面通过Ajax发送GET请求到运行在Node.js服务器上的特定端口（1337），而HTML页面本身则在80端口的网站上运行，这就涉及到了跨域问题。为解决跨域限制，Node.js服务器需在响应头中添加`Access-Control-Allow-Origin`字段，允许指定的域名进行请求。
首先，让我们详细讲解HTML5页面中的Ajax请求部分：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>node中的ajax请求(html5页面)</title>
<script type="text/javascript">
function GetData() {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:1337/", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("res").innerHTML = xhr.responseText;
}
}
};
xhr.send(null);
}
</script>
</head>
<body>
<input type="button" value="获取数据" onclick="GetData()" />
<div id="res">dsdf</div>
</body>
</html>
```
这段代码定义了一个`GetData`函数，当用户点击按钮时，会创建一个新的XMLHttpRequest对象，并设置其方法为GET，目标URL为`http://localhost:1337/`。`onreadystatechange`事件监听xhr对象的读取状态，当状态变为4（即完成状态）且状态码为200（表示成功）时，将服务器返回的数据填充到ID为`res`的div元素中。
接下来是Node.js服务器端的代码：
```javascript
var http = require("http");
var server = http.createServer(function(req, res) {
if (req.url !== "/favicon.ico") {
res.writeHead(200, { "Content-Type": "text/plain", "Access-Control-Allow-Origin": "http://" });
res.end("Hello, this is data from the Node.js server.");
}
});
server.listen(1337, function() {
console.log("Server running on port 1337");
});
```
这段Node.js代码使用内置的http模块创建了一个HTTP服务器。当接收到非 favicon.ico 的请求时，服务器会返回200状态码，内容类型为文本，同时在响应头中设置`Access-Control-Allow-Origin`为`http://`，这意味着任何以`http://`开头的域名都可以访问这个服务器。`res.end()`方法用于发送响应数据，这里是简单的字符串"Hello, this is data from the Node.js server."。
在实际应用中，`Access-Control-Allow-Origin`的值通常会设置为具体允许访问的域名，而不是像示例中那样设置为通配符，以确保更严格的跨域策略。例如，如果只允许`http://example.com`访问，应将其设置为`"Access-Control-Allow-Origin": "http://example.com"`。如果希望允许所有源访问，可以设置为`"*"`，但请注意这可能带来安全风险。
总结来说，本资源通过一个简单的例子展示了Node.js与Ajax结合实现跨域数据交互的过程，以及在服务器端设置跨域策略的方法。这对于开发Web应用程序，特别是前后端分离的应用场景，是非常重要的知识。
node.js+Ajax实现获取实现获取HTTP服务器返回数据服务器返回数据
我们看一个HTML5页面中通过AJAX请求的方式获取HTTP服务器返回数据的代码示例.由于我们把服务器的端口指定为1337,
并将从端口为80的网站中运行HTML5页面,因此这是一种跨域操作,需要在HTTP响应头部中添加Access_Control_Allow_Origin
字段,并且将参数指定为允许向服务器请求数据额域名+端口号(省略端口号时允许该域名下的任何端口向服务器请求数据),
静态页面:index.html(注:一定要放在服务器环境下,如果是win7系统的话,可以开启IIS服务,并把页面考过去直接运行这个页面,)
代码如下:
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>node中的ajax请求(html5页面)</title>
<script type=”text/javascript”>
function GetData(){
var xhr=new XMLHttpRequest();
xhr.open(“GET”,”http://localhost:1337/”,true);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
document.getElementById(“res”).innerHTML=xhr.responseText;
}
}
}
xhr.send(null);
}
</script>
</head>
<body>
<input type=”button” value=”获取数据” onclick=”GetData()” />
<div id=”res”>dsdf</div>
</body>
</html>
node代码:
代码如下:
var http=require(“http”);
var server=http.createServer(function(req,res){
if(req.url!==”/favicon.ico”){
res.writeHead(200,{“Content-Type”:”text/plain”,”Access-Control-Allow-Origin”:”http://localhost”});
res.write(“你好啊!”);
}
res.end();
});
server.listen(1337,”localhost”,function(){
console.log(“开始监听…”);
});
首先开启服务:node server.js
启动静态页面:
点击按钮”获取数据”
下载后可阅读完整内容，剩余3页未读，立即下载
2020-12-09 上传
2018-03-17 上传
2023-08-30 上传
2023-06-28 上传
2023-05-12 上传
2023-05-26 上传
2023-06-06 上传
2023-07-13 上传
2023-06-13 上传
weixin_38666114
- 粉丝: 7
- 资源: 971
我的内容管理
展开
最新资源
- 十种常见电感线圈电感量计算公式详解
- 军用车辆：CAN总线的集成与优势
- CAN总线在汽车智能换档系统中的作用与实现
- CAN总线数据超载问题及解决策略
- 汽车车身系统CAN总线设计与应用
- SAP企业需求深度剖析：财务会计与供应链的关键流程与改进策略
- CAN总线在发动机电控系统中的通信设计实践
- Spring与iBATIS整合：快速开发与比较分析
- CAN总线驱动的整车管理系统硬件设计详解
- CAN总线通讯智能节点设计与实现
- DSP实现电动汽车CAN总线通讯技术
- CAN协议网关设计：自动位速率检测与互连
- Xcode免证书调试iPad程序开发指南
- 分布式数据库查询优化算法探讨
- Win7安装VC++6.0完全指南：解决兼容性与Office冲突
- MFC实现学生信息管理系统：登录与数据库操作
