六角學堂｜AJAX從 chrome 開發人員工具檢視 AJAX post

什麼是AJAX?
AJAX可以去透過瀏覽器,發送資訊給伺服器,去詢問ck這個資訊有沒有重複？
如果重複了,貼上固定字串.

透過 XMLHttpRequest 物件跨瀏覽器撈資料
透過 XMLHttpRequest去跟伺服器要資料
<JS>
var xhr = new XMLHttpRequest();

//readyState
//0 - 你已經產生一個 XMLHttpRequest,但是還沒有連結你要撈的資料
//1 - 你用了open() ,但你還沒把資料傳送過去
//2 - 偵測到你用send
//3 - loading
//4 - 你撈到資料了,數據已經完全接受到了

//格式、要讀取的網址、、同步與非同步
//格式:get(讀取資料)、post(傳送資料到伺服器)
xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

//空的資料
xhr.send(null);


顯示課程導航 AJAX 非同步觀念
var xhr = new XMLHttpRequest();

xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

xhr.send(null);

//true 非同步,不會資料傳回來,就讓程式繼續往下跑,等到回傳才會自動回傳
//false 他會等資料傳回來,才讓程式碼繼續往下跑
整個流程:
<HTML>
<body>
<div class="message"></div>
<script src="js/all120.js"></script>
</body><JS>
var xhr = new XMLHttpRequest();

xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

xhr.send(null);

//true 非同步,不會資料傳回來,就讓程式繼續往下跑,等到回傳才會自動回傳
//false 他會等資料傳回來,才讓程式碼繼續往下跑

xhr.onload = function(){
console.log(xhr.responseText);
var str = JSON.parse(xhr.responseText);
document.querySelector('.message').textContent = str[0].name
}

//1.建立了一個 XMLHttpRequest
//2.傳送到對方伺服器要資料
//3.回傳資料到自己瀏覽器
//4.拿到資料後看要怎麼處理


HTTP狀態碼
//200 資料有正確回傳,有撈到
//404 資料讀取錯誤,沒有撈到

var xhr = new XMLHttpRequest();

xhr.open('get','https://hexschool.github.io/ajaxHomework/data.json',true);

xhr.send(null);

//true 非同步,不會資料傳回來,就讓程式繼續往下跑,等到回傳才會自動回傳
//false 他會等資料傳回來,才讓程式碼繼續往下跑

xhr.onload = function(){
console.log(xhr.responseText);
if(xhr.status == 200){
var str = JSON.parse(xhr.responseText);
document.querySelector('.message').textContent = str[0].name
}else{
console.log('資料錯誤！！')
}
}
補充JavaScript JSON.parse():
http://www.runoob.com/js/javascript-json-parse.html

什麼是 Cross-Origin Resource Sharing (CORS)？
//是否可以跨網域撈取資料(因為有資安關係)
cors偵測服務:http://www.test-cors.org

使用 JSONP 進行跨網域存取
JSONP只能載入檔案,再去做執行.
<HTML>
body>
<div class="message"></div>
<script src="js/all123.js"></script>
<!-- JSONP -->
<!-- JSONP 只能做get,不能做post-->
<script src="http://opendata.epa.gov.tw/ws/Data/UV/?$orderby=PublishTime%20desc&$skip=0&$top=1000&format=json&callback=getData"></script>
</body>
<JS>
function getData(data){
console.log(data);
document.querySelector('.message').textContent = data[0].SiteName;
}




從 chrome 開發人員工具檢視 AJAX post
1.get







2.post















3.其他(content type application JSON)






































































































































评论

发表评论

热门博文