小结一下那些发起数据请求的元素(客户端与服务器端的基情)
发布于 3 年前 作者 yyrdl 1969 次浏览 最后一次编辑是 1 年前

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 回复

赞。相关的标准: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=引用。。。

回到顶部