在 JS 中如何使用 Ajax 來進行請求

人已經過原 Danny Markov 授權翻譯

在本教程中，我們將學習如何使用 JS 進行AJAX調用。

1.AJAX

術語AJAX 表示 異步的 JavaScript 和 XML。

AJAX 在 JS 中用于發出異步網絡請求來獲取資源。當然，不像名稱所暗示的那樣，資源并不局限于XML，還用于獲取JSON、HTML或純文本等資源。

有多種方法可以發出網絡請求并從服務器獲取數據。我們將一一介紹。

2.XMLHttpRequest

XMLHttpRequest對象（簡稱XHR）在較早的時候用于從服務器異步檢索數據。

之所以使用XML，是因為它首先用于檢索XML數據。現在，它也可以用來檢索JSON, HTML或純文本。

事例 2.1: GET

function success() {
  var data = JSON.parse(this.responseText)
  console.log(data)
}

function error (err) {
  console.log('Error Occurred:', err)
}

var xhr = new XMLHttpRequest()
xhr.onload = success
xhr.onerror = error
xhr.open("GET", ""https://jsonplaceholder.typicode.com/posts/1")
xhr.send()

我們看到，要發出一個簡單的GET請求，需要兩個偵聽器來處理請求的成功和失敗。我們還需要調用open()和send()方法。來自服務器的響應存儲在responseText變量中，該變量使用JSON.parse()轉換為JavaScript 對象。

function success() {
    var data = JSON.parse(this.responseText);
    console.log(data);
}

function error(err) {
    console.log('Error Occurred :', err);
}

var xhr = new XMLHttpRequest();
xhr.onload = success;
xhr.onerror = error;
xhr.open("POST", "https://jsonplaceholder.typicode.com/posts");
xhr.setRequestHeader("Content-Type", "application/json; charset=UTF-8");
xhr.send(JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  })
);

我們看到POST請求類似于GET請求。我們需要另外使用setRequestHeader設置請求標頭“Content-Type” ，并使用send方法中的JSON.stringify將JSON正文作為字符串發送。

2.3 XMLHttpRequest vs Fetch

早期的開發人員，已經使用了好多年的 XMLHttpRequest來請求數據了。現代的fetch API允許我們發出類似于XMLHttpRequest（XHR）的網絡請求。主要區別在于fetch()API使用Promises，它使 API更簡單，更簡潔，避免了回調地獄。

3. Fetch API

Fetch 是一個用于進行AJAX調用的原生 JavaScript API，它得到了大多數瀏覽器的支持，現在得到了廣泛的應用。

3.1 API用法

fetch(url, options)
    .then(response => {
        // handle response data
    })
    .catch(err => {
        // handle errors
    });

API參數

fetch() API有兩個參數

url是必填參數，它是您要獲取的資源的路徑。
options是一個可選參數。不需要提供這個參數來發出簡單的GET請求。

method: GET | POST | PUT | DELETE | PATCH
headers: 請求頭，如 { “Content-type”: “application/json; charset=UTF-8” }
mode: cors | no-cors | same-origin | navigate
cache: default | reload | no-cache
body: 一般用于POST請求

API返回Promise對象

fetch() API返回一個promise對象。

如果存在網絡錯誤，則將拒絕，這會在.catch()塊中處理。
如果來自服務器的響應帶有任何狀態碼(如200、404、500)，則promise將被解析。響應對象可以在.then()塊中處理。

錯誤處理

請注意，對于成功的響應，我們期望狀態代碼為200（正常狀態），但是即使響應帶有錯誤狀態代碼（例如404（未找到資源）和500（內部服務器錯誤）），fetch() API 的狀態也是 resolved，我們需要在.then() 塊中顯式地處理那些。

我們可以在response 對象中看到HTTP狀態：

HTTP狀態碼，例如200。
ok –布爾值，如果HTTP狀態代碼為200-299，則為true。

3.3 示例：GET

const getTodoItem = fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .catch(err => console.error(err));

getTodoItem.then(response => console.log(response));

Response

 { userId: 1, id: 1, title: "delectus aut autem", completed: false }

在上面的代碼中需要注意兩件事:

fetch API返回一個promise對象，我們可以將其分配給變量并稍后執行。
我們還必須調用response.json()將響應對象轉換為JSON

錯誤處理

我們來看看當HTTP GET請求拋出500錯誤時會發生什么：

