zoukankan      html  css  js  c++  java
  • Ajax

    Ajax 技术的核心是XMLHttpRequest 对象(简称XHR)
    XHR 为向服务器发送请求和解析服务器响应提供了流畅的
    接口。能够以异步方式从服务器取得更多信息,意味着用户单击后,可以不必刷新页面也能取得新数据。
    也就是说,可以使用XHR 对象取得新数据,然后再通过DOM 将新数据插入到页面中。
    虽然名
    字中包含XML 的成分,但Ajax 通信与数据格式无关;这种技术就是无须刷新页面即可从服务器取得数
    据,但不一定是XML 数据。
     
    21.1 XMLHttpRequest 对象
    var xhr = createXHR();
    由于其他浏览器中对XHR 的实现与IE 最早的实现是兼容的,因此就可以在所有浏览器中都以相同
    方式使用上面创建的xhr 对象。
     
    21.1.1 XHR的用法
    在使用 XHR 对象时,要调用的第一个方法是open(),它接受3 个参数:要发送的请求的类型
    ("get"、"post"等)、请求的URL 和表示是否异步发送请求的布尔值。
    xhr.open("get", "example.php", false);
     
    要发送特定的请求,必须像下面这样调用send()方法:
    xhr.open("get", "example.txt", false);
    xhr.send(null);
     
    由于这次请求是同步的,JavaScript 代码会等到服务器响应之后再继续执行。在收到响应后,响应
    的数据会自动填充XHR 对象的属性,相关的属性简介如下。
    1: responseText:作为响应主体被返回的文本。
    2: responseXML:如果响应的内容类型是"text/xml"或"application/xml",这个属性中将保
    存包含着响应数据的XML DOM 文档。
    3: status:响应的HTTP 状态。
    4: statusText:HTTP 状态的说明。
     
    发送异步请求
    可以检测XHR 对象的readyState 属性,该属性表示请求
    /响应过程的当前活动阶段。这个属性可取的值如下。
     0:未初始化。尚未调用open()方法。
     1:启动。已经调用open()方法,但尚未调用send()方法。
     2:发送。已经调用send()方法,但尚未接收到响应。
     3:接收。已经接收到部分响应数据。
     4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。
    readyState 属性的值由一个值变成另一个值,都会触发一次readystatechange 事件。可
    以利用这个事件来检测每次状态变化后readyState 的值
    通常我们只是关注值为4的阶段。
     
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
    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("get", "example.txt", true);
    xhr.send(null);
    另外,在接收到响应之前还可以调用abort()方法来取消异步请求,如下所示:
    xhr.abort();
    调用这个方法后,XHR 对象会停止触发事件,而且也不再允许访问任何与响应有关的对象属性。在
    终止请求之后,还应该对XHR 对象进行解引用操作。由于内存原因,不建议重用XHR 对象。
     
    21.1.3 GET请求
    GET 是最常见的请求类型,最常用于向服务器查询某些信息。
    常见的问题:查询字符串的格式有问题。查询字符串中每个参数的名
    称和值都必须使用encodeURIComponent()进行编码,然后才能放到URL 的末尾。
    xhr.open("get", "example.php?name1=value1&name2=value2", true);
    下面这个函数可以辅助向现有URL 的末尾添加查询字符串参数:
    function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" + encodeURIComponent(value);
    return url;
    }
    下面是使用这个函数来构建请求URL 的示例。
    var url = "example.php";
    //添加参数
    url = addURLParam(url, "name", "Nicholas");
    url = addURLParam(url, "book", "Professional JavaScript");
    //初始化请求
    xhr.open("get", url, false);
    在这里使用 addURLParam()函数可以确保查询字符串的格式良好,并可靠地用于XHR 对象。
    21.1.4 POST请求
    通常用于向服务器发送应该被保存的数据
    xhr.open("post", "example.php", true);
    发送 POST 请求的第二步就是向send()方法中传入某些数据
     
    21.2 XMLHttpRequest 2 级
    21.2.1 FormData
    现代 Web 应用中频繁使用的一项功能就是表单数据的序列化,XMLHttpRequest 2 级为此定义了
    FormData 类型。FormData 为序列化表单以及创建与表单格式相同的数据(用于通过XHR 传输)提供
    了便利。下面的代码创建了一个FormData 对象,并向其中添加了一些数据。
    var data = new FormData();
    data.append("name", "Nicholas");
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
    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);
    var form = document.getElementById("user-info");
    xhr.send(new FormData(form));
    使用FormData 的方便之处体现在不必明确地在XHR 对象上设置请求头部。XHR 对象能够识别传
    入的数据类型是FormData 的实例,并配置适当的头部信息。
     
    21.2.2 超时设定
    XHR 对象添加了一个timeout 属性,表示请求在等待响应多少毫秒之后就终止。在给
    timeout 设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发timeout 事
    件,进而会调用ontimeout 事件处理程序。
    var xhr = createXHR();
    xhr.onreadystatechange = function(){
    if (xhr.readyState == 4){
    try {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
    } else {
    alert("Request was unsuccessful: " + xhr.status);
    }
    } catch (ex){
    //假设由ontimeout 事件处理程序处理
    }
    }
    };
    xhr.open("get", "timeout.php", true);
    xhr.timeout = 1000; //将超时设置为1 秒钟(仅适用于IE8+)
    xhr.ontimeout = function(){
    alert("Request did not return in a second.");
    };
    xhr.send(null);
     
    21.2.3 overrideMimeType()方法
    用于重写XHR 响应的MIME 类型。
    通过调用overrideMimeType()方法,可以保
    证把响应当作XML 而非纯文本来处理。
    var xhr = createXHR();
    xhr.open("get", "text.php", true);
    xhr.overrideMimeType("text/xml");
    xhr.send(null);
     
    21.3 进度事件
    1: loadstart:在接收到响应数据的第一个字节时触发。
    2: progress:在接收响应期间持续不断地触发。
    3: error:在请求发生错误时触发。
    4: abort:在因为调用abort()方法而终止连接时触发。
    5: load:在接收到完整的响应数据时触发。
    6: loadend:在通信完成或者触发error、abort 或load 事件后触发。
     
    21.3.1 load事件
    var xhr = createXHR();
    xhr.onload = function(){
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    alert(xhr.responseText);
    } else {
    alert("Request was unsuccessful: " + xhr.status);
    }
    };
    xhr.open("get", "altevents.php", true);
    xhr.send(null);
     

    跨源资源共享

    IE对CORS的支持

    CORS(Cross-Origin Resource Sharing,跨源资源共享)是W3C的一个工作草案
    IE8中引入了XDR(XDomainRequest)类型,与XHR类似,但能实现安全可靠的跨域通信。与XHR不同:
    1、cookie不会随请求发送,也不会随请求返回
    2、只能设置头部信息中的Content-Type
    3、不能访问响应头部信息
    4、只支持GET和POST请求
    使用方法,也是创建一个XDomainRequest实例,调用open,调用send,open方法只接受两个参数,请求类型,URL。所有请求都是异步。

    其他浏览器对CORS的支持

    Firefox3.5+,Safari4+,Chrome,ios版Safari,Android平台中的WebKit都通过XHR对象实现了对CORS的原生支持。
    限制:
    1、不能使用setRequestHeader
    2、不能发送和接收cookie
    3、调用getAllResponseHeaders会返回空字符串
     
    以下还有一些省略的地方,我会尽快补上
  • 相关阅读:
    【Python】错误、调试和测试
    【c++ primer, 5e】函数指针
    【英语学习】【17/4/1】
    【c++ primer, 5e】函数匹配
    FIRST GAME.
    【Thinking in Java, 4e】访问权限控制
    【c++ primer, 5e】特殊用途语言特性
    Top-Down笔记 #01# 计算机网络概述
    NHibernate之映射文件配置说明
    Web Service 部署到IIS服务器
  • 原文地址:https://www.cnblogs.com/gavinzzh-firstday/p/5353082.html
Copyright © 2011-2022 走看看