---
title: AJAX基礎概念
tags: AJAX
---
AJAX
===
* 非同步的JS與XML技術
* AJAX為Asynchronous JavaScript and XML的簡寫
* 也有人叫AjAj 源於Asynchronous JavaScript and JSON
* 是一種技術的建立 實作方式有很多種
優點
===
* 不需要載入就可以回應行為
* 傳輸資料結構化
* 傳輸資料精簡
缺點
===
* SEO挑戰變高
* 瀏覽器相容性問題無法改變
* 網路延遲會影響使用者體驗
應用面
===
* 串API
* 背景載入
* JQ的話會用JQ的
* 原生語法比較少使用
* 如果是框架的比較常用Fetch跟axios
XMLHttpRequest語法順序 (原生)
===
* 這是所有瀏覽器都有 原生JavaScript的AJAX功能
* 面試很喜歡考這個 因為很多人會忘記
1. 宣告一個XMLHttpRequest物件
```javascript
let xhr=new XMLHttpRequest
```
2. 建立請求的各項設定及實質內容
方法,網址,最後一個可以不填
```javascript
xhr.open(
Method,
URL,
async);
```
3. 建立得到回應時的各項設定及行為
```javascript
xhr.onload=function(){
var type=xhr.getResponseHeader(“Content-Type”);
var status=xhr.status
var response=xhr.responseText
document.write(response)
}
```
4. 送出請求及傳送內容
```javascript
xhr.send(context);
```
Fetch語法順序
===
1. 建立FETCH請求及實質內容
2. 建立回呼函式(call back function)來處理回應時的各項行為
3. 建立錯誤處理
```javascript
fetch(url,{method:’get’})
.then(function(response){
return response.json()
})
.then(function(data){
console.log(data)
})
.catch(function(err){
//error
})
```
JQ語法順序 (建立於原生語法的基礎之上)
===
1. 利用$.get()方法傳送請求並取得回應(原生)
```javascript
$.ajax({
type:get/post/patch/delete/update…,
url:"http://.....",
success: (callback),
error: (callback),
data:{json/xml/string},
complete: (callback)
})
```
2. 上面的方法太麻煩 所以可以簡化成下面的語法
```javascript=
//$.get方法
$.get(url,data,callback)
//$.post方法
$.post(url,data,callback)
//().load()方法
$(selector).load(url)
```
2. complete跟success是同樣的意思 但success執行完後才會執行complete
3. 必須JQ CDN才可以使用
axios函式庫語法
===
1. 載入
2. 語法類似JQ跟fetch 所以結合兩者的優點
```javascript
axios.get(url)
.then(function(response){
//處理回應
})
.catch(function(err){
//error
})
```
CORS問題
===
* 全名為 Cross-Origin Resource Sharing 跨來源資源共享
* 有允許CORS存取的網站才可以讓其他外來人員存取
* 有安全性問題 所以網址不同會檔下 無法存取
* server模擬一般人訪問網站的方式 去存取
把資源拉回server後丟還給使用者 就可以繞開CORS的設定
* 允許一般存取 不允許JS存取
Sign in with Wallet
Connect another wallet