fetch('http://httpstat.us/500') // this API throw 500 error
  .then(response => () => {
    console.log("Inside first then block");
    return response.json();
  })
  .then(json => console.log("Inside second then block", json))
  .catch(err => console.error("Inside catch block:", err));

Inside first then block
? ? Inside catch block: SyntaxError: Unexpected token I in JSON at position 4

我們看到，即使API拋出500錯誤，它仍然會首先進入then()塊，在該塊中它無法解析錯誤JSON并拋出catch()塊捕獲的錯誤。

這意味著如果我們使用fetch()API，則需要像這樣顯式地處理此類錯誤：-

fetch('http://httpstat.us/500')
  .then(handleErrors)
  .then(response => response.json())
  .then(response => console.log(response))
  .catch(err => console.error("Inside catch block:", err));

function handleErrors(response) {
  if (!response.ok) { // throw error based on custom conditions on response
      throw Error(response.statusText);
  }
  return response;
}

 ? Inside catch block: Error: Internal Server Error at handleErrors (Script snippet %239:9)

3.3 示例：POST

fetch('https://jsonplaceholder.typicode.com/todos', {
    method: 'POST',
    body: JSON.stringify({
      completed: true,
      title: 'new todo item',
      userId: 1
    }),
    headers: {
      "Content-type": "application/json; charset=UTF-8"
    }
  })
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.log(err))

Response

? {completed: true, title: "new todo item", userId: 1, id: 201}

在上面的代碼中需要注意兩件事:-

POST請求類似于GET請求。我們還需要在fetch() API的第二個參數中發送method，body 和headers 屬性。
我們必須需要使用 JSON.stringify() 將對象轉成字符串請求body參數

4.Axios API

Axios API非常類似于fetch API，只是做了一些改進。我個人更喜歡使用Axios API而不是fetch() API，原因如下：

為GET 請求提供 axios.get()，為 POST 請求提供 axios.post()等提供不同的方法，這樣使我們的代碼更簡潔。
將響應代碼（例如404、500）視為可以在catch()塊中處理的錯誤，因此我們無需顯式處理這些錯誤。
它提供了與IE11等舊瀏覽器的向后兼容性
它將響應作為JSON對象返回，因此我們無需進行任何解析

4.1 示例：GET

// 在chrome控制臺中引入腳本的方法

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://unpkg.com/axios/dist/axios.min.js';
document.head.appendChild(script);

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data))
  .catch(err => console.error(err));

Response

{ userId: 1, id: 1, title: "delectus aut autem", completed: false }

我們可以看到，我們直接使用response獲得響應數據。數據沒有任何解析對象，不像fetch() API。

錯誤處理

axios.get('http://httpstat.us/500')
  .then(response => console.log(response.data))
  .catch(err => console.error("Inside catch block:", err));

Inside catch block: Error: Network Error

我們看到，500錯誤也被catch()塊捕獲，不像fetch() API，我們必須顯式處理它們。

4.2 示例：POST

axios.post('https://jsonplaceholder.typicode.com/todos', {
      completed: true,
      title: 'new todo item',
      userId: 1
  })
  .then(response => console.log(response.data))
  .catch(err => console.log(err))

 {completed: true, title: "new todo item", userId: 1, id: 201}

我們看到POST方法非常簡短，可以直接傳遞請求主體參數，這與fetch（）API不同。

作者：Danny Markov 譯者：前端小智來源：tutorialzine

原文：https://tutorialzine.com/2017/12-terminal-commands-every-web-developer-should-know

法： $.ajax([settings]);

