Ajax和Comet技术总结

var xhr = new XMLHttpRequest()
xhr.open("get", "/api/data", true)
xhr.send(null)

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
 }
}
xhr.open("get", "/api/data", true)
xhr.send(null)

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.status, xhr.responseText)
  console.log(xhr.getResponseHeader('SomeKey'))
  console.log(xhr.getAllResponseHeaders())
 }
}
xhr.open("get", "/api/data", true)
xhr.setRequestHeader("SomeKey", "SomeValue")
xhr.send(null)

var form = document.getElementById('myForm')
var data = new FormData(form)
data.append('someKey', 'someValue')
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('post', '/api/upload', true)
xhr.send(data)

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
 if (xhr.readyState === 4) {
  console.log(xhr.responseText)
 }
}
xhr.open('get', 'http://www.otherserver.com/api/data', true)
xhr.send(null)

function handler(res) {
 console.log(res)
}
var script = document.createElement('script')
script.src = 'http://www.otherserver.com/api/data/"htmlcode">

var source = new EventSource("/api/events")
source.onmessage = function(event) {
 console.log(event.data)
}


如上面代码所示，要向服务器预定事件流获取服务器发送的数据，首先创建EventSource对象，然后在message事件触发的时候进行处理。服务器发送的数据以字符串形式保存在event.data中。EventSource对象会保持与服务器的活动连接，如果中间断开会重新连接，如果要真正地断开连接可以通过调用close()方法来实现。EventSource的message事件会在从服务器收到新事件的时候触发，除了message事件之外它还有另外2个事件open和error，open事件在建立连接的时候触发，error事件在无法建立连接的时候触发。
Web Sockets
Web Sockets是一种与服务器进行全双工双向通信的通道。Web Sockets不适用HTTP协议，而前面说的Ajax和Comet都是使用HTTP协议。篇幅关系本文对Web Sockets不作讨论。
总结
Ajax实现在不加载页面的情况下向服务器请求数据，提升网页的用户体验。实现Ajax技术的XHR会遇到跨域安全策略的限制，通过CORS解决跨域问题需要浏览器和服务器两端的配合。JSONP是一种实现跨域访问的”小技巧“但也是存在一些问题。Comet对Ajax进行了拓展，让服务器能够实时向浏览器推送数据，但从实现来看不管是轮询还是HTTP流，都是浏览器先向服务器发起请求连接。Web Sockets的全双工双向通信也有其特色，以后有时间可以继续了解。
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！