标签：htm mamicode name hang 构造 传递 === 工作 必须
Ajax 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建动态网页的技术。
Ajax 是一种使用现有标准的新方法，通过与服务器进行少量的数据交换，Ajax 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
Ajax 的优点：
Ajax 的缺点：
在客户端（如浏览器）和服务器之间加了一个中间层：Ajax 引擎。由 Ajax 引擎独立向服务器请求数据，前端获取到 Ajax 返回的数据后，可以使用新数据来更新页面、或进行其它操作，使用户请求和服务器响应异步化，从而保证了在不刷新页面的前提下可以局部更新网页内容。
使用new XMLHttpRequest()命令来创建一个Ajax实例对象。
Ajax 技术的核心是XMLHttpRequest类，简称 XHR，它允许脚本异步调用 HTTP API。
在 IE7 之前的版本（IE5、IE6）并不支持XMLHttpRequest()构造函数，它们需要使用ActiveX对象进行模拟：
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest的兼容写法可以是这样的：
// 三元表达式,其中问号前面的是条件,当条件是正确的就执行冒号前面的语句,否则执行冒号后面的语句 var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
创建 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。
如果 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：请求头的值。
使用 XMLHttpRequest 发起 HTTP 请求的最后一步是指定可选的请求主体、并向服务器发送它，使用的方法是：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" 头。
一个完整的 HTTP 响应由 状态码、响应头和 响应主体 组成，这三者都可以通过XMLHttpRequest对象提供的属性和方法获取。
为了能够在 HTTP 响应准备就绪时得到通知，必须监听XMLHttpRequest对象上的readystatechange事件。但为了理解这个事件类型，需要先了解下readyState属性，因为该事件监听的是readyState属性值的改变。
readystatechange 事件的触发时机是在 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属性会以数字的形式保存服务器响应的 HTTP 状态码，诸如使用最频繁的 "200" 表示请求成功，"404" 表示 URL 不能匹配服务器上的任何资源。
HTTP 状态码是用来表示网页服务器响应状态的 3 位数字代码，所有状态码的第一个数字代表了响应的五种状态之一：
示例：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属性以字符串的形式存储了响应主体，即：服务器的响应数据。
示例：响应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属性中nullresponseType使用。若指定了XMLHttpRequest实例的responseType属性，则将响应内容转换为该属性所指定的格式并返回，否则按默认情况处理若 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 请求一般用于信息获取，它没有请求主体，而是使用 URL 传递参数（即：传递数据给后台）。
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 请求，请求的结果会被浏览器缓存，特别是在 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 请求使用 表单编码 的方式来发送数据的关键步骤：
"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 编码
标签：htm mamicode name hang 构造 传递 === 工作 必须
原文地址：https://www.cnblogs.com/449house/p/12114013.html
