JavaScript Ajax通信 总结

Ajax简介

JavaScript是单线程语言，在通信方面就有天生的劣势，例如实现异步通信。而Ajax就提供了标准的API用来实现数据的通信。Ajax的核心是XMLHttpRequest对象。通过该对象可以实现异步通信获取数据。

XHR对象

open方法

它接收三个参数，要发送的请求类型、请求的URL以及表示异步发送请求的布尔值。可以通过xhr对象的readystate属性来获取当前请求的状态：
0： 未初始化
1： 启动
2： 发送
3： 接收
4： 完成

HTTP头部信息

其中存在很多的默认头部信息，也可以进行自定义的请求头部。
但是在默认的情况下，HTTP浏览器都包含如下的头部信息：
Accept： 浏览器能够显示的字符集。
Accept-Charset: 浏览器能够显示的字符集。
Accept-Encoding: 浏览器能够处理的压缩编码。
Accept-Language: 浏览器当前设置的语言。
Connection: 浏览器与服务器之间的连接类型。
Cookie: 当期页面设置的任何Cookie。
Host: 发出请求的页面所在的域。
Referer: 发出请求的页面的URI。
User-Agent: 浏览器的用户代理字符串。
可使用setRequestHeader()方法设置自定义的头部请求
可使用getRequestHeader()方法设置自定义的头部请求

实现GET请求+POST请求

在open方法中可以接收三个参数，在get中接收到请求便可以处理数据，而向外发送数据POST需要先将数据（表单信息）进行序列化，然后打包发给目标地址。

function submitData(){
    var xhr = createXHR();        
    xhr.onreadystatechange = function(event){
        if (xhr.readyState == 4){
            if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                alert(xhr.responseText);
            } else {
                alert("Request was unsuccessful: " + xhr.status);
            }
        }
    };
    
    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));
}

跨域资源共享方式

IE：XDR 通过创建一种新的对象XDR XDomainRequest的方式实现安全可靠的跨域通信方式。
其它：XHR也可以实现同样的功能，但是对于跨域的对象有很多限制，比如说头部不能够被设置等等。
图像采用img标签的ping的方式
JSONP: JSON with padding, 指对应包含在函数中的JSON
Comet: 服务器向页面推送的一种技术，包括轮询和HTTP流，也包含一些其他的技术，解决了一些服务器向浏览器进行稳定通信的一些实际的网络需求,比如说美国大选的实时机票数据更新等等。

Ajax小结

对于HTTP通信或者资源共享来说，使用者没必要知道其中的原理（JavaScript），只要服务器和浏览器之间达到通信的目的便可。但是理解原理，可以在通信安全上有更多的考量，很多的API可以选择，ajax也因为他解决了异步通信的问题而非常实用。但是无论是在Jquery还是Vue.js框架内部，都已经集成了这些技术。在Web开发方面，我的理解便是，实用高效的框架，站在巨人的肩膀上，避免重复工作，创造更多的价值才是最重要的。