Javascript高级程序设计第21章（Ajax与Comet）

2024-05-11 11:48
文章标签 java 21 script 高级 程序设计 ajax comet

本文主要是介绍Javascript高级程序设计第21章（Ajax与Comet），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

背景：在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架，如window.name,document.domain + iframe,动态创建外域或同域JS，JSONP等等，具体可看这篇文章 JavaScript跨域总结与解决方法

1.兼容性：IE7+、Firefox等主流浏览器都支持原生的XHR对象，在这些浏览器中创建XHR对象,比较简洁的全兼容写法：

var xhr = null;
function createXHR(){if (window.XMLHttpRequest){// 新浏览器xhr = new XMLHttpRequest();}else if (window.ActiveXObject){// IE5,IE6xhr = new ActiveXObject("Microsoft.XMLHTTP");}
}
2.XHR的用法

①在使用XHR对象时，要调用的第一个方法是open()，它接受3个参数：要发送的请求的类型（"get", "post"等）、请求的URL和表示是否异步发送请求的布尔值。

xhr.open("get", "example.php", false);

调用open()方法并不会发送请求，而只是启动一个请求以备发送，只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何茶币，都会引发安全错误。

要发送特定的请求，必须像这样：

xhr.send(null);

如果不需要通过请求主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必需的。

在收到响应后，响应的数据会自动填充XHR对象的属性

responseText:作为响应主体被返回的问题（常用）

responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保存着响应数据的XML DOM文档

status：响应的HTTP状态（常用）HTTP 200~299，响应成功，304使用浏览器缓存

statusText：HTTP状态的说明 200-》ok，跨浏览器不太可靠

②发送异步请求，可以监测XHR对象的readyState属性，该属性表示请求/响应过程中的当前活动阶段

0：未初始化

1：启动。已经调用open()，但尚未调用send()

2：发送。已经调用send()，但尚未接收到响应

3：接收。已经接收到部分响应数据

4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。（最有用）

xhr.onreadystatechnage = function(){//....
}

不过我们必须在调用open()之前指定onreadystatechange事件处理程序才能确保浏览器兼容性

1.这里用了DOM 0级方法是因为不需要用到event对象

2.这里没有使用xhr对象是因为DOM 0事件处理程序的作用域问题。如果使用this对象，在有的浏览器中会导致函数执行失败，或者导致错误发生

②HTTP头部信息

使用setRequestHeader()方法可以设置自定义的请求头部信息。这个方法接受两个参数：头部字段的名称和头部字段的值。要成功发送请求头部信息，必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()。最好使用自定义的头部字段名称，不要使用浏览器正常发送的字段名称，否则有可能会影响服务器的相应

xhr.setRequestHeader("myheader", "MyValue")
调用XHR对象的getResponseHeader()方法并传入头部字段名称，可以取得相应的响应头部信息。而调用getAllResponseHeaders（）方法则取得一个包含所有头部信息的长字符串

POST请求：与get请求相比，POST请求消耗的资源会更多一些。从性能角度上看，GET请求的速度最多可达到POST请求的两倍

默认情况下，服务器对POST请求和提交Web表单的请求并不会一视同仁。因此，服务器端必须有程序来读取发送过来的原始数据，并从中解析出有用的部分。不过，我们可以使用XHR来模仿表单提交：首先将Cotent-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型，其次是以适当的格式创建一个字符串

xhr.open("post", "postexample.php", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");var form = document.getElementById("user-info");            xhr.send(serialize(form));

3.XMLHttpRequest 2级

①FormData：FormData为序列化表单以及创建与表单格式相同的数据（用于通过XHR传输）提供了便利

var data = new FormData();
data.append("name", "Nicholas");
或者传入表单元素 
var data = new FormData(document.forms[0]);

使用FormData的方便之处体现明确地在XHR对象上设置头部

兼容性：主流浏览器，IE 10+、Android 3+版WebKit，这样在移动端就不用担心了


②超时设定：仅支持IE 8+

xhr.open("get", "timeout.php", true);xhr.timeout = 1000;xhr.ontimeout = function(){alert("Request did not return in a second.");};        xhr.send(null);

③overrideMimeType()方法

用于重写XHR相应的MIME类型

var xhr = new XMLHttpRequest();
xhr.open("get", "text.php", true);
xhr.overrideMimeType("text/xml" );
//xhr.overrideMimeType(text/plain);
xhr.send(null);

需必须send()方法之前，才能保证重写相应的MIME类型


③进度事件

6个进度事件

loadstart：在接收到响应数据的第一个字节时触发

progress：在接收响应期间持续不断地触发

error：在请求发生错误时触发

abort：在因为调用abort()方法而终止连接时触发

load：在接受到完整的响应数据时触发

loadend：在通信完成或触发error、abort或load事件后触发（很少浏览器支持）

loadstart -> progress+ -> (error || abort || load) -> loadend 

window.onload = function(){var xhr = createXHR();        xhr.onload = function(event){if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){alert(xhr.responseText);} else {alert("Request was unsuccessful: " + xhr.status);}};xhr.onprogress = function(event){var divStatus = document.getElementById("status");if (event.lengthComputable){    //进度信息是否可用的布尔值divStatus.innerHTML = "Received " + event.position + " of " + event.totalSize + " bytes";}    //position表示已经接收到的字节数，totalSize表示根据Content-Length响应头部确定的预期字节数};xhr.open("get", "altevents.php", true);xhr.send(null);};

为确保正确执行，必须在调用open()方法之前添加onprogress事件处理程序

IE8+只支持load事件，目前还没有浏览器支持loadend事件


4.跨源资源共享

CORS（Cross-Origin Resource Sharing，跨源资源共享），定义了再必须访问跨源资源时，浏览器与服务器应该如何沟通。CORS背后的基本思想，就是使用自定义的HTTP头部让浏览器与服务器进行如何沟通，从而决定请求或响应式应该成功，还是应该失败。比如，浏览器附加一个origin头部 Origin: http://www.nczonline.net ，服务器 Access-Control-Allow-Origin: hhtp://www.nczonline.net，如果没有这个头部，或者有这个头部但源信息不匹配，浏览器就会驳回请求

IE对CORS的实现： XHR（XDomainRequest）

限制：cookie不会随请求发送，也不会随响应返回

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

不能访问响应头部信息

只能设置GET和POST请求

var xdr = new XDomainRequest();xdr.onload = function(){alert(xdr.responseText);};xdr.onerror = function(){alert("Error!");};//you'll need to replace this URL with something that worksxdr.open("get", "http://www.somewhere-else.com/xdr.php");xdr.send(null); //xdr.open("post", ""http://www.baidu.com");
//xdr.contentType = "application/x-www-form-urlencoded";


其他浏览器对CORS的实现：标准的XHR对象 new XMLHttpRequest()

在尝试打开不同来源的资源时，无需额外编写代码就可以出发这个代码。

但跨域XHR对象也有一些限制：

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

②不能发送和接受cookie

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

由于无论同源请求还是跨源请求都使用相同的接口，因此对于本地资源，最好使用相对URL


5.跨浏览器的CORS

即使浏览器对CORS的支持程度并不多一样，但所有浏览器都支持简单的（非Preflight和不带凭据的）请求，因此有必要实现一个跨浏览器的方案。检测XHR是否支持CORS的最简单的方式，就是检查是否存在withCredentials属性。再结合XDomainRequest对象是否存在，就可以兼顾所有浏览器了。

function createCORSRequest(method, url){var xhr = new XMLHttpRequest();if ("withCredentials" in xhr){xhr.open(method, url, true);} else if (typeof XDomainRequest != "undefined"){xhr = new XDomainRequest();xhr.open(method, url);} else {xhr = null;}return xhr;}var request = createCORSRequest("get", "http://www.somewhere-else.com/xdr.php");if (request){request.onload = function(){//do something with request.responseText};request.send();}
Firefox、Safari和Chrome中的XMLHttpRequest对象与IE中的XDomainRequest对象类似，都提供了足够用的接口，因此以上模式是相当有用的。这两个对象共同的属性/方法如下：

abort()：用于停止正在进行的请求

onerror：用于代替onreadystatechange检测错误

onload：代替onreadystatechange检测成功

responseText：用于取得相应内容

send()：用于发送请求

以上成员都包含在createCORSRequest()函数返回的对象中，在所有浏览器中都能正常使用


6.其他跨域技术

①图像ping：使用<img>标签，是在线广告跟踪浏览量的主要方式。

方式：单向，动态创建图像，使用onload和onerror事件处理程序来确定是否接收到了响应。请求的数据是通过查询字符串(如url?test=hello)发送的，而响应可以是任意内容，但通常是像素图或204响应

解释：204响应是指服务器成功处理了客户端的请求，但服务器无返回响应，即Content-Length为0，因为客户端只管把数据发送给服务器，无需关心响应，详情戳点击打开链接

var img = new Image();img.onload = img.onerror = function(){alert("Done!");};img.src = "http://www.example.com/test?name=Nicholas";

用途：图像Ping最常用于跟踪用户点击页面或动态广告曝光次数。

缺点：只能发送GET请求，二是无法返回服务器的响应文本。


②JSONP：JSON with padding

JSONP和JSON看起来差不多，只不过是被包含在函数调用中的JSON，如callback({"name": "Nicholas"});

JSONP由两部分组成：回调函数和数据。回调函数是当响应到来时在页面中调用的函数。回调函数的名字一般是在请求中指定。而数据就是传入函数中的JSON数据。

function handleResponse(response){alert("You're at IP address " + response.ip + ", which is in " + response.city + ", " + response.region_name);}var script = document.createElement("script");script.src = "http://freegeoip.net/json/?callback=handleResponse";document.body.insertBefore(script, document.body.firstChild);
JSONP与图像Ping对比的优点是：能够直接访问响应文本，支持在浏览器与服务器之间双向通信。

缺点是：从其他域中加载代码执行，如果其他域不安全，很可能会在响应中夹带一些恶意代码。

另外，要确定JSONP请求是否失败并不容易，虽然HTML5给<script>元素新增了一个onerror事件处理程序，但目前还没有得到任何浏览器支持。为此，开发人员不得部使用计时器检测指定时间内是否接收到了响应


7.Comet

Comet：服务器推送。刚好与Ajax相反，Ajax是一种从页面向服务器请求数据的技术，而Comet则是一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上，非常适合处理体育比赛的分数和股票涨价。

有两种实现Comet的方式：长轮询和流。

①长轮询是传统轮询（也成为短轮询，浏览器定时向服务器发送请求，看有没有更新的数据）的一个翻版，长轮询把段轮训颠倒了一下。页面发起一个到服务器的请求，然后服务器一直保持连接打开，直到有数据可发送。发送完了数据，浏览器关闭连接，随即又发送一个到服务器的新请求。

它们的区别在于服务器如何发送数据，短轮询是服务器立即发送响应，无论数据是否有效，而长轮询是等待发送响应。轮询的优势有所有浏览器都支持，因为使用XHR对象和setTimeout()就能实现。而你要做的就是决定什么时候发送请求。

②HTTP流，与轮询不同，因为它在页面的整个生命周期只使用一个HTTP连接。具体来说，就是浏览器向服务器发送一个请求，而服务器保持连接打开，然后周期性地向浏览器发送数据。

<?php$i = 0;while(true){//输出一些数据，然后立即刷新输出缓存echo "Number is $i";flush();//等几秒钟sleep(10);$i++     }

所有服务器语言都支持打印到输出缓存然后刷新（将输出缓存中的内容一次性全部发送给客户端）的功能。 
function createStreamingClient(url, progress, finished){        var xhr = new XMLHttpRequest(),received = 0;xhr.open("get", url, true);xhr.onreadystatechange = function(){var result;if (xhr.readyState == 3){//get only the new data and adjust counterresult = xhr.responseText.substring(received);received += result.length;//call the progress callbackprogress(result);} else if (xhr.readyState == 4){finished(xhr.responseText);}};xhr.send(null);return xhr;}var client = createStreamingClient("streaming.php", function(data){alert("Received: " + data);}, function(data){alert("Done!");});
在Firefox、safari、Opera和Chrome中，通过侦听readystatechange事件及检测readyState的值是否为3，就可以利用XHR对象实现HTTP流。有时候，当连接关闭时，很肯呢过还需要重新连接，所以关注连接什么时候关闭时很有必要的。这个例子比较简单，而且也能在大多数浏览器正常运行（除IE），但管理Comet的连接时很容易出错的，需要时间不断改进才能达到完美。


8.服务器发送事件

SSE(Server-Sent-Event,服务器发送事件)，因为兼容非常有限，所以不详细说了。

Web Sockets：使用自定义协议，适合移动应用，IOS上应用没问题，但Android就呵呵了

这篇关于Javascript高级程序设计第21章（Ajax与Comet）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/979449。

相关文章

JVM 的类初始化机制

JVM 的类初始化机制

前言 当你在 Java 程序中new对象时，有没有考虑过 JVM 是如何把静态的字节码（byte code）转化为运行时对象的呢，这个问题看似简单，但清楚的同学相信也不会太多，这篇文章首先介绍 JVM 类初始化的机制，然后给出几个易出错的实例来分析，帮助大家更好理解这个知识点。 JVM 将字节码转化为运行时对象分为三个阶段，分别是：loading 、Linking、initialization
阅读更多...
Spring Security 基于表达式的权限控制

Spring Security 基于表达式的权限控制

前言 spring security 3.0已经可以使用spring el表达式来控制授权，允许在表达式中使用复杂的布尔逻辑来控制访问的权限。 常见的表达式 Spring Security可用表达式对象的基类是SecurityExpressionRoot。 表达式描述hasRole([role])用户拥有制定的角色时返回true （Spring security默认会带有ROLE_前缀）,去
阅读更多...
浅析Spring Security认证过程

浅析Spring Security认证过程

类图 为了方便理解Spring Security认证流程，特意画了如下的类图，包含相关的核心认证类 概述 核心验证器 AuthenticationManager 该对象提供了认证方法的入口，接收一个Authentiaton对象作为参数; public interface AuthenticationManager {Authentication authenticate(Authenti
阅读更多...
Spring Security--Architecture Overview

Spring Security--Architecture Overview

1 核心组件 这一节主要介绍一些在Spring Security中常见且核心的Java类，它们之间的依赖，构建起了整个框架。想要理解整个架构，最起码得对这些类眼熟。 1.1 SecurityContextHolder SecurityContextHolder用于存储安全上下文（security context）的信息。当前操作的用户是谁，该用户是否已经被认证，他拥有哪些角色权限…这些都被保
阅读更多...
Spring Security基于数据库验证流程详解

Spring Security基于数据库验证流程详解

Spring Security 校验流程图 相关解释说明（认真看哦） AbstractAuthenticationProcessingFilter 抽象类 /*** 调用 #requiresAuthentication(HttpServletRequest, HttpServletResponse) 决定是否需要进行验证操作。* 如果需要验证，则会调用 #attemptAuthentica
阅读更多...
Spring Security 从入门到进阶系列教程

Spring Security 从入门到进阶系列教程

Spring Security 入门系列 《保护 Web 应用的安全》 《Spring-Security-入门（一）：登录与退出》 《Spring-Security-入门（二）：基于数据库验证》 《Spring-Security-入门（三）：密码加密》 《Spring-Security-入门（四）：自定义-Filter》 《Spring-Security-入门（五）：在 Sprin
阅读更多...
Java架构师知识体认识

Java架构师知识体认识

源码分析 常用设计模式 Proxy代理模式Factory工厂模式Singleton单例模式Delegate委派模式Strategy策略模式Prototype原型模式Template模板模式 Spring5 beans 接口实例化代理Bean操作 Context Ioc容器设计原理及高级特性Aop设计原理Factorybean与Beanfactory Transaction 声明式事物
阅读更多...
Java进阶13讲__第12讲_1/2

Java进阶13讲__第12讲_1/2

多线程、线程池 1.  线程概念 1.1  什么是线程 1.2  线程的好处 2.   创建线程的三种方式 注意事项 2.1  继承Thread类 2.1.1 认识  2.1.2  编码实现  package cn.hdc.oop10.Thread;import org.slf4j.Logger;import org.slf4j.LoggerFactory
阅读更多...
JAVA智听未来一站式有声阅读平台听书系统小程序源码

JAVA智听未来一站式有声阅读平台听书系统小程序源码

智听未来，一站式有声阅读平台听书系统 🌟&nbsp;开篇：遇见未来，从“智听”开始 在这个快节奏的时代，你是否渴望在忙碌的间隙，找到一片属于自己的宁静角落？是否梦想着能随时随地，沉浸在知识的海洋，或是故事的奇幻世界里？今天，就让我带你一起探索“智听未来”——这一站式有声阅读平台听书系统，它正悄悄改变着我们的阅读方式，让未来触手可及！ 📚&nbsp;第一站：海量资源，应有尽有 走进“智听
阅读更多...
在cscode中通过maven创建java项目

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目，文件名一般为项目名8 确定
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2