当你听到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过程等等知识。（未完。。。）