AJAX

Posted 把番茄沉入海底

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了AJAX相关的知识,希望对你有一定的参考价值。

Ajax简介

Ajax 的全称是 Asynchronous javascript and XML(异步的 JavaScript 和 XML),是一种用于创建动态网页的技术。

Ajax 是一种使用现有标准的新方法,通过与服务器进行少量的数据交换,Ajax 可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

Ajax的优缺点

Ajax 的优点:

  • 最大的优点是页面无刷新更新,用户的体验非常好
  • 使用异步方式与服务器通信,具有更迅速的响应能力
  • 可以将一些服务器工作转移到客户端,利用客户端资源来处理,减轻服务器和带宽的压力,节约空间和带宽租用成本
  • 技术标准化,并被浏览器广泛支持,不需要下载插件或者小程序

Ajax 的缺点:

  • Ajax 不支持浏览器 back 返回按钮
  • 有安全问题,Ajax 暴露了与服务器交互的细节
  • 对搜索引擎不友好
  • 破坏了程序的异常机制
  • 不容易调试

Ajax工作原理

在客户端(如浏览器)和服务器之间加了一个中间层:Ajax 引擎。由 Ajax 引擎独立向服务器请求数据,前端获取到 Ajax 返回的数据后,可以使用新数据来更新页面、或进行其它操作,使用户请求和服务器响应异步化,从而保证了在不刷新页面的前提下可以局部更新网页内容。

使用new XMLHttpRequest()命令来创建一个Ajax实例对象。

XMLHttpRequest类

Ajax 技术的核心是XMLHttpRequest类,简称 XHR,它允许脚本异步调用 HTTP API。

XMLHttpRequest 的兼容

在 IE7 之前的版本(IE5、IE6)并不支持XMLHttpRequest()构造函数,它们需要使用ActiveX对象进行模拟:

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest的兼容写法可以是这样的:

// 三元表达式,其中问号前面的是条件,当条件是正确的就执行冒号前面的语句,否则执行冒号后面的语句
var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

Ajax请求进程

创建 XMLHttpRequest 对象之后,发起 HTTP 请求的下一步是调用 XMLHttpRequest 对象的open方法,指定 HTTP 请求的两个必需部分:请求方法 和 URL

var xhr = new XMLHttpRequest();
// 其中请求方法为大写
xhr.open("GET", "/statics/demosource/demo_get_json.php");
//第一个参数用于指定 HTTP 请求的方法,不区分大小写;
//该参数可取的值包括:"GET"、"POST"、"HEAD"、"PUT"、"OPTIONS"、"DELETE",其中,"GET" 和 "POST" 是得到广泛支持的请求方法;
//第二个参数用于指定 HTTP 请求的 URL 地址,可以是 绝对URL 或 相对URL;
//第三个参数是可选的,可用布尔值指定脚本是否以异步的方式调用此次 Ajax 请求;默认为true。

setRequestHeader 设置请求头

如果 HTTP 请求需要设置请求头,那么调用 open 方法之后的下个步骤就是设置它,使用的方法是:setRequestHeader

var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 在 open 方法之后设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//xhr.setRequestHeader(name, value)
//name:请求头名称。
//value:请求头的值。

send 发送请求主体

使用 XMLHttpRequest 发起 HTTP 请求的最后一步是指定可选的请求主体、并向服务器发送它,使用的方法是:send

  • 示例1:GET 请求
var xhr = new XMLHttpRequest();
xhr.open("GET", "/statics/demosource/demo_get_json.php");

// 无请求主体
xhr.send(null);
//由于 GET 请求 绝对 没有请求主体,所以在调用 send 方法时可以传递 null 或 省略这个参数;
  • 示例2:POST 请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 把 msg 作为请求主体发送
xhr.send(msg);
//POST 请求通常都拥有请求主体,可在 send 方法中指定它;
//POST 请求的请求主体,应该匹配setRequestHeader方法所指定的 "Content-Type" 头。

Ajax取得响应

一个完整的 HTTP 响应由 状态码、响应头和 响应主体 组成,这三者都可以通过XMLHttpRequest对象提供的属性和方法获取。

为了能够在 HTTP 响应准备就绪时得到通知,必须监听XMLHttpRequest对象上的readystatechange事件。但为了理解这个事件类型,需要先了解下readyState属性,因为该事件监听的是readyState属性值的改变。

readystatechange 事件的触发时机是在 readyState 属性值发生改变时触发

readyState 属性

readyState属性是一个整数,它的值代表了不同的 HTTP 请求状态。

readyState属性值的含义:

  • 0:初始值,表示请求未初始化,open方法尚未调用
  • 1:启动请求,open 方法已经调用,但尚未调用 send 方法
  • 2:请求发送,已经调用 send 方法,但尚未接收到响应
  • 3:接收响应,已经接受到部分响应数据,主要是响应头
  • 4:HTTP 响应完成,已经接收到全部响应数据,而且可以在客户端使用

每次readyState属性值的改变都会触发readystatechange事件,但只有readyState属性值为 4 时的状态才表示 HTTP 的响应准备就绪。

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        // HTTP响应完成
    }
};

xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();
//readyState的属性值只代表此时的 HTTP 请求处于哪个阶段:是发送了请求还是未发送请求,是只接收到了响应头还是响应完成;
//"响应完成" 只代表 HTTP 请求结束,至于服务器的响应状态:是请求成功还是请求错误,又或者是服务器错误,需要通过 HTTP 状态码判断,它存储在XMLhttpRequest的status属性上; 

