第二十一章 Ajax与Comet

1. 在发送XHR请求的同时,还会发送以下头部信息:

① Accept:浏览器能够处理的内容类型

② Accept-Charset:浏览器能够显示的字符集

③ Accept-Encoding:浏览器能够处理的压缩编码

④ Accept-Language:浏览器当前设置的语言

⑤ Connection:浏览器与服务器之间连接的类型

⑥ Cookie:当前页面设置的任何Cookie

⑦ Host:发出请求的页面所在的域

⑧ Referer:发出请求的页面的URI

⑨ User-Agent:浏览器的用户代理字符串


2. GET请求的查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL的末尾;并且所有名-值对都必须由和号(&)分隔


3. XMLHttpRequest 2级中定义了FormData类型,用于序列化表单以及创建与表单格式相同的数据。


4. 微软在IE8中引入了XDR(XDomainRequest)类型,这个对象与XHR类似,但是能实现安全可靠的跨域通信。XDR与XHR相比的的不同之处:

① XDR的cookie不会随请求发送,也不会随请求返回。 

② XDR只能设置请求头部信息中的Content-Type字段.

③ XDR不能访问响应头部信息

④ XDR只支持GET请求和POST请求

XDR的这些变化使CSRF(Cross-Site Request Forgery,跨站点请求伪造)和XSS(Cross-Site Scripting,跨站点脚本)的问题得到了缓解。


5. 跨域XHR对象为了安全所做的限制:

① 不能使用setRequestHeader()设置自定义头部;

② 不能发送和接收cookie

③ 调用getAllResponseHeaders()方法总会返回空字符串


6. 检测XHR是否支持CORS(Cross-Origin Resource Sharing,跨源资源共享)的最简单方式,就是检查是否存在withCredentials属性,同时结合检测XDomainRequest对象是否存在。


7. 其他跨域技术:

① 图像Ping:与服务器进行简单、单向的跨域通信的一种方式。请求的数据通过查询字符串形式发送,而响应式任意内容。浏览器得不到任何具体的数据,但通过监听load和error事件判断服务器何时接收到请求。

    其最常用于跟踪用户点击页面或动态广告曝光次数。

    两个主要缺点:一是智能发送GET请求,而是无法访问服务器的响应文本。

② JSONP:包括回调函数和数据两个部分。

    两个主要缺点:一是如果JSONP加载代码的来源域不安全,很可能会在响应中夹杂一些恶意代码,此时只能完全放弃JSONP调用;二是要确定JSONP请求是否失败并不容易。

③Comet:是一种服务器向页面推送数据的技术。有长轮询和HTTP流这两种方式实现。

    长轮询:浏览器在接收数据之前,先发起对服务器的连接,使用XHR对象和setTimeout()就能实现;

    HTTP流:浏览器想服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据。 

④ SSE:SSE(Server-Sent Events,服务器发送事件)是围绕只读Comet交互推出的API或者模式。SSE API用于创建到服务器的单向连接,服务器响应的MIME类型必须是text/event-stream

⑤ Web Socket:在JavaScript中创建Web Socket后,会有一个HTTP请求发送到浏览器以发起连接。在取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为Web Socket协议。


8. 创建Web Socket步骤:

① 实例一个WebSocket对象并传入要连接的URL(绝对URL):

var socket = new WebSocket("ws://www. example.com/server. php");

② 发送数据(只能发送纯文本数据):

socket.send("Hello WebSocket");

③ 接收数据,当服务器向客户端发来消息时,WebSocket对象就会触发message事件(返回的数据保存在event.data属性中):

socket. onmessage = function (event){

        var data = event. data;

}

④ open事件,在成功建立连接时触发:

socket. onopen = function(){

        console.log("此时连接已经成功建立");

}

⑤ error事件,在发生错误时触发,连接不能持续:

socket. onerror = function(){

        console.log("连接发生错误,快看看什么问题");

}

⑥ close事件,在连接关闭时触发:

socket. onclose = function(event){

        console.log(event. wasClean);    // wasClean是个布尔值,表示连接是否已经明确地关闭

        console.log(event. code);            // code是服务器返回的数值状态码

        console.log(event. reason);// reason是个字符串,包含服务器返回的消息

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,204评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,091评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,548评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,657评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,689评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,554评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,302评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,216评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,661评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,851评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,977评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,697评论 5 347
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,306评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,898评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,019评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,138评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,927评论 2 355

推荐阅读更多精彩内容

  • Ajax:Asynchronous JavaScript + XML的简写。Ajax技术的核心是XMLHttpRe...
    exialym阅读 876评论 0 8
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,657评论 18 139
  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 2,236评论 0 2
  • ajax作为前端开发必需的基础能力之一,你可能会使用它,但并不一定懂得其原理,以及更深入的服务器通信相关的知识。在...
    萧玄辞阅读 822评论 0 0
  • https://nodejs.org/api/documentation.html 工具模块 Assert 测试 ...
    KeKeMars阅读 6,332评论 0 6