前言 - AJAX 简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
学习 AJAX 前需要先了解:HTML/XHTML,CSS,JavaScript/DOM;
部分参考资料:Click Here
什么是 AJAX?
AJAX = Asynchronous JavaScript and XML.
有句话被叫做AJAX 是开发者的梦想;
AJAX 作为一种用于创建快速动态网页的技术。
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
有很多使用 AJAX 的应用程序案例:Google Maps、Gmail、Youtube 和 Facebook。
这里提及几个常见的使用 AJAX 的场景:
- 观看视频时刷新评论并不影响视频的正常播放
- 登录账号,不影响当前显示内容
- ...
引用一下菜鸟教程上的工作示意图
关于 jQuery 与 AJAX
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
如果没有 jQuery,AJAX 编程还是有些难度的。
编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。
AJAX的Internet标准
AJAX是基于现有的Internet标准,并且联合使用它们:
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
AJAX应用程序与浏览器和平台无关的!
AJAX - XMLHttpRequest 对象
Ajax 的核心是 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分,而不需要重新加载整个页面。
创建 XMLHttpRequest 对象
所有现代浏览器(Chrome、IE7+、Firefox、Safari 以及 Opera)都有内建的 XMLHttpRequest 对象。
创建 XMLHttpRequest 的语法是:
var http_request = new XMLHttpRequest();
老版本的 Internet Explorer(IE5 和 IE6)使用 ActiveX 对象:
var http_request = new ActiveXObject("Msxm12.XMLHTTP");
或者
var http_request = new ActiveXObject("Microsoft.XMLHTTP");
为了提高程序的兼容性,可以创建一个跨浏览器的 XMLHttpRequest 对象。创建一个跨浏览器的 XMLHttpRequest 对象其实很简单,只需要判断不同浏览器的实现方式,如果浏览器提供了XMLHttpRequest 类,则直接创建一个实例,否则实例化一个 ActiveX 对象。具体代码如下
var http_request;
if (window.XMLHttpRequest){
// 用于现代浏览器的代码
http_request = new XMLHttpRequest();
} else if(window.ActiveXObject){ // 应对老版本 IE 浏览器的代码
try{
http_request = new ActiveXObject("Msxm12.XMLHTTP");
} catch(e){
try{
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {}
}
}
上面的代码中,调用 window.ActiveXObject 将返回一个对象,或是一个 null,在 if 语句中即使返回对象也是当作 True 来看待;
由于 JavaScript 具有动态类型的特点,而且
XMLHttpRequest对象在不同浏览器上的实例是兼容的,所以可以用同样的方法访问XMLHttpRequest实例的属性和方法,不需要考虑创建该实例的方法是什么。
XMLHttpRequest 对象方法
XMLHttpRequest 对象属性