status 属性

status属性会以数字的形式保存服务器响应的 HTTP 状态码,诸如使用最频繁的 "200" 表示请求成功,"404" 表示 URL 不能匹配服务器上的任何资源。

HTTP 状态码是用来表示网页服务器响应状态的 3 位数字代码,所有状态码的第一个数字代表了响应的五种状态之一:

  • 1xx:临时响应
  • 2xx:成功
  • 3xx:重定向
  • 4xx:请求错误
  • 5xx:服务器错误

示例:Ajax 请求失败

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 获取到响应数据,可执行一些请求成功的回调函数
    } else {
        alert("请求失败,HTTP 状态码为:" + xhr.status);
    }
};

xhr.open("GET", "/statics/demosource/404.txt");
xhr.send();

结果为:

responseText 属性

responseText属性以字符串的形式存储了响应主体,即:服务器的响应数据。

示例:响应html文本

xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) return;
                if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
                    oView.innerHTML = xhr.responseText;
                }
            };

示例:响应 JSON 数据

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        // 使用JSON.parse把 响应数据转换为json数据
        var res = JSON.parse(xhr.responseText);
        // 将响应数据中的date属性赋值给oTime做内容
        oTime.innerText = res.date;
    }
};
  • responseText:无论返回的数据类型是什么,响应主体的内容都会保存在responseText属性中
  • responseXML:只对 XML 数据有效,若响应主体是非 XML 数据,该属性值为null
  • response:通常配合responseType使用。若指定了XMLHttpRequest实例的responseType属性,则将响应内容转换为该属性所指定的格式并返回,否则按默认情况处理

abort 中止请求

若 HTTP 请求的时间超出预期,可以调用XMLHttpRequest对象上的abort方法来中止 HTTP 请求。

示例:实现超时

var xhr = new XMLHttpRequest();
var timer = null;    // 用于存储定时器标识

xhr.onreadystatechange = function () {
    if (xhr.readyState !== 4) return;
    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
        clearTimeout(timer);    // 未超时则取消定时器
    }
};

xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();

// 2秒后中止此次 GET 请求
timer = setTimeout(function(){
    xhr.abort();
}, 2000)

GET 请求

GET 请求一般用于信息获取,它没有请求主体,而是使用 URL 传递参数(即:传递数据给后台)。

GET 传递参数的方式分两步:

  1. 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:由一对对 "名称=值" 组成(称为:名/值对),每一对之间用 "&" 拼接,如 "name=value&name=value&...&name=value";
  2. 由于 名/值对 会附加在 URL 地址后面,因此在这串字符参数的最前面需要添加个 "?",表示 URL 的 查询参数 开始。

示例:传递表单数据

// GET请求的后端接口
var url = "/statics/demosource/demo_get_json.php";

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将需要传递的参数拼接为 "名称=值" 对的形式
var query = "country=" + country + "&city=" + city;

// 在 query 前面添加个 "?",再拼接后端接口
var queryURL = url + "?" + query;

// 发起GET请求:使用拼接好的 queryURL
ajaxGet(queryURL);

GET 请求的缓存问题

对于 GET 请求,请求的结果会被浏览器缓存,特别是在 IE 浏览器下。这时,如果 GET 请求的 URL 不变,那么请求的结果就是浏览器的缓存(也就是上次 GET 请求的结果)。

解决 GET 请求缓存问题的办法是:实时改变 GET 请求的 URL,只要 URL 不同,就不会取到浏览器的缓存结果。

具体做法是:在 URL 末尾添加时间戳参数。由于时间戳可以精确到毫秒,从而保证了每次发起 GET 请求的时间不同,达到实时改变请求 URL 的目的。

var url = "/statics/demosource/demo_get_json.php";

// 在请求参数的最后附加时间戳参数 t
var query = "user=" + user + "&pwd=" + pwd + "&t=" + new Date().getTime();

var queryURL = url + "?" + query;
// ajax_get为自己封装的请求对象,不是固定用法
ajax_get(queryURL);

POST 请求

POST 请求一般用于修改服务器上的资源,它需要发送一个请求主体,客户端传递给服务器的数据就包含在这个请求主体中。

POST 请求使用 表单编码 的方式来发送数据的关键步骤:

  1. 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:像 GET 请求那样拼接为 名/值 对的形式;
  2. "Content-Type"请求头的值设置为"application/x-www-form-urlencoded"

"Content-Type"请求头用于设置请求主体的编码格式。

示例:

// 获取用户输入的表单数据
var country = document.getElementById("country").value,
    city = document.getElementById("city").value;

// 将数据拼接为 名/值对 的形式
var query = "country=" + country + "&city=" + city;

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    // ... ... 省略事件处理程序
}

// 指定 POST 请求
xhr.open("POST", "/statics/demosource/demo_post_json.php");

// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

// 发送请求主体(数据)
xhr.send(query);

"表单编码" 只是对请求主体的一种编码方式,并不是发送 HTML 表单数据所特有的。同样的,数据往往都直接来自一个 JavaScript 对象,只需对 JavaScript 对象执行 URL 编码

以上是关于AJAX的主要内容,如果未能解决你的问题,请参考以下文章

Javascript代码片段在drupal中不起作用

前端面试题之手写promise

Ajax 片段元标记 - Googlebot 未读取页面内容

执行AJAX返回HTML片段中的JavaScript脚本

javascript AJAX片段

Spring MVC 3.2 Thymeleaf Ajax 片段