演示js非同步，同步請求
阿新 • • 發佈：2020-10-23
<!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);
</script>
</body>
</html>