2018-11-27

AJAX

AJAX是什么???

Asynchronous JavaScript & XML(js請求XML異步的技術(shù))。
是網(wǎng)頁i開發(fā)的一種技術(shù)。
作用就是用于異步,異步發(fā)送 & 請求數(shù)據(jù)。
不需要重新刷新當(dāng)前頁面。
目前更多使用JSON數(shù)據(jù)格式。

AJAX工作流程

下圖表示為AJAX的工作流程:


????客戶端用于發(fā)送請求,服務(wù)器用于將客戶端所請求的東西響應(yīng)給客戶端??蛻舳送ㄟ^XMLHttpRequest對象和服務(wù)器進行對接,對接過程中會有對應(yīng)的狀態(tài)碼和請求碼。如果和服務(wù)器已經(jīng)連接成功,那么服務(wù)器會以XML或者JSON這樣的數(shù)據(jù)格式來返回,返回時先返回到代碼里,此時會得到HTML Response響應(yīng)數(shù)據(jù),針對該響應(yīng)數(shù)據(jù)放到對應(yīng)的文檔中。

XMLHttpRequest對象

它其實是一個對象類型的API。
是在瀏覽器環(huán)境下使用的。
用于客戶端和服務(wù)端之間的數(shù)據(jù)的傳輸和接收。
用于請求XML數(shù)據(jù)以及JSON,甚至是純文本text。

關(guān)于JS獲取元素

getElementById()

GetElementById()可以訪問Document中的某一特定元素,可以通過ID來取得元素,所只能訪問設(shè)置了ID的元素。

<div id="docid"></div>

此時可以用getElementById("docid")來獲取這個元素。

getElementsByName()

getElementsByname()可以通過name來獲得元素。因為name可以重復(fù)所以此處是elements。如果一個文檔中有兩個以上的標簽name相同,那么getElementsByname()可以取得這些元素組成一個數(shù)組。

<div name="docname" id="docid1"></div>
<div name="docname" id="docid2"></id>

此時可以用getElementsByname("docname")來獲得著兩個div,getElementsByname("docname")[0]訪問第一個div,getElementsByname("docname")[1]訪問第二個div。

getElementsByTagName()

getElementsByTagName()通過TagName,即標簽名稱來獲得元素,因為一個document中會有相同的標簽,所以這里也是elements。

<body>
<div name="docname" id="docid1" onClick="bgcolor()"></div>
<div name="docname" id="docid2" onClick="bgcolor()"></div>
</body>
</html>
<script language="JavaScript" type="text/JavaScript">
<!--
function bgcolor(){
    var docnObj=document.getElementsByTagName("div");
    docnObj[0].style.backgroundColor = "black";
    docnObj[1].style.backgroundColor = "black";
}
-->
</script>

這里可以用getElementsByTagName("div")來訪問,用getElementsByTagName("div")[0]訪問第一個div,getElementsByTagName("div")[1]訪問第二個div。

下面是總結(jié)~

訪問某一個特定元素時可以使用getElementById(),訪問標簽時使用getElementsByTagName(),但要注意的是IE瀏覽器并不支持這種方式。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,826評論 1 45
  • 前端開發(fā)面試題 <a name='preface'>前言</a> 只看問題點這里 看全部問題和答案點這里 本文由我...
    自you是敏感詞閱讀 904評論 0 3
  • 前端開發(fā)面試題 面試題目: 根據(jù)你的等級和職位的變化,入門級到專家級,廣度和深度都會有所增加。 題目類型: 理論知...
    怡寶丶閱讀 2,687評論 0 7
  • <a name='html'>HTML</a> Doctype作用?標準模式與兼容模式各有什么區(qū)別? (1)、<...
    clark124閱讀 3,843評論 1 19
  • 細細說來6月的大事終于塵埃落地,高考這個人生中的背水一戰(zhàn)終于結(jié)束,回想三年前的今天,我也曾在考點久久徘徊等待著姐姐...
    余青霞閱讀 513評論 1 2

友情鏈接更多精彩內(nèi)容