AJAX
2021-05-04 14:29
标签：htm mamicode name hang 构造 传递 === 工作 必须 Ajax 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建动态网页的技术。 Ajax 是一种使用现有标准的新方法，通过与服务器进行少量的数据交换，Ajax 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 Ajax 的优点： Ajax 的缺点： 在客户端（如浏览器）和服务器之间加了一个中间层：Ajax 引擎。由 Ajax 引擎独立向服务器请求数据，前端获取到 Ajax 返回的数据后，可以使用新数据来更新页面、或进行其它操作，使用户请求和服务器响应异步化，从而保证了在不刷新页面的前提下可以局部更新网页内容。 使用new XMLHttpRequest()命令来创建一个Ajax实例对象。 Ajax 技术的核心是 在 IE7 之前的版本（IE5、IE6）并不支持 创建 XMLHttpRequest 对象之后，发起 HTTP 请求的下一步是调用 XMLHttpRequest 对象的 如果 HTTP 请求需要设置请求头，那么调用 open 方法之后的下个步骤就是设置它，使用的方法是： 使用 XMLHttpRequest 发起 HTTP 请求的最后一步是指定可选的请求主体、并向服务器发送它，使用的方法是： 一个完整的 HTTP 响应由 状态码、响应头和 响应主体 组成，这三者都可以通过 为了能够在 HTTP 响应准备就绪时得到通知，必须监听 readystatechange 事件的触发时机是在 readyState 属性值发生改变时触发 每次 HTTP 状态码是用来表示网页服务器响应状态的 3 位数字代码，所有状态码的第一个数字代表了响应的五种状态之一： 示例：Ajax 请求失败 结果为： 示例：响应HTML文本 示例：响应 JSON 数据 若 HTTP 请求的时间超出预期，可以调用 示例：实现超时 GET 请求一般用于信息获取，它没有请求主体，而是使用 URL 传递参数（即：传递数据给后台）。 GET 传递参数的方式分两步： 示例:传递表单数据 对于 GET 请求，请求的结果会被浏览器缓存，特别是在 IE 浏览器下。这时，如果 GET 请求的 URL 不变，那么请求的结果就是浏览器的缓存（也就是上次 GET 请求的结果）。 解决 GET 请求缓存问题的办法是：实时改变 GET 请求的 URL，只要 URL 不同，就不会取到浏览器的缓存结果。 具体做法是：在 URL 末尾添加时间戳参数。由于时间戳可以精确到毫秒，从而保证了每次发起 GET 请求的时间不同，达到实时改变请求 URL 的目的。 POST 请求一般用于修改服务器上的资源，它需要发送一个请求主体，客户端传递给服务器的数据就包含在这个请求主体中。 POST 请求使用 表单编码 的方式来发送数据的关键步骤： 示例： "表单编码" 只是对请求主体的一种编码方式，并不是发送 HTML 表单数据所特有的。同样的，数据往往都直接来自一个 JavaScript 对象，只需对 JavaScript 对象执行 URL 编码 AJAX 标签：htm mamicode name hang 构造 传递 === 工作 必须 原文地址：https://www.cnblogs.com/449house/p/12114013.htmlAjax简介
Ajax的优缺点
Ajax工作原理
XMLHttpRequest类
XMLHttpRequest类，简称 XHR，它允许脚本异步调用 HTTP API。XMLHttpRequest 的兼容
XMLHttpRequest()构造函数，它们需要使用ActiveX对象进行模拟：var xhr = new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest的兼容写法可以是这样的：// 三元表达式,其中问号前面的是条件,当条件是正确的就执行冒号前面的语句,否则执行冒号后面的语句
var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
Ajax请求进程
open方法，指定 HTTP 请求的两个必需部分：请求方法 和 URLvar 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 设置请求头
setRequestHeadervar 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 发送请求主体
send
var xhr = new XMLHttpRequest();
xhr.open("GET", "/statics/demosource/demo_get_json.php");
// 无请求主体
xhr.send(null);
//由于 GET 请求 绝对 没有请求主体，所以在调用 send 方法时可以传递 null 或 省略这个参数；
var xhr = new XMLHttpRequest();
xhr.open("POST", "/statics/demosource/demo_post_json.php");
// 把 msg 作为请求主体发送
xhr.send(msg);
//POST 请求通常都拥有请求主体，可在 send 方法中指定它；
//POST 请求的请求主体，应该匹配setRequestHeader方法所指定的 "Content-Type" 头。
Ajax取得响应
XMLHttpRequest对象提供的属性和方法获取。XMLHttpRequest对象上的readystatechange事件。但为了理解这个事件类型，需要先了解下readyState属性，因为该事件监听的是readyState属性值的改变。readyState 属性
readyState属性是一个整数，它的值代表了不同的 HTTP 请求状态。readyState属性值的含义：
open方法尚未调用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 不能匹配服务器上的任何资源。
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status ) {
// 获取到响应数据，可执行一些请求成功的回调函数
} else {
alert("请求失败，HTTP 状态码为：" + xhr.status);
}
};
xhr.open("GET", "/statics/demosource/404.txt");
xhr.send();
responseText 属性
responseText属性以字符串的形式存储了响应主体，即：服务器的响应数据。xhr.onreadystatechange = function () {
if (xhr.readyState === 4) return;
if (xhr.status >= 200 && xhr.status ) {
oView.innerHTML = xhr.responseText;
}
};
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status ) {
// 使用JSON.parse把 响应数据转换为json数据
var res = JSON.parse(xhr.responseText);
// 将响应数据中的date属性赋值给oTime做内容
oTime.innerText = res.date;
}
};
responseText属性中null
responseType使用。若指定了XMLHttpRequest实例的responseType属性，则将响应内容转换为该属性所指定的格式并返回，否则按默认情况处理abort 中止请求
XMLHttpRequest对象上的abort方法来中止 HTTP 请求。var xhr = new XMLHttpRequest();
var timer = null; // 用于存储定时器标识
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) return;
if (xhr.status >= 200 && xhr.status ) {
clearTimeout(timer); // 未超时则取消定时器
}
};
xhr.open("GET", "/statics/demosource/demo_get_json.php");
xhr.send();
// 2秒后中止此次 GET 请求
timer = setTimeout(function(){
xhr.abort();
}, 2000)
GET 请求
// 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 请求的缓存问题
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 请求
"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);