---
# System prepended metadata

title: AJAX基礎概念
tags: [AJAX]

---

---
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存取
