【JavaWeb-Ajax】筆記彙總 --- 全局刷新和局部刷新;ajax 中使用 XMLHttpRequest 對象(四步);json 的使用

来源:https://www.cnblogs.com/Burning-youth/archive/2022/03/23/16047320.html
-Advertisement-
Play Games

非同步請求特點:某一個時刻,瀏覽器可以委托多個非同步請求對象發送請求,無需等待請求處理完成 ...


1、全局刷新和局部刷新:


1)全局刷新:整个浏览器被新的数据覆盖,在网络中传输大量的数据(浏览器需要加载,渲染页面)。

2)局部刷新:在浏览器的内部,发起请求,获取数据,改变页面中的部分内容,其余的页面无需加载和渲染(网络中数据传输量少, 给用户的感受好)。

ajax 是用来做局部刷新的,局部刷新使用的核心对象是【异步对象(XMLHttpRequest)】,这个异步对象存在浏览器内存中 ,使用 javascript 语法创建和使用。

 

2、Asynchronous JavaScript and XML:


ajax ---> Asynchronous JavaScript and XML(异步的 JavaScript 和 XML):

  • xml 是网络中的一种传输的数据格式(json 替换了 xml)

1)ajax 是一种做局部刷新的新方法,不是一种语言,ajax包含的技术主要有 javascript , dom , css ,  xml 等等(核心是 javascript 和 xml)。

2)javascript 负责创建异步对象, 发送请求, 更新页面的 dom 对象,ajax 请求需要服务器端的数据。

 

3、ajax 中使用 XMLHttpRequest 对象(四步):


1)创建异步对象(第一步):

var xmlHttp = new XMLHttpRequest();

 

2)给异步对象绑定事件(第二步):

xmlHttp.onreadystatechange //当异步对象发起请求,获取了数据都会触发这个事件,这个事件需要指定一个函数,在函数中处理状态的变化

如何获取服务器端返回的数据?

  • 使用异步对象的属性 responseText    // xmlHttp . responseText 

当请求的状态变化时,异步对象会自动调用 onreadystatechange 事件对应的函数(回调:当请求的状态变化时,异步对象会自动调用 onreadystatechange 事件对应的函数

栗子:

xmlHttp.onreadystatechange= function(){
    //处理请求的状态变化
    if(xmlHttp.readyState == 4 && xmlHttp.status== 200 ){
    
        //可以处理服务器端的数据,更新当前页面
        var data = xmlHttp.responseText;
        document.getElementById("name").value= data;
    }
} 

 

readyState(异步对象的属性) --- 异步对象请求的状态变化:

  •    0:创建异步对象时    //new XMLHttpRequest ( ) ; 
  •    1:初始异步请求对象    //xmlHttp.open ( ) ;
  •    2:发送请求    //xmlHttp.send ( ) ;
  •    3:从服务器端获取了数据,注意3是异步对象内部使用, 获取了原始的数据
  •    4:异步对象把接收的数据处理完成后,此时开发人员在4的时候处理数据(更新当前页面)

    异步对象的 status 属性,表示网络请求的状况(200, 404, 500),当 status == 200 时,表示网络请求成功。

 

3)初始异步请求对象(第三步):

异步的方法:

  • open ( ) . xmlHttp . open ( get / post ,  "服务器端的访问地址" ,  true / false ) // true 为异步请求,false 为同步请求 ,默认为 true
  • 异步请求特点:

               1)某一个时刻,浏览器可以委托多个异步请求对象发送请求,无需等待请求处理完成;

               2)浏览器委托异步请求对象工作期间,浏览器处于活跃状态。可以继续向下执行其他命令;

               3) 当响应就绪后再对响应结果进行处理 。

  • 同步请求特点:

               1)某一个时刻,浏览器只能委托一个异步请求对象发送请求,必须等待请求处理完成;

               2)浏览器委托异步请求对象工作期间,浏览器处于等待状态。不能执行其他命令;

               3)不推荐使用。 

栗子:

xmlHttp.open("get", "loginServlet?name=zs&pwd=123",true);

 

4)使用异步对象发送请求(第四步):

xmlHttp.send();

 

4、json使用:


ajax(发起请求)---> servlet ---> 返回一个 json 格式的字符串(可以将 json 对象格式看作成一个 "key:value"格式) // { name:"河北", jiancheng:"冀","shenghui":"石家庄"}

json分类:

  • json对象 ,JSONObject
  • json数组, JSONArray    // [ {  name:"河北", jiancheng:"冀","shenghui":"石家庄"} , { name:"山西", jiancheng:"晋","shenghui":"太原" } ]

为什么要使用 json?

  • json 格式好理解
  • json 格式数据在多种语言中,比较容易处理。 使用 java, javascript 读写 json 格式的数据比较容易
  • json 格式数据它占用的空间小,在网络中传输快, 用户的体验好

处理 json 的工具库: gson(google); fastjson(阿里),jackson, json-lib

  • 在 js 中,可以把 json 格式的字符串,转为 json 对象, json 中的 key,就是 json 对象的属性名。

 


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

-Advertisement-
Play Games
更多相關文章
  • 開發者通過華為分析服務下載所需的事件數據,這些數據可以導入到開發者自有的分析系統中,用於構建自定義報告或生成受眾群體的個性化分析等,從而幫助制定切實有效的營銷活動。數據導出支持按照用戶屬性和導出事件作為過濾條件,同時展示“預計可導出事件數”。開發者選擇不同的時間段和過濾條件,預估事件數就會隨之改變。 ...
  • 關於HarmonyOS 自定義View我們可以學習HarmonyOS自定義組件 這篇文檔,今天描述自定義折線圖的功能,我們從“準備工作”、“初始化畫筆”、“繪畫折線圖”、“運行效果圖”,這四個方面進行描述 1. 準備工作 想要實現折線圖我們瞭解Paint,獲取屏幕的寬高,這幾個功能的實現 獲取屏幕的 ...
  • 一、新增的語義化佈局標簽: 1. header和footer標簽 頁面中一個內容區塊的頭部和尾部佈局 2. nav 導航區域 3. article標簽 頁面中獨立的內容部分佈局 4. aside標簽 在獨立內容之外,但是又與article有關聯的部分佈局 二、新增媒體標簽 1. audio(音頻) ...
  • 前言 在 《一篇帶你用 VuePress + Github Pages 搭建博客》中,我們使用 VuePress 搭建了一個博客,最終的效果查看:TypeScript 中文文檔。 在搭建這樣一個博客後,其實還有很多的優化工作需要做,本篇我們來盤點一下那些完成基礎搭建後必做的 10 個優化。 1. 開 ...
  • 前言 大部分的面試者在IT行業面試中,提及設計模式,可以列舉一大堆,但是面試官要求細說的時候,往往部分基礎不夠牢固的同學只能提及簡單工廠。今天我們來對面試過程中最常見的簡單工廠、工廠方法和抽象工廠進行一個剖析,喜歡的朋友可以點個關註哦。 正文 在面向對象的編程中,一般通過繼承和虛函數來提供抽象能力, ...
  • 外觀模式又叫門面模式,屬於結構型模式;是一種通過為多個複雜的子系統提供一個一致的介面,而使這些子系統更加容易被訪問的模式。該模式對外有一個統一介面,外部應用程式不用關心內部子系統的具體細節,這樣會大大降低應用程式的複雜度,提高了程式的可維護性。 現在微服務和模塊化越來越流行,我們都會把一個複雜的系統 ...
  • 《零基礎學Java》 標簽組件與圖標 在Swing中顯示文本或提示信息可以使用標簽(JLabel),它可以顯示文字和圖標。 JLabel 標簽組件 標簽由 JLabel類 定義,它的父類為 JComponent類。標簽可以顯示一行只讀文本,一個圖像(它不能產生任何事件)。 JLabel類常用的構造方 ...
  • 1 項目介紹 最開始是一個單體應用,所有功能模塊都寫在一個項目里,後來覺得項目越來越大,於是決定把一些功能拆分出去,形成一個一個獨立的微服務,於是就有個問題了,登錄、退出、許可權控制這些東西怎麼辦呢?總不能每個服務都複製一套吧,最好的方式是將認證與鑒權也單獨抽離出來作為公共的服務,業務系統只專心做業務 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...