$.ajax({
type: "POST",
url: "UserLogincheck",
data: {username:$("#username").val(), password:$("#password").val(),verify:$("#verify").val()},
dataType: "json",
success: function(data){
if(data==1){
// 用戶名或密碼錯誤
alert("用戶名或密碼錯誤");
}
else if(data==2){
alert("驗證碼錯誤");
// 驗證碼錯誤
}
else if(data==0){
window.location.href="index";
}
//跳轉頁面
},
error:function(XMLHttpRequest, textStatus, errorThrown){//請求失敗時調用此函數
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});

php作為后臺的處理過程

public function UserLogincheck(){//用戶登陸驗證(用戶名和郵箱均可登陸)
$very = new \Think\Verify();
if($very->check($_POST['verify'])){//驗證碼正確
$user_admin = I('post.username');
$judge = " (user_name = '$user_admin' or user_email = '$user_admin' )";
$user_del_status = $this->user->where($judge)->getField('user_del');
if($user_del_status == 0){//用戶未被注銷
$user_password = I('post.password');
$judge .= "and user_password = '$user_password'";
$res = $this->user->where($judge)->find();
if($res){//記錄用戶登陸狀態
$_SESSION['ADMIN_user_id'] = $this->user->where($judge)->getField('user_id');
$_SESSION['ADMIN_user_name'] = $data['user_name'];
$this->ajaxReturn(0);//登陸成功
}
$this->ajaxReturn(1);//用戶名或密碼錯誤
}
else
$this->ajaxReturn(8);//用戶信息被注銷
}
else
$this->ajaxReturn(2);//驗證碼錯誤
}

ajax參數詳解：

data

類型：String

發送到服務器的數據。將自動轉換為請求字符串格式。GET 請求中將附加在 URL 后。查看 processData 選項說明以禁止此自動轉換。必須為 Key/Value 格式。如果為數組，jQuery 將自動為不同值對應同一個名稱。如 {foo:["bar1", "bar2"]} 轉換為 '&foo=bar1&foo=bar2'。

dataFilter

類型：Function

給 Ajax 返回的原始數據的進行預處理的函數。提供 data 和 type 兩個參數：data 是 Ajax 返回的原始數據，type 是調用 jQuery.ajax 時提供的 dataType 參數。函數返回的值將由 jQuery 進一步處理。

dataType

類型：String

預期服務器返回的數據類型。如果不指定，jQuery 將自動根據 HTTP 包 MIME 信息來智能判斷，比如 XML MIME 類型就被識別為 XML。在 1.4 中，JSON 就會生成一個 JavaScript 對象，而 script 則會執行這個腳本。隨后服務器端返回的數據會根據這個值解析后，傳遞給回調函數。可用值:

"xml": 返回 XML 文檔，可用 jQuery 處理。

"html": 返回純文本 HTML 信息；包含的 script 標簽會在插入 dom 時執行。

"script": 返回純文本 JavaScript 代碼。不會自動緩存結果。除非設置了 "cache" 參數。注意：在遠程請求時(不在同一個域下)，所有 POST 請求都將轉為 GET 請求。（因為將使用 DOM 的 script標簽來加載）

"json": 返回 JSON 數據。

"jsonp": JSONP 格式。使用 JSONP 形式調用函數時，如 "myurl?callback=?" jQuery 將自動替換 ? 為正確的函數名，以執行回調函數。

"text": 返回純文本字符串

error

類型：Function

默認值: 自動判斷 (xml 或 html)。請求失敗時調用此函數。

有以下三個參數：XMLHttpRequest 對象、錯誤信息、（可選）捕獲的異常對象。

如果發生了錯誤，錯誤信息（第二個參數）除了得到 null 之外，還可能是 "timeout", "error", "notmodified" 和 "parsererror"。

這是一個 Ajax 事件。

global

類型：Boolean

是否觸發全局 AJAX 事件。默認值: true。設置為 false 將不會觸發全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified

類型：Boolean

僅在服務器數據改變時獲取新數據。默認值: false。使用 HTTP 包 Last-Modified 頭信息判斷。在 jQuery 1.4 中，它也會檢查服務器指定的 'etag' 來確定數據沒有被修改過。

jsonp

類型：String

在一個 jsonp 請求中重寫回調函數的名字。這個值用來替代在 "callback=?" 這種 GET 或 POST 請求中 URL 參數里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 會導致將 "onJsonPLoad=?" 傳給服務器。

jsonpCallback

類型：String

為 jsonp 請求指定一個回調函數名。這個值將用來取代 jQuery 自動生成的隨機函數名。這主要用來讓 jQuery 生成度獨特的函數名，這樣管理請求更容易，也能方便地提供回調函數和錯誤處理。你也可以在想讓瀏覽器緩存 GET 請求的時候，指定這個回調函數名。

password

類型：String

用于響應 HTTP 訪問認證請求的密碼

processData

類型：Boolean

默認值: true。默認情況下，通過data選項傳遞進來的數據，如果是一個對象(技術上講只要不是字符串)，都會處理轉化成一個查詢字符串，以配合默認內容類型 "application/x-www-form-urlencoded"。如果要發送 DOM 樹信息或其它不希望轉換的信息，請設置為 false。

scriptCharset

類型：String

只有當請求時 dataType 為 "jsonp" 或 "script"，并且 type 是 "GET" 才會用于強制修改 charset。通常只在本地和遠程的內容編碼不同時使用。

success

類型：Function

請求成功后的回調函數。

參數：由服務器返回，并根據 dataType 參數進行處理后的數據；描述狀態的字符串。

這是一個 Ajax 事件。

traditional

類型：Boolean

如果你想要用傳統的方式來序列化數據，那么就設置為 true。請參考工具分類下面的 jQuery.param 方法。

timeout

類型：Number

設置請求超時時間（毫秒）。此設置將覆蓋全局設置。

type

類型：String

默認值: "GET")。請求方式 ("POST" 或 "GET")，默認為 "GET"。注意：其它 HTTP 請求方法，如 PUT 和 DELETE 也可以使用，但僅部分瀏覽器支持。

