🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
1.在使用XHR对象时,要调用的第一个方法是open(),它接收3个参数:要发送的请求的类型、请求的URL(基于当前页面的相对路径或绝对路径)和表示是否异步发送请求的布尔值。调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。 只能向同一个域中使用相同端口和协议的URL发送请求。如果URL与启动请求的页面有任何差别,都会引发安全错误。 2.要发送特定请求,必须调用send()方法。该方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null,因为这个参数对有些浏览器来说是必须的。 3.若ajax请求是同步的,则JavaScript代码会等到服务器响应之后再继续执行。 4.在接收到服务器返回的响应后,响应的数据会自动填充XHR对象,相关的属性简介如下: (1)responseText:作为响应主体返回的文本。 (2)responseXML (3)status:响应的HTTP状态码。 (4)statusText:HTTP状态的说明。 5.若ajax请求是异步的,则必须要通过XHR的readystatechange事件监听readyState属性的值。这里有两个值得注意的地方,一是onreadystatechange事件处理程序必须在open()方法前指定。二是onreadystatechange事件处理程序内部不应使用this对象(兼容性问题)。 6.在接收到响应之前还可以调用abort()方法来取消异步请求。 7.XHR对象的setRequestHeader()方法可以设置自定义的请求头部信息。要成功发送请求头部信息,必须在调用open()方法后切调用send()方法前调用此方法。(建议使用自定义的头部字段名称,不要使用浏览器正常发送的字段名称,否则有可能会影响服务器的响应) 8.调用XHR对象的getRequestHeader()方法并传入头部字段名称,可以取得相应的响应头部信息。而调用getAllRequestHeaders()方法则可以取得一个包含所有头部信息的长字符串。 9.POST请求是吧数据作为请求的主体提交,而get请求传统上不是这样的。发送给post请求第一步是在open()方法中在第一个参数位置传入"post",第二步是向send()方法中传入数据。 10.可以使用XHR来模仿表单提交:将Content-Type头部信息设置为application/x-www-form-urlencoded,也就是表单提交时的内容类型,其次是以适当的格式创建一个字符串(第14章介绍的serialize()函数)。 11.FormData类型用于便捷地将表单数据序列化。 12.progress事件常用于创建进度指示器。 13.CORS(跨域资源共享)定义了在必须访问跨域资源时,浏览器与服务器应该如何沟通。CORS背后的基本思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功还是应该失败。 14.ie通过XDR对象、其他浏览器通过XHR对象实现CORS。 15.JSONP(JSON with padding)由两部分组成:回调函数和数据。回调函数是响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定。而数据就是传入回调函数中的JSON数据。下面是一个典型的JSONP请求: `http://freegeoip.net/json/?callback=handleResponse` JSONP是通过动态script元素来使用的。 16.Comet是一种服务器向页面推送数据的技术。Comet能够让信息近乎实时地被推送到页面上,非常适合处理体育比赛的比分和股票报价。有两种实现Comet的方式:长轮询和流。 17.短轮询是指浏览器定时向服务器发送请求,看有没有更新的数据。长轮询同样也是由浏览器发起请求,然后服务器一直保持连接打开,知道有数据可发送。发送完数据后,浏览器关闭连接,随即又发起一个到服务器的新请求。 18.HTTP流在页面的整个生命周期内只使用一个HTTP连接。具体来说就是浏览器向服务器发送一个请求,而服务器保持连接打开,然后周期性地向浏览器发送数据。在IE以外的浏览器中,通过侦听readystatechange事件以及检测readystate的值是否为3,就可以利用XHR对象实现HTTP流。 19.SSE(服务器发送事件)是围绕只读Comet交互推出的API或者模式。SSE支持短轮询、长轮询、HTTP流,而且能在断开连接时自动确定何时重新连接。(IE不支持SSE) 20.SSE中要预订新的事件流,首先要创建一个新的EventSource对象,并传入一个入口点。 `var source = new EventSource('myevents.php');` 注意,传入的URL必须与创建对象的页面同源。 21.EventSource的实例有一个readyState属性,值为0表示正在连接到服务器,值为1表示打开了连接,值为2表示关闭了连接。另外还有以下三个事件: (1)open:在建立连接时触发。 (2)message:在从服务器接收到新事件时触发。 (3)error:在无法建立连接时触发。 一般用法如下: ~~~ source.onmessage = function(e){ var data = e.data; //处理数据 }; ~~~ 22. 要创建Web Socket,先实例一个WebSocket对象并传入要连接的URL: `var socket = new WebSocket("ws://www.example.com/server.php");` 注意,必须给WebSocket构造函数传入绝对URL。同源策略对Web Socket不实用,因此可以通过它打开任何站点的连接。至于是否会与某个域中的页面通信,则完全取决于服务器。 23.实例化了WebSocket对象后,浏览器会马上尝试创建连接。与XHR类似,WebSocket也有一个表示当前状态的readyState属性。 要关闭Web Socket连接,可以在任何时候调用close()方法。 24.Web Socket通过send()方法发送数据,通过message事件监听接收数据。 25.Web Socket常用于聊天室;在不能使用Web Socket的情况下,组合XHR和SSE也是能实现双向通信的。