當你聽到Ajax,你應該想到什么

首先引入MDN對Ajax的介紹

(異步JavaScript和XML)Asynchronous JavaScript + XML, 其本身不是一種新技術,而是一個在 2005年被Jesse James Garrett提出的新術語,用來描述一種使用現有技術集合的‘新’方法, 包括: HTML or XHTML, Cascading Style Sheets, JavaScript, The Document Object Model, XML, XSLT, 以及最重要的 XMLHttpRequest object.當使用結合了這些技術的AJAX模型以后, 網頁程序能夠逐步快速地將更新呈現在用戶界面上,不需要重載(刷新)整個頁面。這使得程序能夠更快地回應用戶的操作。

根據文檔的解釋,我們很清晰的知道一件事:當你聽到Ajax的時候,其實他說的是一種方法,一種集合了很多技術的方法,可能提出者只是為了方便稱呼只拿出了JavaScript和XML作為名字。


那么作為一種技術的集合,Ajax的核心技術是什么?通俗的說這個Ajax社團的"老大"是誰?

XMLHttpRequest

首先看看MDN對這個"老大"的介紹

XMLHttpRequest 是一個API, 它為客戶端提供了在客戶端和服務器之間傳輸數據的功能。它提供了一個通過 URL 來獲取數據的簡單方式,并且不會使整個頁面刷新。這使得網頁只更新一部分頁面而不會打擾到用戶。

XMLHttpRequest是一個 JavaScript 對象,它最初由微軟設計,隨后被 Mozilla、Apple 和 Google采納. 如今,該對象已經被 W3C組織標準化. 通過它,你可以很容易的取回一個URL上的資源數據. 盡管名字里有XML, 但 XMLHttpRequest可以取回所有類型的數據資源,并不局限于XML。 而且除了HTTP ,它還支持file和 ftp協議.

XMLHttpRequest是一個JavaScript內置對象,通過它我們可以實現異步對服務器發送請求,獲得響應。當然在這個技術出來之前,web網頁使用的<form>表單查詢,兩者最大的區別在于Ajax可以在不刷新頁面的情況下,獲得數據。


然后Ajax實現原理是什么

知道Ajax是一個技術的集合,XMLHttpRequest是集合中核心的技術,
那么我們就可以利用核心技術,輻射其他技術,實現Ajax。

1.申明XMLhttpRequest
var xml =new XMLHttpRequest()

2.向服務器發送請求
xml.open('GET','URL',true)
xml.send()

3.判斷服務器
xml.onreadystatechange = function (){
if(xml.readyState === 4&&xml.status===200){
//通過response請求拿到數據
}
}

范例(調用API,使用audio實現隨機播放音樂功能)

<script type="text/javascript">
    var btn = document.querySelector('.play button')
    var btn1= document.querySelector('.play audio')
    
    btn.addEventListener('click',function(){
        
        var xml = new XMLHttpRequest
        
        xml.onreadystatechange = function(){
            if(xml.readyState === 4&& xml.status===200){
                var music = JSON.parse(xml.responseText)
                var URL = music.song['0'].url
                $('audio').attr('src',URL)
                
            }   
        }


        xml.open('GET','http://api.jirengu.com/fm/getSong.php',true)
        xml.send()
    })


</script>
<script src="http://7xv43g.com1.z0.glb.clouddn.com/jQuery/jquery-1.12.4.min.js"></script>

`


最后

這是我對Ajax的淺薄的認識梳理出來最簡單的范例,提供給大家參考。當然Ajax技術不僅僅于此,對于低版本的IE,需要換一個ActiveXObject對象。跨域。readystates 的0到4過程等等知識。(未完。。。)

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • AJAX 原生js操作ajax 1.創建XMLHttpRequest對象 var xhr = new XMLHtt...
    碧玉含香閱讀 3,274評論 0 7
  • 本文詳細介紹了 XMLHttpRequest 相關知識,涉及內容: AJAX、XMLHTTP、XMLHttpReq...
    semlinker閱讀 13,752評論 2 18
  • 大家好,我是IT修真院深圳分院第3期的學員,一枚正直純潔善良的前端程序員,今天給大家分享一下,修真院官網前端工程師...
    大大頭大閱讀 7,847評論 1 72
  • 五十三:請解釋 JavaScript 中 this 是如何工作的。1.方法調用模式當一個函數被保存為一個對象的屬性...
    Arno_z閱讀 596評論 0 2
  • 時光隧道,往事如水般緩緩流出 在有留聲機陪伴的日子里,我的歲月是用來聽的 這是一個快速消費的時代,許多人習慣讓自己...
    意慢閱讀 782評論 0 1