小结一下那些发起数据请求的元素（客户端与服务器端的基情）
发布于 6个月前 作者 yyrdl 570 次浏览

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了。 菜鸟写的小文章，大神看了不要笑话哈！ ：）

23 回复

+1 不错

+1

赞。相关的标准：Resource timing

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

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

@JacksonTian thank you very much! ^-^

@wannianchuan thank you very much! :)

@bnuhero 小弟膜拜大神！

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

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

@kingapple new 一个img 或者 插入script标签都会发生请求，，， jsonp

@Hi-Rube 哪些动态js资源加载，都是使用了jsonp么？

@kingapple 这个倒没尝试过，理论上是可行的，script标签只是一个桥梁而已，通过不断修改script的src属性来实现多次发送请求，有些网页链接一些在线jquery库就能说明script跨源是可行的

@kingapple 动态加载js文件只需要文件在服务器的地址就行了吧，也可以直接将js文件里面的内容给发过来，反正都一样。这个是我前天写的异步加载js文件并执行js文件里面里的工具函数 var status=0 function zhuCe() {

if(status==0)
{
status=1;
get_data('json/templates/js/myJsTools.js',get_script);
}
else
show_Box_again();

} function get_script(json) { //alert(‘get script’); var script=document.createElement(“script”); var head=document.getElementsByTagName(“head”).item(0); script.setAttribute(‘type’,’text/javascript’); script.text=json.content[0].content; head.appendChild(script); get_data('json/templates/html/registor.html’,show_box); } //show_box是回调函数，不会jquery，js 都是用原生的。。。。。><

@yyrdl head.appendChild(script);后，浏览器会自动去请求资源么？ 如果通过Dom Inspector加入这些好像浏览器不会自动去获取资源的。。。

@kingapple append之后不用请求了，因为我已经得到js文件的内容了，当然我在后台做了一个配合

@yyrdl append只是修改dom啊，js下载还要浏览器去做的。。。

@kingapple 我应经用XMLHttpRequest对象把文件内容得到了，而且你看我的get_script函数并没有为新生成的script标签添加src属性

@yyrdl 在RequireJS代码中搜了下，没看到XMLHTTPRequest这个东东：（

@kingapple 那个是前端的

@yyrdl rj可以在后台用的也可以在前端用的，require()会下载js资源，但是没看到XMLHTTPRequest对象啊。。。

@kingapple 哦哦， 这个怪我没把代码copy完整，你看代码里面有get_data(url,callback)，我把XMLHttpRequest放在里面了，做成一个功能函数，方便一点。 var request=new XMLHttpRequest()微软是另外一个), request.onreadystatechange=function(){} , ; ; request.open('GET’,url),request.send(null);核心就这么几句。

@yyrdl 你搜下RequireJS源码，里面好像唯有XMLHttpRequest代码的：（ 不知道没有这货，他把script添加到dom后，浏览器会自动去下js文件么？ 那么为何用DOM Inspector加入script不会自动加载js文件呢。。。。

@kingapple 什么require js源码？ 你是不是把握上面的代码搞成node服务器上得代码了，这是网页脚本，把script添加到head里，并指定src属性就能下载js文件，除非你在src指定的路径下没有该js文件； json.content[0].content; 这个里面就是js文件的内容，我创建script元素的时候并未添加src属性，而是直接从服务器把对应js文件的代码发过来，然后放到script里，script.text指代的就是script的内容，这是前端的知识。也就是说动态加载js有俩种方法，要么添加src属性，让浏览器去请求，要么你自己写代码直接请求js的内容

@yyrdl 哦，你是自己把js资源的内容放在创建的Dom节点内部啊。。。 我说的是通过 src=引用。。。

回到顶部