AJAX學習(1)

来源:https://www.cnblogs.com/Aons0812/archive/2022/08/01/16539594.html
-Advertisement-
Play Games

基礎確認:HTML、CSS、JavaScript AJAX可以: 不刷新頁面更新網頁 在頁面載入後從伺服器請求數據 在頁面載入後從伺服器接收數據 在後臺向伺服器發送數據 Ajax 的核心是 XMLHttpRequest 對象,用於和伺服器交換數據。 xmlhttp.open("GET","ajax_ ...


基礎確認:HTML、CSS、JavaScript

AJAX可以:

  1. 不刷新頁面更新網頁
  2. 在頁面載入後從伺服器請求數據
  3. 在頁面載入後從伺服器接收數據
  4. 在後臺向伺服器發送數據   

Ajax 的核心是 XMLHttpRequest 對象,用於和伺服器交換數據。

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

非同步和同步的區別

  非同步請求就當發出請求的同時,瀏覽器可以繼續做任何事,Ajax發送請求並不會影響頁面的載入與用戶的操作,相當於是在兩條線上,各走各的,互不影響。一般預設值為true。非同步請求可以完全不影響用戶的體驗效果,無論請求的時間長或者短,用戶都在專心的操作頁面的其他內容,並不會有等待的感覺。

  同步請求即是當前發出請求後,瀏覽器什麼都不能做,必須得等到請求完成返回數據之後,才會執行後續的代碼,相當於是排隊,也就是說,當JS代碼載入到當前ajax的時候會把頁面里所有的代碼停止載入,頁面處於一個假死狀態,當這個ajax執行完畢後才會繼續運行其他代碼頁面解除假死狀態(即當ajax返回數據後,才執行後面的function)。

方法 描述
open(method,url,async)

規定請求的類型、URL 以及是否非同步處理請求。

  • method:請求的類型;GET 或 POST
  • url:文件在伺服器上的位置
  • async:true(非同步)或 false(同步)
send(string)

將請求發送到伺服器。

  • string:僅用於 POST 請求

一般建議使用post方式,get方式有概率獲取到的是緩存裡面的結果

//創建 XMLHttpRequest 對象的語法
variable=new XMLHttpRequest();
//老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveX 對象:
variable=new ActiveXObject("Microsoft.XMLHTTP");

當然也可以避免這個情況, 在URL 添加一個唯一的 ID既可以避免

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

 get和post發送帶信息的區別

//get
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
//post
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
//設置請求頭
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//post內容,鍵值對,& 符號分割
xmlhttp.send("fname=Henry&lname=Ford");
方法 描述
setRequestHeader(header,value)

向請求添加 HTTP 頭。

  • header: 規定頭的名稱
  • value: 規定頭的值

 現在基本上都不用這種原生的ajax了,框架內的更好用

如需獲得來自伺服器的響應,請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。

屬性 描述
responseText 獲得字元串形式的響應數據。
responseXML 獲得 XML 形式的響應數據。

 


responseText 屬性

如果來自伺服器的響應並非 XML,請使用 responseText 屬性。

responseText 屬性返回字元串形式的響應,因此您可以這樣使用:

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 

當請求被髮送到伺服器時,我們需要執行一些基於響應的任務

XMLHttpRequest 對象的三個重要的屬性:

屬性 描述
onreadystatechange 存儲函數(或函數名),每當 readyState 屬性改變時,就會調用該函數。
readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

  • 0: 請求未初始化
  • 1: 伺服器連接已建立
  • 2: 請求已接收
  • 3: 請求處理中
  • 4: 請求已完成,且響應已就緒
status 200: "OK"
404: 未找到頁面

 

本文來自博客園,作者:Aons謙,轉載請註明原文鏈接:https://www.cnblogs.com/Aons0812/p/16539594.html


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

-Advertisement-
Play Games
更多相關文章
  • 前言 大晚上的,老是刷到有關pprof的文章,忍不住看了幾篇文章...寫個學習筆記記錄下~ 正文: 1.pprof是什麼? pprof是go內置的性能調優工具,可以藉助一些工具以圖形化的方式展示出來某些介面占用cpu資源的詳情。 2.專項用途: 1.cpu 主要測試占用cpu資源比較多的函數或者數據 ...
  • 一 、with語句的原理 上下文管理協議(Context Management Protocol):包含方法 __enter__()和__exit__(),支持該協議的對象要實現這兩個方法。 上下文管理器(Context Manager):支持上下文管理協議的對象,這種對象實現了__enter__( ...
  • 前言: 今天用for range寫了個demo,發現無論怎麼運行,最後的結果是一直是最後一個。自己思考過後,又和其他伙伴商量了下,最終算是解決了自己的疑惑。 正文: 下麵我們來看個例子: m := make(map[int]*int) arr := []int{1, 2, 3, 4, 5} for ...
  • 簡單記錄,分享下這段時間學習Flask所用過的資料 學習Flask的這段時間,我在網上找了挺多,也看了挺多的資料,有視頻,也有文檔教程。 然後我發現,這方面資料有點雜而不全,就沒有特別好的的教程可看,而且對於咱這樣的新手如果一開始就去看官方的文檔,也看的迷迷糊糊,最後發現還是什麼都不會。 經過我這段 ...
  • 兄弟們,今天來實現一下用Python編寫密碼檢測器,並輸出詳細信息! 本次涉及知識點 文件讀寫 基礎語法 字元串處理 迴圈遍歷 代碼展示 # 導入系統包 import platform # 我給大家準備了一些資料,包括2022最新Python視頻教程、Python電子書10個G (涵蓋基礎、爬蟲、數 ...
  • 面向對象03 10.抽象類 abstract修飾符可以用來修飾方法也可以修飾類,如果修飾方法,那麼該方法就是抽象方法;如果修飾類,那麼該類就是抽象類 抽象類中可以沒有抽象方法,但是有抽象方法的類一定要聲明為抽象類 抽象類,不能使用new關鍵字來創建對象,它是用來讓子類繼承的 抽象方法,只有方法的聲明 ...
  • indexOf和subString取值走向圖;首先簡單介紹這者的作用,具體可以看官方API 1.indexOf的作用: 就是獲取某個字元串的其中具體一個字元的位置 2.subString的作用: 就是大家熟悉的切割,從那裡到那裡比如,從第一個到第五個等;當這個方法是重載的,不只有我說的這個方法;具體 ...
  • 明敏 曉查 發自 凹非寺 量子位 報道 | 公眾號 QbitAI 程式 bug 也能負負得正嗎? 還真可以。 比如程式員們再熟悉不過的排序演算法,通過兩個“bug”居然能歪打正著,實在令人匪夷所思。 請看這位程式員寫的數組升序排序代碼: for i = 1 to n do for j = 1 to n ...
一周排行
    -Advertisement-
    Play Games
  • 經常看到有群友調侃“為什麼搞Java的總在學習JVM調優?那是因為Java爛!我們.NET就不需要搞這些!”真的是這樣嗎?今天我就用一個案例來分析一下。 昨天,一位學生問了我一個問題:他建了一個預設的ASP.NET Core Web API的項目,也就是那個WeatherForecast的預設項目模 ...
  • 很多軟體工程師都認為MD5是一種加密演算法,然而這種觀點是不對的。作為一個 1992 年第一次被公開的演算法,到今天為止已經被髮現了一些致命的漏洞。本文討論MD5在密碼保存方面的一些問題。 ...
  • Maven可以使我們在構建項目時需要用到很多第三方類jar包,如下一些常用jar包 而maven的出現可以讓我們避免手動導入jar包出現的某些問題,它可以自動下載那須所需要的jar包 我們只需要在創建的maven項目自動生成的pom.xml中輸入如下代碼 <dependencies> <!--ser ...
  • 來源:https://developer.aliyun.com/article/694020 非同步調用幾乎是處理高併發Web應用性能問題的萬金油,那麼什麼是“非同步調用”? “非同步調用”對應的是“同步調用”,同步調用指程式按照定義順序依次執行,每一行程式都必須等待上一行程式執行完成之後才能執行;非同步調 ...
  • 1.面向對象 面向對象編程是在面向過程編程的基礎上發展來的,它比面向過程編程具有更強的靈活性和擴展性,所以可以先瞭解下什麼是面向過程編程: 面向過程編程的核心是過程,就是分析出實現需求所需要的步驟,通過函數一步一步實現這些步驟,接著依次調用即可,再簡單理解就是程式 從上到下一步步執行,從頭到尾的解決 ...
  • 10瓶毒藥其中只有一瓶有毒至少需要幾隻老鼠可以找到有毒的那瓶 身似浮雲,心如飛絮,氣若游絲。 用二分查找和二進位位運算的思想都可以把死亡的老鼠降到最低。 其中,二進位位運算就是每一隻老鼠代表一個二進位0或1,0就代表老鼠存活,1代表老鼠死亡;根據數學運算 23 = 8、24 = 16,那麼至少需要四 ...
  • 一、Kafka存在哪些方面的優勢 1. 多生產者 可以無縫地支持多個生產者,不管客戶端在使用單個主題還是多個主題。 2. 多消費者 支持多個消費者從一個單獨的消息流上讀取數據,而且消費者之間互不影響。 3. 基於磁碟的數據存儲 支持消費者非實時地讀取消息,由於消息被提交到磁碟,根據設置的規則進行保存 ...
  • 大家好,我是陶朱公Boy。 前言 上一篇文章《關於狀態機的技術選型,最後一個真心好》我跟大家聊了一下關於”狀態機“的話題。從眾多技術選型中我也推薦了一款阿裡開源的狀態機—“cola-statemachine”。 於是就有小伙伴私信我,自己項目也考慮引入這款狀態機,但網上資料實在太少,能不能系統的介紹 ...
  • 使用腳本自動跑實驗(Ubuntu),將實驗結果記錄在文件中,併在實驗結束之後將結果通過郵件發送到郵箱,最後在windows端自動解析成excel表格。 ...
  • 話說在前面,我不是小黑子~ 我是超級大黑子😏 表弟大周末的跑來我家,沒事幹天天騷擾我,搞得我都不能跟小姐姐好好聊天了,於是為了打發表弟,我決定用Python做一個小游戲來消耗一下他的精力,我思來想去,決定把他變成小黑子,於是做了一個坤坤打籃球的游戲,沒想到他還挺愛玩的~ 終於解放了,於是我把游戲寫 ...