当你听到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网页使用的

表单查询,两者最大的区别在于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实现随机播放音乐功能)



`


最后

这是我对Ajax的浅薄的认识梳理出来最简单的范例,提供给大家参考。当然Ajax技术不仅仅于此,对于低版本的IE,需要换一个ActiveXObject对象。跨域。readystates 的0到4过程等等知识。(未完。。。)

你可能感兴趣的:(当你听到Ajax,你应该想到什么)