Posted by & filed under Uncategorized.

About Aslent

Weili Guan has written 43 post in this blog.

En...Yh....

一.AJAX简介
Ajax并不是一个新生的语言,它是一系列语言的结合体:HTML/XHTML、CSS、DOM、XML、XSLT、XMLHttp、JavaScript。可以说Ajax涉及的知识面的确是很广的,在Web开发中为我们提供了很方便的交互式用户体验模式。
Ajax技术特点:
1) 页面无刷新
2) 不打断用户的操作,用户的体验好。
3) 按需获取数据,浏览器与服务器之间数据的传输量减少。
4) 是一个标准技术,不需要下载任何的揑件。
5) 可以利用客户端(浏览器)的计算能力。
二.AJAX原理:
以往我们浏览网页的原理是由Client向Server提交页面申请,再由Server将申请通过HTTP传回给Client生成浏览页面:

( 传统web应用模型)
这样处理的结果就是当服务器在处理请求的过程中,用户是一直对着白色窗口等待着的。
当页面加载后,为什么还要让用户每次再花一半的时间从服务取数据?为什么老是让用户看到程序去服务器取数据呢?AJAX恰好弥补了这个缺陷。
使用Ajax后的工作原理如下图,可见通过Ajax在用户交互方面有了很大改进,用户可以不用为提交了Form而长时间等待服务器应答,而且通过Ajax也可以开发出华丽的Web交互页面。

(ajax模型)

那么AJAX是如何做到的呢?
通过在用户和服务器之间引入一个Ajax引擎,可以消除Web的开始-停止-开始-停止这样的交互过程. 它就像增加了一层机制到程序中,使它响应更灵敏,而它的确做到了这一点。

不像加载一个页面一样,在会话的开始,浏览器加载了一个Ajax引擎—采用JavaScript编写并且通常在一个隐藏frame中。这个引擎负责绘制用户界面以及与服务器端通讯。Ajax引擎允许用异步的方式实现用户与程序的交互--不用等待服务器的通讯。所以用户再不不用打开一个空白窗口,看到等待光标不断的转,等待服务器完成后再响应。通常要产生一个HTTP请求的用户动作现在通过JavaScript调用Ajax引擎来代替. 任何用户动作的响应不再要求直接传到服务器—例如简单的数据校验,内存中的数据编辑,甚至一些页面导航—引擎自己就可以处理它. 如果引擎需要从服务器取数据来响应用户动作—假设它提交需要处理的数据,载入另外的界面代码,或者接收新的数据—引擎让这些工作异步进行,通常使用XML, 不用再担误用户界面的交互。

三、什么是AJAX引擎:
Ajax引擎,实际上是一个比较复杂的JavaScript应用程序,用来处理用户请求,读写服务器和更改DOM内容。JavaScript的Ajax引擎读取信息,并且互动地重写DOM,这使网页能无缝化重构,也就是在页面已经下载完毕后改变页面内容,这是我们一直在通过JavaScript和DOM在广泛使用的方法,但要使网页真正动态起来,不仅要内部的互动,还需要从外部获取数据,在以前,我们是让用户来输入数据并通过DOM来改变网页内容的,但现在,XMLHTTPRequest,可以让我们在不重载页面的情况下读写服务器上的数据,使用户的输入达到最少。

四.AJAX的使用
在使用Ajax时,需要创建XMLHttpRequest对象,不同浏览器的创建方式略有不同:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
function createXmlHttpRequest(){//创建XMLHttpRequest对象
var xmlHttp;
try { //Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
}
catch (e) {
try { //Internet Explorer
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
}
catch (e) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
catch (e) {
}
}
}
return xmlHttp;
}
关于XMLHttpRequest对象属性与方法一览:

在利用Ajax向服务器提交请求时,需要先确定三点:
1.使用GET或POST方式提交请求?
如果是post请求,在调用send方法之前需要设置请求头:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
//xhr是xmlHttpRequest对象

2.需要请求的页面(Page)或代码(Script)?
一般为了不让浏览器缓存,我们会在请求url后面加上一个时间戳:
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
xhr.open(“post”,”/AJAX/servlet/CheckUsernameServlet?time = “+new Date().getTime());

3.将请求的页面或代码加载到页面什么位置?
[javascript] view plaincopy在CODE上查看代码片派生到我的代码片
function makerequest(serverPage, objID)
{
//将要被替换的页面位置obj
var obj = document.getElementById(objID);
//发出页面(serverPage)请求
xmlhttp.open(“GET”, serverPage);
xmlhttp.onreadystatechange = function()
{
if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
{
//将服务器返回的信息替换到页面位置obj
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}

Leave a Reply

  • (will not be published)