演示js异步，同步请求，响应解码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
/*
1.指定请求--open(参数一，url); 参数一是字符串，不区分大小写，
2.发送--request.send(null); GET请求绝对没有主体，所以应该传递null或省略这个参数，POST请求通常拥有主体
*/
/* 一个完成的HTTP响应，由 状态码，响应头集合，响应主体组成 */
// 发出一个http get请求，来获取指定url的内容---异步
// 当响应成功到达，验证他是否是纯文本
// 如果是，把他传递给指定回调函数
function getText(url,callback){
var request = new XMLHttpRequest(); // 创建新请求
request.open("GET",url); // 指定待获取的URL
request.onreadystatechange = function() { // 为了及时得到相应通知，监听onreadystatechange事件
// readyState代表请求状态4-相应已完成
if(request.readyState === 4 && request.status === 200){
var type = request.getResponseHeader("Content-Type");
console.log(type); // application/json
callback(request.responseText); // 把相应主体传递给回调函数
if(type.match(/^text/)){ // 确保相应是文本---可以不要
callback(request.responseText); // 把相应主体传递给回调函数
}
}
};
request.send(null); // 立即发送请求
}
function fasong(data){
console.log('把相应主体传递给回调函数')
console.log(data); // {"code":0,"msg":"success","data":""}
}
// getText('http://****:5003/renren-admin/接口?userid=23',fasong);
// 同步响应--不建议-因为客户端js是单线程的，当send()方法阻塞时，他通常会导致整个浏览器UI冻结，如果连接的服务器响应慢，那么用户的浏览器将冻结。
// 发起同步HTTP GET请求以获取指定url的内容
function getTextSync(url){
var request = new XMLHttpRequest(); // 创建新请求
request.open("GET",url,false); // 传递false实现同步
request.send(); // 立即发送请求
// 如果请求不是200 OK,就报错
if(request.status!==200) throw new Error(request.statusText);
// 如果类型报错
var type = request.getResponseHeader("Content-Type");
// if(!type.match(/^text/))
// throw new Error("Expected textual response;got:"+type);
return request.responseText;
}
let jieguo = getTextSync('http://******:5003/renren-admin/接口?userid=23');
console.log(jieguo);
// 相应解码
// 当相应到达时，把他一解析后的XML Document 对象，解析后的JSON对象或字符串形式传递给回调函数
function get(url,callback){
var request = new XMLHttpRequest();
request.open("GET",url);
request.onreadystatechange = function(){
if(request.readyState === 4 && request.status === 200){
// 获取响应类型
var type = request.getResponseHeader("Content-Type");
console.log(type);
if(type.indexOf("xml") !==-1&&request.responseXML){
callback(request.responseXML); // Document对象响应
}else if(type === "application/json"){
callback(JSON.parse(request.responseText)); // JSON响应
}else{
callback(request.responseText); // 字符串响应
}
}
};
request.send(); // 立即发送请求
}
function callbackGet(data) {
console.log(data);
}
get('http://****/renren-admin/****?userid=23',callbackGet)
/*
默认情况下，HTML表单通过POST方法发送给服务器，普通的url编码（使用16进制转义码替换特殊字符）
*/
// 用于HTTP请求的编码对象
/* 编码对象的属性
如果他们是来自HTML表单的名/值对，使用application/x-www-form-urlencoded格式
*/
function encodeFormData(data){
if(!data) return ""; // 判断是空， 一直返回字符串
var pairs = []; // 为了保存名=值对
for(var name in data){ // 循环-为每个名字
if(!data.hasOwnProperty(name)) continue; // 跳过继承属性
if(typeof data[name] === "function") continue; // 跳过方法
var value = data[name].toString(); // 把值转换为字符串
name = encodeURIComponent(name.replace("%20","+")); // 编码名字
value = encodeURIComponent(value.replace("%20","+")); // 编码值
pairs.push(name + "=" + value); // 记住名=值对
}
return pairs.join("&"); // 返回使用
}
// 使用表单编码数据发起一个http POST请求
function postData(url,data,callback){
var request = new XMLHttpRequest();
request.open("POST",url);
request.onreadystatechange = function(){
if(request.readyState === 4 && callback) // 当响应
callback(request); // 调用回调函数
};
request.setRequestHeader("Content-Type", // 设置Content-Type
"application/x-www-form-urlencoded");
request.send(encodeFormData(data)); // 发送表单编码的数据
}
/*
表单数据
{
find: "pizza",
zipcode: 02134,
radius: "1km"
}
*/
/* GET请求从来没有主体，所以需要发送给服务器的表单编码数据“负载”，要作为URL(后跟一个问号)的查询部分 */
// 使用表单编码数据发起发起GET请求
function getData(url,data,callback) {
var request = new XMLHttpRequest();
request.open("GET",url+"?"+encodeFormData(data));
request.onreadystatechange = function(){
if(request.readyState === 4 && callback) callback(request);
};
request.send();
}
</script> </body> </html>
