Web基礎瞭解版11-Ajax-JSON

来源:https://www.cnblogs.com/Open-ing/archive/2020/01/05/12147066.html
-Advertisement-
Play Games

Ajax AJAX即“Asynchronous Javascript And XML”:是,不發生頁面跳轉、非同步請求載入內容並改寫局部頁面內容的技術。 也可以簡單的理解為通過JS向伺服器發送請求。 同步處理: 就是當我們通過一個頁面向伺服器發送一個請求時,在伺服器響應結束之前,我們的整個頁面是不能操 ...


Ajax

 AJAX即“Asynchronous Javascript And XML”:是,不發生頁面跳轉、非同步請求載入內容並改寫局部頁面內容的技術。

 也可以簡單的理解為通過JS向伺服器發送請求。

 同步處理

 就是當我們通過一個頁面向伺服器發送一個請求時,在伺服器響應結束之前,我們的整個頁面是不能操作的,並且即使整個頁面中只有一小部分內容發生改變我們也要刷新整個頁面。

非同步處理

 通過AJAX向伺服器發送請求,當伺服器正常響應請求後,響應信息會直接發送到AJAX中,AJAX可以根據伺服器響應的內容做一些操作。並可局部的修改頁面,而不需要整個頁面刷新。

請求對象:XMLHttpRequest

  •  XMLHttpRequest對象用來封裝請求報文,我們向伺服器發送的請求信息全部都需要封裝到該對象中。

獲取XMLHttpRequest對象,不同瀏覽器之間有差異

