使用Ajax發送http請求（get&post請求）

来源:https://www.cnblogs.com/smyhvae/archive/2018/02/28/8485028.html
-Advertisement-
Play Games

本文最初發表於 "博客園" ，併在 "GitHub" 上持續更新 前端的系列文章 。歡迎在GitHub上關註我，一起入門和進階前端。 以下是正文。 同步和非同步 同步和非同步的概念 同步：必須等待前面的任務完成，才能繼續後面的任務。 非同步：不受當前任務的影響。 拿排隊舉例： 同步：在銀行排隊時，只有等到 ...


本文最初發表於博客園，併在GitHub上持續更新前端的系列文章。歡迎在GitHub上關註我，一起入門和進階前端。

以下是正文。

同步和非同步

同步和非同步的概念

  • 同步：必須等待前面的任務完成，才能繼續後面的任務。

  • 非同步：不受當前任務的影響。

拿排隊舉例：

  • 同步：在銀行排隊時，只有等到你了，才能夠去處理業務。

  • 非同步：在排隊的時候，可以玩手機。

非同步更新網站

我們在訪問一個普通的網站時，當瀏覽器載入完HTML、CSS、JS以後，網站的內容就固定了。如果想讓網站內容發生更改，就必須刷新頁面才能夠看到更新的內容。

可如果用到非同步更新，情況就大為改觀了。比如，我們在訪問新浪微博時，看到一大半了，點擊底部的載入更多，會自動幫我們載入更多的微博，同時頁面並沒有刷新。

試想一下，如果沒有非同步刷新的話，每次點擊“載入更多”，網頁都要刷新，體驗就太不好了。

web前端里的非同步更新，就要用到 Ajax。

Ajax

Ajax 的概念

在瀏覽器中，我們可以在不刷新頁面的情況下，通過ajax的方式去獲取一些新的內容。

Ajax：Asynchronous Javascript And XML（非同步 JavaScript 和 XML）。它並不是憑空出現的新技術，而是對於現有技術的結合。Ajax 的核心是 js 對象：XMLHttpRequest。

發送 Ajax 請求的五個步驟

其實也就是 使用 XMLHttpRequest 對象的五個步驟。

我們先回憶一下，一個完整的HTTP請求需要的是：

  • 請求的網址、請求方法get/post。

  • 提交請求的內容數據、請求主體等。

  • 接收響應回來的內容。

發送 Ajax 請求的五個步驟：

（1）創建非同步對象。即 XMLHttpRequest 對象。

（2）設置請求的參數。包括：請求的方法、請求的url。

（3）發送請求。

（4）註冊事件。 onreadystatechange事件，狀態改變時就會調用。

如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。

（5）獲取返回的數據。

Ajax 請求：get 請求舉例

（1）index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 發送 get 請求</h1>
<input type="button" value="發送get_ajax請求" id='btnAjax'>

<script type="text/javascript">
    // 綁定點擊事件
    document.querySelector('#btnAjax').onclick = function () {
        // 發送ajax 請求 需要 五步

        // （1）創建非同步對象
        var ajaxObj = new XMLHttpRequest();

        // （2）設置請求的參數。包括：請求的方法、請求的url。
        ajaxObj.open('get', '02-ajax.php');

        // （3）發送請求
        ajaxObj.send();

        //（4）註冊事件。 onreadystatechange事件，狀態改變時就會調用。
        //如果要在數據完整請求回來的時候才調用，我們需要手動寫一些判斷的邏輯。
        ajaxObj.onreadystatechange = function () {
            // 為了保證 數據 完整返回，我們一般會判斷 兩個值
            if (ajaxObj.readyState == 4 && ajaxObj.status == 200) {
                // 如果能夠進到這個判斷 說明 數據 完美的回來了,並且請求的頁面是存在的
                // 5.在註冊的事件中 獲取 返回的 內容 並修改頁面的顯示
                console.log('數據返回成功');

                // 數據是保存在 非同步對象的 屬性中
                console.log(ajaxObj.responseText);

                // 修改頁面的顯示
                document.querySelector('h1').innerHTML = ajaxObj.responseText;
            }
        }
    }
