Ajax初体验

语法


创建 XHR 对象：
1
var xhr = new XMLHttpRequest();

低版本的IE需要使用以下语法：

1
var xhr = new ActiveXObject('Microsoft.XMLHTTP');

兼容写法：

1
2
3
4
5
6
7
 var xhr;
 function createXMLHttprequest() {
    if (window.ActiveXObject)
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    else if (window.XMLHttpRequest)
        xmlHttp = new XMLHttpRequest();
}

用法


使用 XHR 对象有两个方法：open() & send()

  • open() 接收三个参数：要发送的请求的类型（get、post等）、请求的 URL 和表示是否发送异步请求的布尔值（false为同步，true为异步。默认为true）

    默认情况下，JavaScript在发送 AJAX请求 时，URL 的域名必须和当前页面完全一致。
    完全一致的意思是，域名要相同（www.example.com和example.com不同），协议要相同（http和https不同），端口号要相同（默认是:80端口，它和:8080就不同）。

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


    以上代码会启动一个针对 example.php 的 GET 请求。有两点需要注意：

    1、URL 相对于执行代码的当前页面（也可使用绝对路径）。

    2、调用 open() 方法时并不会真正发送请求，而是启动一个请求待发送。

  • 若要发送一个特定的请求，必须调用 send()方法：

    • 1
    xhr.send(null);


    send() 方法接收一个参数，即作为请求主体发送的数据。若不需要发送数据，则必须传入 null，对于某些浏览器这个参数是必需的。

    若请求是同步的，则 javascript 会等到服务器响应后再继续执行。响应的数据会填充 XHR 对象的以下属性：

  • responseText:作为响应主体返回的文本

  • responseXML:若响应的内容类型为 “text/xml”或“application/xml”,这个属性将包含相应数据的 XML DOM 文档

  • status:响应的 HTTP 状态

  • statusText:HTTP 状态的说明

    • 可以将 HTTP 状态代码为 200/304 作为成功的标志。检查状态代码如下：
    1
    2
    3
    4
    5
    6
    if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    	alert(xhr.responseText);
    } 
    else {
    	alert("Request was unsuccessful:" + xhr.status);
    }


    注意：无论内容类型是什么，响应主体的内容都会保存到 responseText 属性中，非 XML 数据的 responseXML 属性的值为 null。

    若请求是异步的，javascript 会继续执行代码而不必等待响应。可以检测 XHR 对象的 readyStatus 属性来判断响应过程的当前活动阶段：

  • 0：未初始化。尚未调用 open() 方法

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

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

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

  • 4：完成。已经接收全部响应数据，可以在客户端使用。

    • 通过 onreadystatechange 事件处理程序来检测每次状态变化后 readyStatus 的值。每次 xmlhttprequest 对象的 readyState 发生改变都会触发 onreadystatechange 函数。
    onreadystatechange 属性存储一个当 readyState 发生改变时自动被调用的函数。（必须在 open() 方法之前指定这个函数才能确保跨浏览器兼容性）

    在 onreadystatechange 事件中，服务器响应准备的时候发生，当 readyState==4 和 status==200 的时候服务器响应准备。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
    	if (xhr.readyState == 4) {
    		if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    			document.getElementById("demo").innerHTML = xhr.responseText;
    		}
    		else {
    			alert("Request was unsuccessful:" + xhr.status);
    		}
    	}
    };
    xhr.open("GET", "ajax_info.txt", true);
    xhr.send();

    GET和POST请求的区别


    GET一般用于获取/查询资源信息，而POST一般用于更新资源信息。

    1.根据HTTP规范，GET用于信息获取，而且应该是安全的和幂等的。

    (1).所谓安全的意味着该操作用于获取信息而非修改信息。换句话说，GET请求一般不应产生副作用。就是说，它仅仅是获取资源信息，就像数据库查询一样，不会修改，增加数据，不会影响资源的状态。

    注意：这里安全的含义仅仅是指是非修改信息。

    GET请求的数据会附在 URL 之后（就是把数据放置在HTTP协议头中），以 ? 分割 URL 和传输数据，参数之间以 & 相连，如：login.action?name=hyddd&password=idontknow&verify=%E4%BD%A0%E5%A5%BD。如果数据是英文字母/数字，原样发送，如果是空格，转换为 + ，如果是中文/其他字符，则直接把字符串用 BASE64 加密，得出如：%E4%BD%A0%E5%A5%BD，其中 ％XX 中的 XX 为该符号以 16进制 表示的 ASCII。

    (2).幂等的意味着对同一URL的多个请求应该返回同样的结果。

    举个栗子，新闻站点的头版不断更新。虽然第二次请求会返回不同的一批新闻，该操作仍然被认为是安全的和幂等的，因为它总是返回当前的新闻。从根本上说，如果目标是当用户打开一个链接时，他可以确信从自身的角度来看没有改变资源即可。

    2.根据HTTP规范，POST表示可能修改变服务器上的资源的请求。

    继续引用上面的例子：还是以新闻网站为例，读者对新闻发表自己的评论应该通过POST实现，因为在评论提交后站点的资源已经不同了，或者说资源被修改了。