关于Ajax知识的总结三

Get 请求  实例链接

---

• 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);
//说明：示例中，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 请求使用 表单编码 的方式来发送数据的关键步骤：

1. 对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：像 GET 请求那样拼接为 名/值 对的形式；
2. 将"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编码 的方式来发送数据的关键步骤：

1. "Content-Type"请求头的值需要为"application/json"；
2. 对请求主体进行序列化，在 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 常见的请求方式有以下几种：

1. $.ajax(url, options)；
2. $.get(url, data, callback, dataType)；
3. $.post(url, data, callback, dataType)；
4. $.getJSON(url, data, callback)；
5. $.getScript(url, callback)；
6. 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);			
})