</script>
</body>
</html>

（2）02-ajax.php：

<?php
    echo 'smyhvae';
 ?>

效果如下：

Ajax 請求：post 請求舉例

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<h1>Ajax 發送 get 請求</h1>
<input type="button" value="發送put_ajax請求" id='btnAjax'>
<script type="text/javascript">

    // 非同步對象
    var xhr = new XMLHttpRequest();

    // 設置屬性
    xhr.open('post', '02.post.php');

    // 如果想要使用post提交數據,必須添加此行
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    // 將數據通過send方法傳遞
    xhr.send('name=fox&age=18');

    // 發送並接受返回值
    xhr.onreadystatechange = function () {
        // 這步為判斷伺服器是否正確響應
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert(xhr.responseText);
        }
    };
</script>
</body>
</html>

XMLHttpRequest 對象詳解

我們在上一段講解了使用 XMLHttpRequest 對象的五個步驟。本段，我們講一下註意事項。

發送請求

發送請求的方法：

    open(method, url, async);

參數解釋：

  • method：請求的類型；GET 或 POST

  • url：文件在伺服器上的位置

  • async：true（非同步）或 false（同步）

另外還有個方法：（僅用於 POST 請求）

    send(string);

POST請求時註意

如果想讓 像form 表單提交數據那樣使用POST請求，就需要使用 XMLHttpRequest 對象的 setRequestHeader()方法 來添加 HTTP 頭。然後在 send() 方法中添加想要發送的數據：

    xmlhttp.open("POST","ajax_test.php", true);

    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

    xmlhttp.send("name=smyhvae&age=27");

onreadystatechange 事件

註冊 onreadystatechange 事件後，每當 readyState 屬性改變時，就會調用 onreadystatechange 函數。

readyState：（存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化）

  • 0: 請求未初始化

  • 1: 伺服器連接已建立

  • 2: 請求已接收

  • 3: 請求處理中

  • 4: 請求已完成，且響應已就緒

status：

  • 200: "OK"。

  • 404: 未找到頁面。

在 onreadystatechange 事件中，當 readyState 等於 4，且狀態碼為200時，表示響應已就緒。

伺服器響應的內容

  • responseText：獲得字元串形式的響應數據。

  • responseXML：獲得 XML 形式的響應數據。

如果響應的是普通字元串，就使用responseText；如果響應的是XML，使用responseXML。

Ajax 傳輸 XML

XML 語法

XML（Extensible Markup Language）：可擴展標記語言。詳細語法可以查看：#。

1、XML聲明：

<?xml version="1.0" encoding="UTF-8"?>

第一行的聲明，指定了XML版本(1.0)以及使用的編碼。

2、自定義標簽：

XML中沒有預設的標簽，所有的標簽都是我們自己已定義的。例如：

<fox></fox>
<name></name>

XML中沒有單標簽，都是雙標簽。

3、根節點：

XML中必須要有一個根節點，所有的子節點都放置在根節點下。例如：

<root1>
  <name></name>
</root1>

XML 解析

因為 XML 就是標簽，所以我們可以直接用解析Dom元素的方法解析 XML。

解析過程：

（1）html 部分：（包含 xml ）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <person id='personXML'>
      <name>fox</name>
      <age>18</age>
      <skill>小花花</skill>
  </person>
</body>
</html>

（2）解析 xml：

<script type="text/javascript">
    var xmlObj = document.getElementById("personXML");
    var name = xmlObj.getElementsByTagName('name')[0].innerHTML;

    console.log(name);
</script>

ajax 請求解析xml（舉例）

（1）get_xml.php：（裡面包含了xml文件）

<?php
    // 設置 返回的為 xml
    header('content-type:text/xml; charset= utf-8');

    // 讀取xml文件 並返回
    echo file_get_contents('info/star.xml');

 ?>

