var apiURL = 'https://api.github.com/repos/vuejs/vue/commits?per_page=3&sha=';
var currentBranch='master';
var commits= null;
function fetchData() {
var xhr = new XMLHttpRequest()
var self = this
xhr.open('GET', apiURL + self.currentBranch)
xhr.onload = function () {
self.commits = JSON.parse(xhr.responseText)
console.log(self.commits[0].html_url)
}
xhr.send()
}
function fetchDataPost(){
// unload 時盡量使用同步 AJAX 請求
xhr("POST",{
url: location.href,
sync: true,
handleAs: "text",
content:{
param1:1
},
load:function(result){
console.log(result);
}
});
};
async function Fetch({url, data, method, config}) {
method = method.toUpperCase();
//window fetch方法
if (window.fetch) {
let requestConfig = {
credentials: 'include',
method: method,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors",
cache: "force-cache"
};
function assignConfig(targetConfig, sourceConfig) {
if (sourceConfig) {
Object.keys(sourceConfig).forEach(key => {
if (sourceConfig[key]) {
if (typeof sourceConfig[key] !== "object") {
if (sourceConfig[key]) Object.assign(targetConfig, sourceConfig)
} else {
assignConfig(targetConfig[key], sourceConfig[key])
}
}
})
}
}
assignConfig(requestConfig, config);
if (method === 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
var response = await fetch(url, requestConfig);
var responseJson = await response.json();
} catch (error) {
throw new Error(error)
}
return responseJson
} else {
let requestObj;
if (window.XMLHttpRequest) {
requestObj = new XMLHttpRequest();
} else {
requestObj = new ActiveXObject;
}
let sendData = '';
if (method === 'POST') {
sendData = JSON.stringify(data);
}
requestObj.open(method, url, true);
if (config.headers) Object.keys(config.headers).forEach(key => {
if (config.headers[key]) requestObj.setRequestHeader(key, config.headers[key])
});
requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
requestObj.send(sendData);
requestObj.onreadystatechange = () => {
if (requestObj.readyState === 4) {
if (requestObj.status === 200) {
let obj = requestObj.response;
if (typeof obj !== 'object') {
obj = JSON.parse(obj);
}
return obj
} else {
throw new Error(requestObj)
}
}
}
}
}
var baseUrl = "http://localhost:5000/api/";
var loginUrl = "authentication/Login";
var config = {
headers: {
Authorization: "Basic dXNlcm5hbWU6cGFzc3dvcmQ="
}
};
Fetch({
url: baseUrl + loginUrl,
method: "post",
data: {"Name": "wwmin", "password": "1"},
config
}).then(res => console.log(res));
//1.同源請求
$("#submit").click(function(){
var data={
name:$("name").val(),
id:$("#id").val();
};
$.ajax({
type:"POST",
data:data,
url:"http://localhost:3000/ajax/deal",
dataType:"json",
cache:false,
timeout:5000,
success:function(data){
console.log(data);
},
error:function(jqXHR,textStatus,errorThrown){
console.log("error"+textStatus+" "+errorThrown);
}
});
});
//node 服務器端3000 對應的處理函數為:
pp.post('/ajax/deal',function(req,res){
console.log("server accept:",req.body.name,req.body.id)
var data={
name:req.body.name+'-server 3000 process',
id:req.body.id+'-server 3000 process'
};
res.send(data);
res.end();
})
//JSONP 是 JSON 的一種使用模式，可以解決主流瀏覽器的跨域數據訪問問題。
// 其原理是根據 XmlHttpRequest 對象受到同源策略的影響，而 <script> 標簽元素卻不受同源策略影響，
// 可以加載跨域服務器上的腳本，網頁可以從其他來源動態產生 JSON 資料。用 JSONP 獲取的不是 JSON 數據，
// 而是可以直接運行的 JavaScript 語句。
//2.使用 jQuery 集成的 $.ajax 實現 JSONP 跨域調用
//回調函數
function jsonpCallback(data){
console.log("jsonpCallback:"+data.name)
}
$("#submit").click(function(){
var data={
name:$("#name").val(),
id:$("#id").val();
};
$.ajax({
url:'http://localhost:3001/ajax/deal',
data:data,
dataType:"jsonp",
cache:false,
timeout:5000,
//jsonp字段含義為服務器通過什么字段獲取回調函數的名稱
jsonp:'callback',
//聲明本地回調函數的名稱,jquery默認隨機生成一個函數名稱
jsonpCallback:'jsonpCallback',
success:function(data){
console.log("ajax success callback:"+data.name)
},
error:function(jqXHR,textStatus,errorThrown){
console.log(textStatus+''+errorThrown);
}
});
});
//服務器3001上對應的處理函數為
app.get('/ajax/deal',function(req,res){
console.log("serer accept:");
var data="{"+"name:"+req.query.name+"-server 3001 process',"+"id:'"+req.query.id+"-server 3001 process'"+"}";
var callback=req.query.callback;
var jsonp=callback+'('+data+')';
console.log(jsonp);
res.send(jsonp);
res.end();
})
//請求頭第一行為
GET /ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032 HTTP/1.1
//使用script標簽原生實現JSONP
<script src = 'http://localhost:3001/ajax/deal?callback=jsonpCallback&name=chiaki&id=3001&_=1473164876032'></script>
function jsonpCallback(data){
console.log("jsonpCallback:"+data.name)
}
//服務器 3000請求頁面還包含一個 script 標簽：
<script src = 'http://localhost:3001/jsonServerResponse?jsonp=jsonpCallback'></script>
//服務器 3001上對應的處理函數：
app.get('/jsonServerResponse', function(req, res) {
var cb = req.query.jsonp
console.log(cb)
var data = 'var data = {' + 'name: $("#name").val() + " - server 3001 jsonp process",' + 'id: $("#id").val() + " - server 3001 jsonp process"' + '};'
var debug = 'console.log(data);'
var callback = '$("#submit").click(function() {' + data + cb + '(data);' + debug + '});'
res.send(callback)
res.end()
})
//CORS 的實現
//服務器 3000 上的請求頁面 JavaScript 不變 (參考上面的同域請求)
//服務器 3001上對應的處理函數：
app.post('/cors', function(req, res) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By", ' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
var data = {
name: req.body.name + ' - server 3001 cors process',
id: req.body.id + ' - server 3001 cors process'
}
console.log(data)
res.send(data)
res.end()
})
// CORS 中屬性的分析
//1.Access-Control-Allow-Origin
The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify “*” as a wildcard, thereby allowing any origin to access the resource.
//2.Access-Control-Allow-Methods
Specifies the method or methods allowed when accessing the resource. This is used in response to a preflight request. The conditions under which a request is preflighted are discussed above.
//3.Access-Control-Allow-Headers
Used in response to a preflight request to indicate which HTTP headers can be used when making the actual request.
// CORS 與 JSONP 的對比
//1.CORS 除了 GET 方法外，也支持其它的 HTTP 請求方法如 POST、 PUT 等。
//2.CORS 可以使用 XmlHttpRequest 進行傳輸，所以它的錯誤處理方式比 JSONP 好。
//3.JSONP 可以在不支持 CORS 的老舊瀏覽器上運作。
//一些其它的跨域調用方式
//1.window.name
//2.window.postMessage()
//參考：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage
