<!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>