上方代碼解釋：

  • php 自帶了 讀取 xml 文件的方法。

  • 在 php 中，如果要使用xml傳輸數據，則需要使用header()設置返回的內容為xml。

（2）get_xml.html：（Ajax 請求，獲取並解析xml）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button"  value="獲取XMl數據" id='getXML'>
</body>
</html>
<script type="text/javascript">
    document.querySelector('#getXML').onclick = function () {
        var ajax = new XMLHttpRequest();

        ajax.open('get','get_XMl.php');

        ajax.send();

        ajax.onreadystatechange = function () {
            if (ajax.readyState == 4 && ajax.status==200) {
                // 如果 返回的是 xml文件
                console.log(ajax.responseText);

                // 非同步 對象中 有另外一個屬性 用來專門獲取 xml
                // xml對象 在瀏覽器段 就是一個 document對象
                // 解析時 可以直接使用 querySelector 或者 getElementById等等 document對象 有的語法
                console.log(ajax.responseXML);
                console.log(ajax.responseXML.querySelector('kuzi').innerHTML);
                // 下麵這個 頁面文檔對象 如果要獲取某個標簽
                console.log(window.document);

            }
        }
    }
</script>

Ajax 傳輸 JSON

JSON 的語法

JSON(JavaScript Object Notation)：是ECMAScript的子集。作用是進行數據的交換。語法更為簡潔，網路傳輸、機器解析都更為迅速。

語法規則：

  • 數據在鍵值對中

  • 數據由逗號分隔

  • 花括弧保存對象

  • 方括弧保存數組

數據類型：

  • 數字（整數或浮點數）

  • 字元串（在雙引號中）

  • 邏輯值（true 或 false）

  • 數組（在方括弧中）

  • 對象（在花括弧中）

  • null

示例：

// 對象
{
  "name":"fox",
  "age":"18",
  "sex":"true",
  "car":null
}

// 數組
[
  {
      "name":"小小胡",
      "age":"1"
  },
  {
      "name":"小二胡",
      "age":"2"
  }
]

JavaScript中：json 字元串 <--> js 對象

基本上，所有的語言都有將 json 字元串轉化為該語言對象的語法。

比如在 js中：

  • JSON.parse()：將JSON字元串轉化為 js 對象。例如：
    // 將 JSON 字元串格式化為 js 對象
    var jsObj = JSON.parse(ajax.responseText);
  • JSON.stringify()：將 JS 對象轉化為JSON字元串。例如：
    var Obj = {
      name: "fox",
      age: 18,
      skill: "撩妹"
    };

    console.log(Obj);

    // 將 js 對象格式化為 JSON 字元串
    var jsonStr = JSON.stringify(Obj);

PHP中：json 字元串 <--> js 對象

  • json_decode()方法：將json字元串轉化為變數。

  • json_encode()方法：將變數轉化為json字元串。

代碼舉例：

<?php
    header("Content-Type:text/html;charset=utf-8");
    // json字元串
    $jsonStr = '{"name":"itcast","age":54,"skill":"歌神"}';
    // 字元串轉化為 php對象
      print_r(json_decode($jsonStr));

      echo "<br>";
      // php數組
      $arrayName = array('name' =>'littleFox' ,'age' => 13 );
      // php對象 轉化為 json字元串
      print_r(json_encode($arrayName));
 ?>

輸出結果：

    stdClass Object ( [name] => itcast [age] => 54 [skill] => 歌神 )
    {"name":"littleFox","age":13}

ajax 請求解析 json（舉例）

（1）Person.json:

{
    "name":"小強",
    "skill":"砍樹",
    "friend":"老闆"
}

（2）myJson.php：

<?php

    // 讀取json文件 並返回即可
    echo  file_get_contents('info/Person.json');

 ?>

（3）getJson.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>獲取 json 數據</h1>
    <input type="button"  value="獲取json" id='btnJson'>
