什么是AJAX?
AJAX:”Asynchronous JavaScript and XML”
中文意思:异步JavaScript和XML。
指一种创建交互式网页应用的网页开发技术。
AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词。
不是指一种单一的技术,而是有机地利用了一系列相关的技术:
web标准( Standards-Based Presentation )XHTML+CSS的表示,
使用 DOM( Document Object Model )进行动态显示及交互,
使用 XML 和 XSLT 进行数据交换及相关操作,
使用 XMLHttpRequest 进行异步数据查询、检索.
简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
那,什么是交互式?
普通的网页请求回执过程
AJAX优点
传统的web应用允许用户填写表单(form),当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单,然后返回一个新的网页。
这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML代码往往是相同的。
AJAX应用可以仅向服务器发送并取回必需的数据,并在客户端采用JavaScript处理来自服务器的响应
因为在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%),结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成,所以Web服务器的处理时间也减少了。
使用Ajax的最大优点就是能在不刷新整个页面的前提下维护数据,这使得Web应用程序更为迅捷地响应用户交互,并避免了在网路上发送那些没有改变的信息。
AJAX优点
Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)
与服务器之间的沟通,完全是透过Javascript 来实行
使用XMLHttpRequest 本身传送的资料量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序
AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦
XMLHttpRequest对象
接着介绍XMLHttpRequest对象,因为Ajax应用程序的中心就是它。同时,对于许多数网页开发的实际问题中,它也是最广泛适用的解决方案。
我们还将介绍该对象的GET和POST方法的使用。同时探讨用户使用此对象常见的错误,例如当试图让页面在所有服务器上都能运行时遇到的一些问题。
XMLHttpRequest对象最初是作为IE5中的一个ActiveX控件出现的,随后Mozilla 1.0、Netscape7、Safari1.2和Opera7.60都将它纳入自身。
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。
XMLHttpRequest对象的作用在于,允许用脚本程序通过HTTP连接到服务器,而不是通过HTTP请求响应模型与服务器通信
。 简而言之:它可以异步从服务器端获取txt或者xml数据
创建XMLHttpRequest对象
同步使用XMLHttpRequest对象
按照下面模式,可以同步地XMLHttpRequest对象:
创建对象; - new (叫助手过来)
创建请求; - open (告诉他要去做的事情)
发送请求; - send (去吧)
一、先来创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为:
var xhr = new XMLHttpRequest();
在IE5/6中代码为:
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
注意,JavaScript区分大小写。
function createXmlHttp() { //创建xhr对象 var xhobj = false; try { xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+ } catch (e) { try { xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6 } catch (e2) { xhobj = false; } } if (!xhobj && typeof XMLHttpRequest != 'undefined') { // Firefox, Opera 8.0+, Safari xhobj = new XMLHttpRequest(); } return xhobj; }
创建XMLHttpRequest对象
XMLHttpRequest对象的方法
方法 说明
abort 取消请求
open 需要使用多个参数,第一个设置方法属性,第二个设置目标URL,第 三个指定是同步(false)还是异步(true)发送请求
send 发送请求到服务器
setRequestHeader 添加自定义Http头到请求
getAllResponseHeaders 获取HTTP响应头的整个列表
getResponseHeader 仅获取指定的HTTP响应头
创建XMLHttpRequest对象
二、为XMLHttpRequest对象设置请求参数 1.设置参数: xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true); 2.POST方式:xhr.open("POST", "GetAreasByAjax.aspx", true);xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 3.设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");
三、发送请求:(分别对应GET和POST) xhr.send(null);//GET方式 xhr.send("isAjax=1&na=123");//POST方式
是不是少了什么?请求发送出去后会有响应回来,那我怎么知道请求已经返回了呢?
function createXmlHttp() { //创建xhr对象 var xhobj = false; try { xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+ } catch (e) { try { xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6 } catch (e2) { xhobj = false; } } if (!xhobj && typeof XMLHttpRequest != 'undefined') { // Firefox, Opera 8.0+, Safari xhobj = new XMLHttpRequest(); } return xhobj; }