url

類型：String

默認值: 當前頁地址。發送請求的地址。

username

類型：String

用于響應 HTTP 訪問認證請求的用戶名。

xhr

類型：Function

需要返回一個 XMLHttpRequest 對象。默認在 IE 下是 ActiveXObject 而其他情況下是 XMLHttpRequest 。用于重寫或者提供一個增強的 XMLHttpRequest 對象。這個參數在 jQuery 1.3 以前不可用。

. ajax的介紹

ajax 是 Asynchronous JavaScript and XML的簡寫，ajax一個前后臺配合的技術，它可以讓 javascript 發送異步的 http 請求，與后臺通信進行數據的獲取，ajax 最大的優點是實現局部刷新，ajax可以發送http請求，當獲取到后臺數據的時候更新頁面顯示數據實現局部刷新，在這里大家只需要記住，當前端頁面想和后臺服務器進行數據交互就可以使用ajax了。

這里提示一下大家, 在html頁面使用ajax需要在web服務器環境下運行, 一般向自己的web服務器發送ajax請求。

2. ajax的使用

jquery將它封裝成了一個方法$.ajax()，我們可以直接用這個方法來執行ajax請求。

示例代碼:

<script>
    $.ajax({
    // 1.url 請求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 請求方式，默認是'GET'，常用的還有'POST'
    type:'GET',
    // 3.dataType 設置返回的數據格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 設置發送給服務器的數據, 沒有參數不需要設置

    // 5.success 設置請求成功后的回調函數
    success:function (response) {
        console.log(response);    
    },
    // 6.error 設置請求失敗后的回調函數
    error:function () {
        alert("請求失敗,請稍后再試!");
    },
    // 7.async 設置是否異步，默認值是'true'，表示異步，一般不用寫
    async:true
});
</script>

ajax方法的參數說明:

url 請求地址
type 請求方式，默認是'GET'，常用的還有'POST'
dataType 設置返回的數據格式，常用的是'json'格式
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數
error 設置請求失敗后的回調函數
async 設置是否異步，默認值是'true'，表示異步，一般不用寫
同步和異步說明

同步是一個ajax請求完成另外一個才可以請求，需要等待上一個ajax請求完成，好比線程同步。
異步是多個ajax同時請求，不需要等待其它ajax請求完成，好比線程異步。

ajax的簡寫方式:

$.ajax按照請求方式可以簡寫成$.get或者$.post方式

ajax簡寫方式的示例代碼:

 <script>
    $(function(){
        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("網絡異常");
        });

        /*
         1. url 請求地址
         2. data 設置發送給服務器的數據, 沒有參數不需要設置
         3. success 設置請求成功后的回調函數
         4. dataType 設置返回的數據格式，常用的是'json'格式, 默認智能判斷數據格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name);
            console.log(data.time);
        }, "json").error(function(){
            alert("網絡異常");
        });
    });


</script>

$.get和$.post方法的參數說明:

$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)

url 請求地址
data 設置發送給服務器的數據，沒有參數不需要設置
success 設置請求成功后的回調函數

data 請求的結果數據
status 請求的狀態信息, 比如: "success"
xhr 底層發送http請求XMLHttpRequest對象

dataType 設置返回的數據格式

"xml"
"html"
"text"
"json"

error 表示錯誤異常處理

func 錯誤異常回調函數

在線咨詢

上一篇：php解碼escape（phpjson解碼）
下一篇：layui彈出窗口及其應用實例

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

在 JS 中如何使用 Ajax 來進行請求

1.AJAX

2.XMLHttpRequest

事例 2.1: GET

2.3 XMLHttpRequest vs Fetch

3. Fetch API

3.1 API用法

3.3 示例：GET

3.3 示例：POST

4.Axios API

4.1 示例：GET

4.2 示例：POST

. ajax的介紹

2. ajax的使用

您的項目需求