zoukankan      html  css  js  c++  java
  • ajax

    ajax是无需刷新页面就能够从服务器获取数据的一种方法,负责ajax运作的核心对象是XMLHttpRequest,同源策略是对XHR的一个主要约束,它为通信设置了“相同域名,端口,协议”的限制
     一.XHR的用法
    // 创建xml对象
    var xhr = new XMLHttpRequest();
    // 启动一个请求,false同步,true异步
    xhr.open(methods, url, false);
    // 发送请求,send()方法接收一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入 null,因为这个参数对有些浏览器来说是必需的
    xhr.send(null);
    /*xml响应属性
    responseText: 响应主体返回的文本
    status: 响应的HTTP状态
    statusText: HTTP状态说明
    状态代码为 304 表示请求的资源并没有被修改,可以直接使用浏览器中缓存的版本;当然,也意味着响应是有效的
    */
    // 同步响应
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
    alert(xhr.responseText);
    } else {
    alert("Request was unsuccessful: " + xhr.status);
    }
    /* 异步响应需要判断readyState 属性,该属性表示请求/响应过程的当前活动阶段
     0:未初始化。尚未调用 open()方法。
     1:启动。已经调用 open()方法,但尚未调用 send()方法。
     2:发送。已经调用 send()方法,但尚未接收到响应。
     3:接收。已经接收到部分响应数据。
     4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。*/
    var xhr = new XMLHttpRequest();
    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.setRequestHeader("MyHeader", "MyValue"); //设置请求头
    xhr.send(null);

    var myHeader = xhr.getResponseHeader("MyHeader"); //获取头部信息
    var allHeaders = xhr.getAllResponseHeaders();

    // 二.FormData 为序列化表单以及创建与表单格式相同的数据(用于通过 XHR 传输)提供了便利。下面的代码创建了一个 FormData 对象,并向其中添加了一些数据。
    var data = new FormData();
    data.append("name", "Nicholas");
    // 使用 FormData 的方便之处体现在不必明确地在 XHR 对象上设置请求头部。XHR 对象能够识别传入的数据类型是 FormData 的实例,并配置适当的头部信息。

    // 超时设定,IE8 为 XHR 对象添加了一个 timeout 属性,表示请求在等待响应多少毫秒之后就终止。在给timeout 设置一个数值后,如果在规定的时间内浏览器还没有接收到响应,那么就会触发 timeout 事件,进而会调用 ontimeout 事件处理程序。
    xhr.timeout = 1000; //将超时设置为 1 秒钟(仅适用于 IE8+)
    xhr.ontimeout = function () {
    alert("Request did not return in a second.");
    };

    // 三.跨域处理
    // 1.跨源资源共享:CORS 背后的基本思想,就是使用自定义的 HTTP 头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。
    //Ie浏览器实现跨域需要创建 XDomainRequest对象,其他浏览器在尝试打开不同来源的资源时,无需额外编写代码就可以触发这个行为。要请求位于另一个域中的资源,使用标准的 XHR 对象并在 open()方法中传入绝对 URL 即可

    /* 2.JSONP
    JSONP 由两部分组成:回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的JSON数据。
    http://freegeoip.net/json/?callback=handleResponse; JSONP是通过动态script来使用的
    function handleResponse(response){
    alert("You’re at IP address " + response.ip + ", which is in " +
    response.city + ", " + response.region_name);
    }
    var script = document.createElement("script");
    script.src = "http://freegeoip.net/json/?callback=handleResponse";
    document.body.insertBefore(script, document.body.firstChild);
    缺点:JSONP 是从其他域中加载代码执行。如果其他域不安全,很可能会在响应中夹带一些恶意代码
    要确定 JSONP 请求是否失败并不容易
    */
    /*
    3.Web Sockets
    */
  • 相关阅读:
    numpy基础篇-简单入门教程4
    杭电oj 多项式求和
    杭电oj 素数判定
    杭电oj 水仙花数
    杭电oj 求数列的和
    杭电oj 数值统计
    杭电oj 平方和与立方和
    杭电oj 求奇数的乘积
    杭电 oj 第几天?
    杭电 oj 成绩转换
  • 原文地址:https://www.cnblogs.com/wangpeiyuan/p/11233603.html
Copyright © 2011-2022 走看看