</body>
</html>
<script type="text/javascript">
    // 獲取的是一個 如果要獲取多個
    // document.querySelectorAll(selector)
    document.querySelector("#btnJson").onclick = function () {
        var ajax = new XMLHttpRequest();

        ajax.open('get','myJson.php');

        ajax.send();

        ajax.onreadystatechange = function () {
            if (ajax.readyState==4&&ajax.status==200) {
                // json 字元串 是字元串 所以我們可以 通過  responseText獲取
                console.log(ajax.responseText);

                // 轉化為 js對象
                var jsObj = JSON.parse(ajax.responseText);

                console.log(jsObj);

                // 拼接ul s
                var str = '';

                str+='<ul>';
                str+='<li>'+jsObj.name+'</li>';
                str+='<li>'+jsObj.skill+'</li>';
                str+='<li>'+jsObj.friend+'</li>';
                str+='</ul>';

                // 設置到界面上

                document.body.innerHTML = str;
            }
        }
    }
</script>

演示效果：

我的公眾號

想學習代碼之外的軟技能？不妨關註我的微信公眾號：生命團隊（id：vitateam）。

掃一掃，你將發現另一個全新的世界，而這將是一場美麗的意外：


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Markdown常用語法
    1、標題類 標題是每篇文章最常用的格式，在Markdown中，如果使一段文字定義為標題，則只要在這段文字前加“#”號即可。如上圖所示。 總共有6級標題，建議在#號後添加一個空格符。 2、列表類 在文字前加“-”或“*”，即可變為無序列表； 在文字前加“1. ”、“2. ”...等數字元號，即可變為有 ...
  • 如何水平居中一個元素
    在項目中經常會遇到居中問題，這裡借鑒度娘的眾多答案，做一個總結： 一、元素的水平居中 1、行級元素的水平居中 很明顯：子元素為行級元素時，只需要設置父元素 text-align:center 即可。 2、塊級元素的水平居中 很明顯：子元素為塊級元素時，只需要設置父元素 margin: 0 auto; ...
  • CSS佈局(四) float詳解
    一、float設計初衷 因為float被設計出來的初衷是用於——文字環繞效果。即，一個圖片一段文字，圖片float:left之後，文字會環繞圖片。 二、float多個特性 2.1. 破壞性 首先大家來看兩個demo，如下圖。第一個demo是一個簡單不過的例子，顯示效果也很正常。第二個demo，唯一的 ...
  • CSS——清除浮動的六種解決方案
    內容的高度撐起父元素容器的高度，效果圖如下HTML和CSS代碼如下給ｐ標簽加上浮動以後，ｐ｛float：left；｝，此時DIV塌陷，兩段內容同行顯示，效果如下： 解決方案一：給前面一個父元素設置高度 ！企業開發中，能不寫高度就不寫，所以這種方式用得很少解決方案二：給後面的盒子添加clear屬性； ...
  • 輕鬆畫任意三角形，你需要一個小工具。
    點擊拖動中間小點，得到你想要的三角形形狀，獲取每條邊框的寬度，把其餘的三條邊設為透明色，就得到了你想要的三角形，是不是很方便？拿走不謝， ...
  • 從零開始學習前端JAVASCRIPT — 13、Ajax-前後端非同步交互以及Promise-非同步編程的改進
    （註：本章講解涉及部分後端知識，將以php提供數據的方式進行相應的demo實現） 1：ajax的概念 全稱：Asynchronous Javascript And Xml AJAX不是一種新的編程語言，而是一種用於創建更快更好以及交互性更強的WEB應用程式技術，該技術在98年前後得到了應用。通過AJ ...
  • select2 插件編輯時設置預設值
    function htDate(selectCustomerId, val) { var customerId = selectCustomerId; var values = val; ajaxJson('GET', webroot + "/customer/getOptionList", '',... ...
  • react快速構建一個應用項目
    安裝 dva-cli 你應該會更希望關註邏輯本身，而不是手動敲入一行行代碼來構建初始的項目結構，以及配置開發環境。 那麼，首先需要安裝的是 dva-cli 。dva-cli 是 dva 的命令行工具，包含 init、new、generate 等功能，目前最重要的功能是可以快速生成項目以及你所需要的代 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類