演示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>