Get 请求 实例链接
- GET 请求的数据传递:
GET 请求一般用于信息获取,它没有请求主体,而是使用 URL 传递参数(即:传递数据给后台);
GET 传递参数的方式,分两步:
- 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:由一对对 "名称=值" 组成(称为:名/值对),每一对之间用 "&"拼接,如 "name=value&name=value&...&name=value";
- 由于 名/值对 会附加在 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); //说明:示例中,ajaxGet()是对 Ajax 的 GET 请求稍微封装了一下
- 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 请求一般用于修改服务器上的资源,它需要发送一个请求主体,客户端传递给服务器的数据就包含在这个请求主体中。
POST 请求使用 表单编码 的方式来发送数据的关键步骤:
- 对所需发送的数据(具有名称和值)执行普通的 URL 编码,即:像 GET 请求那样拼接为 名/值 对的形式;
- 将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded";
// 获取用户输入的表单数据 var country = document.getElementById("country").value, city = document.getElementById("city").value; // 将数据拼接为 名/值对 的形式 var query = "country=" + country + "&city=" + city; var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return; // 如果http响应不成功直接返回 if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){ // 获取到响应数据,可执行一些请求成功的回调函数 alert( success); }else { alert( error); } } // 指定 POST 请求 xhr.open("POST", "/statics/demosource/demo_post_json.php"); // 设置请求主体的编码方法 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // 发送请求主体(数据) xhr.send(query);
- JSON 编码的 POST 请求:
JSON 是一种轻量级的前后端数据交换格式,直接使用 JSON.stringify 原生 API 即可实现 JSON 编码,比表单编码的方式更加快捷。
POST 请求使用 JSON编码 的方式来发送数据的关键步骤:
- "Content-Type"请求头的值需要为"application/json";
- 对请求主体进行序列化,在 JavaScript 中可使用JSON.stringify完成这步操作。
// 获取用户输入的表单数据 var country = document.getElementById("country").value, city = document.getElementById("city").value; // 将数据转换为 JavaScript 对象 var data = { country : country, city : city } var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { if (xhr.readyState !== 4) return; // 如果http响应不成功直接返回 if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){ // 获取到响应数据,可执行一些请求成功的回调函数 alert( success); }else { alert( error); } } // 指定 POST 请求 xhr.open("POST", "/statics/demosource/demo_json_data.php"); // 设置请求主体的编码方法 xhr.setRequestHeader("Content-Type", "application/json"); // 编码请求主体并发送 xhr.send(JSON.stringify(data));
- GET请求 与 POST请求 对比:
GET 请求: | POST 请求: |
一般用于信息获取:通过发送一个请求来取得服务器上的资源; | 一般用于修改服务器上的资源:向指定资源提交数据,后端处理请求后往往会导致服务器 建立新的资源 或 修改已有资源; |
数据包含在 URL 地址中; | 数据包含在请求主体中; |
数据量受 URL 的长度限制; | 没有数据量限制,可在服务器的配置里进行限制; |
不安全:浏览器的 URL 可以直接看到,明文传输; | 只能是比 GET 安全,实际上也是不安全的:可通过开发者工具或者抓包看到,明文传输 |
GET 请求会被缓存; | POST 请求不会缓存; |
GET 没有请求主体,请求速度相对较快。 | POST 相对稳定、可靠:可发送包含未知字符的内容。 |
容易产生的误区:HTTP 协议里并没有限制 GET 和 POST 的长度,GET 的最大长度限制是因为浏览器和Web 服务器对 URL 的长度限制,不同的浏览器和 Web 服务器限制的最大长度不一样,它们所限制的是整个 URL 的长度,而不仅仅是查询参数的数据长度。
jQuery 中的 Ajax
- jQuery 中的 Ajax
jQuery 是一个 JavaScript 工具库,它封装了 JavaScript 常用的功能代码;
jQuery 中,Ajax 常见的请求方式有以下几种:
- $.ajax(url, options);
- $.get(url, data, callback, dataType);
- $.post(url, data, callback, dataType);
- $.getJSON(url, data, callback);
- $.getScript(url, callback);
- jQuery元素.load(url, data, callback);
- 使用jQuery 发起 ajax 请求
$.ajax("/statics/demosource/demo_get_json.php", { //请求类型 type: "GET", //要发送的数据 data: { country: country, city: city }, //数据格式 dataType: "json", //请求成功后执行 success: function (res) { // res为响应成功返回的数据 oIpt_country.innerText = res.params.country; oIpt_city.innerText = res.params.city; }, //请求失败后执行 error: function (res) { // 这里的res为响应失败返回的数据 alert("请求失败:" + res.status); } complete: function (xhr) { // 不管是成功还是失败都是完成,都会执行这个 complete 函数 console.log('complete', xhr) } });
- Ajax 的替代品:fetch:
Fetch API 是随 ES6 发展而出现的一个 JavaScript 原生接口,与 Ajax 一样允许开发者异步发起 HTTP 请求,但却以更加简单明了的调用方式、基于 Promise 的数据处理方式被称作是 Ajax 的替代品。
fetch("/statics/demosource/demo_json_data.php", { method: "POST", header: new Headers({"Content-Type" : "application/json"}), body: JSON.stringify(data) }).then(function (res) { return res.ok ? res.json() : Promise.reject(res); }).then(function (data) { oIpt_country.innerText = data.country; oIpt_city.innerText = data.city; }).catch(function (res) { alert("请求失败:" + res.status); })