首先引入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过程等等知识。(未完。。。)