首先引入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过程等等知识。（未完。。。）
网友评论