//獲取XMLHttpRequest的通用方法
function getXMLHttpRequest(){
    var xhr;
    try{
        //大部分瀏覽器都支持
        xhr = new XMLHttpRequest();
    }catch(e){
        try{
            //如果不支持,在這裡捕獲異常並且採用IE6支持的方式
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
            //如果還不支持,在這裡捕獲異常並採用IE5支持的方式
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    return xhr;
}

 

XMLHttpRequest對象的方法

  • open(method,url,async):用於設置請求的基本信息,接收三個參數。

    • 參數一:method

      接收一個字元串,表明請求的方法:get或post

    • 參數二:url

      請求的地址,接收一個字元串

    • 參數三:Assync

      發送的請求是否為非同步請求,接收一個布爾值。① true 是非同步請求 ② false 不是非同步請求(同步請求)

  • send(string):用於將請求發送給伺服器,可以接收一個參數

    • string參數

      該參數只在發送post請求時需要。用於設置請求體

  • setRequestHeader(header,value):用於設置請求頭

    • 參數一:header參數

      字元串類型,要設置的請求頭的名字

    • 參數二:value參數

      字元串類型,要設置的請求頭的值

XMLHttpRequest對象的屬性

  • readyState

    • 描述XMLHttpRequest的狀態

    • 一共有五種狀態分別對應了五個數字:

      • 0 :請求尚未初始化,open()尚未被調用

      • 1 :伺服器連接已建立,send()尚未被調用

      • 2 :請求已接收,伺服器尚未響應

      • 3 :請求已處理,正在接收伺服器發送的響應

      • 4 :請求已處理完畢,且響應已就緒。

  • status

    • 請求的響應碼

      • 200 響應成功

      • 404 頁面為找到

      • 500 伺服器內部錯誤

        ......

  • onreadystatechange

    • 該屬性需要指向一個函數

    • 該函數會在readyState屬性發生改變時被調用

  • responseText

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

  • responseXML(用的比較少)

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

JQuery的Ajax請求

四個Ajax請求方法

  • $.ajax方法

  • $.get方法

  • $.post方法

  • $.getJSON方法

一個表單序列化方法:serialize()表單序列化方法

$.ajax請求

  • url: 請求的地址
  • type : 請求的方式 get或post
  • data : 請求的參數 string或json
  • success: 成功的回調函數
  • dataType: 返回的數據類型 常用json或text

$.get和$.post請求

  • url:請求的URL地址
  • data:待發送 Key/value 參數。
  • callback:載入成功時回調函數。
  • type:返回內容格式,xml, html, script, json, text。

$.getJSON請求

  • url:待載入頁面的URL地址
  • data:待發送 Key/value 參數。
  • callback:載入成功時回調函數。

表單的序列化

  • serialize() 方法可以把一個form表單中所有的表單項。都以字元串name=value&name=value的形式進行拼接

$.ajax({
    url : "ajaxServlet",     // 請求地址
    error:function(){        // 請求失敗回調
        alert("請求失敗");
    },
    success:function(data){    // 請求成功回調
        alert( data );
    },
    type:"POST",                // 請求的方式
    dataType:"json",            // 返回的數據類型為json對象
    data:{                      // 請求的參數
         action:"jqueryAjax",
         a:12,
         date: new Date()
     }
 });

 

JSON

JSON是JavaScript Object Notation 的縮寫,是JS提供的一種輕量級的數據交換格式, 易於人閱讀和編寫。同時也易於機器解析和生成。

JSON對象本質上就是一個JS對象,但是這個對象比較特殊,它可以直接轉換為字元串,在不同語言中進行傳遞,通過工具又可以轉換為其他語言中的對象。

在標準的json格式中,json對象由大括弧括起來,對象中的屬性也就是json的key是一個字元串,所以一定要使用雙引號引起來。每組key之間使用逗號進行分隔。

JSON 6種數據類型

  • 字元串           //註意:不能使用單引號

  • 數字

  • 布爾值

  • null值

  • 對象

    • 例子:{“name”:”sunwukong”, ”age”:18}

  • 數組

    • 例子:[1,”str”,true]

JSON對象的訪問

key就是對象的屬性。我們要訪問一個對象的屬性,只需要使用【對象名.屬性名】的方式訪問即可。

JSON對象和字元串對象的互轉

  • JSON.stringify( json ):此方法可以把一個json對象轉換成為json字元串

  • JSON.parse( jsonString ): 此方法可以把一個json字元串轉換成為json對象

JSON在Java中的使用

Gson 提供了用來在 Java 對象和 JSON 數據之間進行映射的 Java 類庫,可以將一個 JSON 字元串轉成一個 Java 對象,或者反過來。

  • java對象和json的轉換

  • java對象list集合和json的轉換

  • map對象和json的轉換

 // json操作,一定要先new一個gson對象。
Gson gson = new Gson();

// 1、把對象轉成為json字元串
String personjson = gson.toJson(person);
// 把json字元串轉換成為java對象
Person p = gson.fromJson(personjson, Person.class);    

//2、java對象list集合和json的轉換
String jsonListString = gson.toJson(list);
// 把json數組轉換成為List對象
List<Person> ps = gson.fromJson(jsonListString, new PersonType().getType());

// 3、map對象和json的轉換
String jsonMapString = gson.toJson(mapPerson);
// 通過使用匿名內部類的方式
Map<String, Person> map = gson.fromJson(jsonMapString,new TypeToken<HashMap<String, Person>>() {}.getType());

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

-Advertisement-
Play Games
更多相關文章
  • 結構偽類選擇器介紹 結構偽類選擇器是用來處理一些特殊的效果。 結構偽類選擇器屬性說明表 屬性 | 描述 | E:first child | 匹配E元素的第一個子元素。 E:last child | 匹配E元素的最後一個子元素。 E:nth child(n) | 匹配E元素的第n個子元素。 E:nth ...
  • let只作用在當前塊級作用域內使用let或者const聲明的變數,不能再被重新聲明let不存在`變數提升` console.log(dad); var dad = '我是爸爸!';//預定義undefined console.log(dad); let dad = '我是爸爸!';//報錯 生成十個 ...
  • 組件化思想,包含: 下拉菜單項封裝 + 按需載入 搜索功能組件化,顯示數據 + 下拉顯示 + 緩存 分類導航按需載入 幻燈片效果組件封裝及按需載入 商品樓層模塊組件化 + 商品數據按需載入 + Tab選項卡 + 電梯結構 是時候放出大長圖了!!! index.html <!DOCTYPE html> ...
  • 第二個版本:點擊預約掛號可跳轉到排班表,獲取之後7個星期的排班 先放圖 首先是index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <!-- 框架 --> <lin ...
  • 帶二級導航、輪播海報、二級聯動、搜索功能、Tab選項卡 按照國際慣例先放圖 index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>城市醫院預約平臺</title> <link rel=" ...
  • 尺寸和邊框: 一、尺寸 行內元素是不能設置寬和高的,其高度是由元素裡面的內容的高度撐起來的; 行內塊元素可以設置寬和高,當行內塊元素沒有設置寬高的時候,行內塊元素的寬高是其預設的寬高; 塊級元素:可以設置寬高,但是如果沒有設置寬,則其預設寬度是該塊級元素的父級元素的寬度的100%;如果沒有設置高度, ...
  • javascript正則表達式驗證IP地址的埠合法性(0-65535) ...
  • 隨著小程式的發展與功能的逐步完善,越來越多的產品需要小程式與 APP 的功能能有一些共性,社區跨平臺的解決方案越來越多,比如 taro 等為代表的把一套代碼編譯成多端運行的機制,本文會使用 Swift 作為原生語言,在 iOS 應用上運行一個小程式 Demo, 使用 Android && React ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 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 ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...