小结一下那些发起数据请求的元素（Nodejs客户端与服务器端的基情）

小结一下那些发起数据请求的元素（Nodejs客户端与服务器端的基情）

1.来自DOM文档

对于发起数据请求的元素，DOM文档占得最多。首先是head标签里面的script和link 标签，这俩个标签在页面加载的时候会向服务器请求src或href指定的资源. 不得不说的是script有突破同源策略的能力，可用于跨服务器交流。（一般还是不要用，比较危险）。对于style标签我暂且将其归到css样式表里 下个就是img和embed video这些位于body体里面的元素，与head里面的一样，也会根据指定的地址向服务器发送请求，而且是在页面加载的时候。

特别的是当页面加载完毕，通过javascript动态添加元素，比如body.appendChild(img)，这样的话当元素添加到页面中的时候，也会向服务器发送请求，个人认为这是浏览器的固有动作。

2.来自javascript脚本

大家都知道 XMLHttpRequest这个对象（微软的是ActiveXObject(‘Microsoft.XMLHTTP’)）,这个对象是脚本里面唯一 一个可以向服务器发送请求的途径，至于请求的方法就不说了，值得注意的是一般为了不影响脚本的继续执行，都使用异步的方式，所以这里要像node.js一样使用callback处理返回的数据，否则就呵呵了。。

3.来自CSS样式表

就目前我所遇到的，就只有background这个玩意能发送数据请求，background后面跟一个背景图片的url，通过url浏览器自动向服务器发送请求，请求的完整路径为baseurl+url，之前的也一样 。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。

今天写了一个小的服务器探究客户端与服务器端的数据交流，刚开始以为很复杂，比如像音频视屏之类的，搞不懂脚本怎么通过XMLHttpRequest对象 处理这些数据格式，后来直接用一个小小的json就解决了问题，脚本只需获得数据的地址就行，其余的交给浏览器就OK了。 菜鸟写的小文章，大神看了不要笑话哈！ ：）


7 回复

小结一下那些发起数据请求的元素（Nodejs客户端与服务器端的基情）

1. 来自DOM文档

在网页中，很多元素都会在加载时发起数据请求。例如：

  • <script> 和 <link> 标签：

    • 这些标签通常放在 <head> 部分，用于加载JavaScript文件或CSS文件。它们会在页面加载时向服务器请求指定的资源（如 src 或 href 属性）。
    <script src="https://example.com/script.js"></script>
<link rel="stylesheet" href="https://example.com/style.css">

  • <img>、<embed> 和 <video> 标签：

    • 这些标签通常放在 <body> 部分，用于显示图像、嵌入媒体或视频。它们同样会在页面加载时向服务器请求指定的资源（如 src 属性）。
    <img src="https://example.com/image.png">
<embed src="https://example.com/video.mp4">

  • 通过JavaScript动态添加的元素：

    • 当通过JavaScript动态添加这些元素时（如 document.body.appendChild(newImg)），浏览器会自动向服务器发起请求。
    const newImg = document.createElement('img');
newImg.src = 'https://example.com/new-image.png';
document.body.appendChild(newImg);

2. 来自JavaScript脚本

JavaScript提供了多种方式来发起数据请求，其中最常用的是 XMLHttpRequest 对象。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data.json', true); // 异步请求
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();

3. 来自CSS样式表

CSS样式表中的某些属性也可以发起数据请求，例如 background 属性。

body {
  background: url('https://example.com/background.jpg');
}

示例：简单的Node.js服务器

以下是一个简单的Node.js服务器，用于处理客户端的数据请求：

const http = require('http');
const fs = require('fs');

const server = http.createServer((req, res) => {
  if (req.url === '/data') {
    fs.readFile('./data.json', 'utf8', (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Internal Server Error');
      } else {
        res.writeHead(200, { 'Content-Type': 'application/json' });
        res.end(data);
      }
    });
  } else {
    fs.readFile('./index.html', 'utf8', (err, data) => {
      if (err) {
        res.writeHead(500);
        res.end('Internal Server Error');
      } else {
        res.writeHead(200, { 'Content-Type': 'text/html' });
        res.end(data);
      }
    });
  }
});

server.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个例子中，客户端可以通过访问 /data 来获取JSON数据，而其他请求则返回HTML页面。

总结

无论是通过DOM元素、JavaScript脚本还是CSS样式表，都有多种方式可以发起数据请求。理解这些机制有助于更好地管理和优化前端与后端之间的数据交互。


+1 不错

+1

赞。相关的标准：Resource timing

下列语法将会引发网络下载行为：

  • 用url()指定css：例如[@import](/user/import) url()和background: url()
  • embed元素的src属性
  • img元素的src属性
  • link元素的href属性
  • object元素的data属性
  • script元素的src属性
  • frame或者iframe元素的src属性
  • svg元素及其子元素
  • XMLHttpRequest对象
  • 其它，留待将来扩充。

跨服务器交流，有些浏览器会有挺大问题吧，如FF

还有JS对象好多可以发起请求的，不知道动态发送请求是如何实现的，直接修改DOM，加入script语句，貌似不会自动去请求资源？

在这个帖子中，讨论了Node.js客户端与服务器端之间发起数据请求的不同元素和方法。以下是对不同发起数据请求的元素的简要总结，并提供一些示例代码来说明如何实现这些请求。

1. 来自DOM文档

  • <script> 和 <link> 标签：这些标签会在页面加载时向服务器请求指定的资源（如JavaScript文件或CSS文件）。
  • <img>、<embed> 和 <video> 标签：这些标签也会在页面加载时向服务器请求相应的资源。
  • 通过JavaScript动态创建的元素：例如，使用document.body.appendChild(newImage)动态添加<img>标签，浏览器会立即发起请求获取图像。

2. 来自JavaScript脚本

  • XMLHttpRequest 对象：用于向服务器发送异步请求。以下是简单的示例代码：
// 创建XMLHttpRequest对象
const xhr = new XMLHttpRequest();

// 配置请求
xhr.open('GET', 'http://example.com/data.json', true);

// 设置回调函数
xhr.onload = function () {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Request failed with status: ' + xhr.status);
    }
};

// 发送请求
xhr.send();

3. 来自CSS样式表

  • background-image 属性：可以设置为一个URL，当浏览器解析到该样式时，会向服务器请求该背景图像。

示例代码总结

以上示例展示了如何使用XMLHttpRequest进行基本的GET请求，以及如何通过DOM元素自动发起请求。通过这些方式，客户端可以有效地与服务器端进行数据交互。希望这些示例对你有所帮助。

回到顶部