与服务器端交互(Ajax)
Ajax 本身被作为前端技术,提出的时间是比较早的,但是由于种种原因,没有引起人们的普遍关注,而当 Google 的很多产品如 Google Map,GMail 等横空出世的之后,Ajax 才被越来越多的公司所接受并引入到自己的产品中。现在几乎所有的网站都有不同层次的 Ajax 交互,纯静态的页面已经非常少了。
简而言之,Ajax 表示异步 JavaScript 与 XML,事实上,Ajax 与 XML 几乎没有任何关系,因为是异步交互,所以用户的页面不用刷新,在同一个页面中,客户端请求服务数据,当服务数据返回时,通过 JavaScript 将数据片段填充到页面的某个部分,即实现了局部刷 新,这个过程对用户来说实际上是透明的。
Ajax 对服务器端没有限制,一个 Ajax 请求和普通的请求一样,发送数据(GET/POST) 到一个服务端 URL 上。服务端的实现可以是 php,可以是 ASP 或者 JSP 等。以 J2EE 为例,数据发送到 servlet,servlet 对请求进行处理,最后向输出流写入数据,浏览器得到这些 数据之后,会按照 Ajax 调用时的注册情况来回调 JavaScript 函数,JavaScript 在操作 DOM 上具有天生的优势,因此可以很方便的在无刷新的情况下更新页面的部分或者全部。
下面我们来看一个具体的实例,通过异步的向后端的 php 脚本发送请求,页面的内容 得到了局部更新,而无需重刷整个页面。首先编写一个简单的 php 脚本:
<?php
$type = $_REQUEST['type'];
$string = $_REQUEST['string'];
if($type == 0){
echo strtoupper($string);
}else{
echo strtolower($string);
}
?>
php 的逻辑很简单,请求中包含两个参数,type 和 string,如果 type 为 0,则将第二个参数 string 转换为大写返回,否则转换为小写返回。
XMLHttpRequest 对象是进行 Ajax 的核心,所有的主流浏览器都已各自不同的方式进行 了实现,如果不使用客户端 JavaScript 框架,那么使用起来会有所差异:
function initxhr(){
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest(); }else
if(window.ActionXObject){
xhr = new ActiveXObject("Msxml2.XMLHTTP");
}else{
throw new Error("xhr is not supported"); }
}
创建了 XMLHttpRequest 对象之后,我们即可使用它来进行与服务端的异步通信:
function doajax(url, panelId){
if(xhr == null){
initxhr(); }
if(xhr != null){
xhr.open("GET", url, true);
xhr.onreadystatechange = updatePanel(panelId);
xhr.send(null);
}else{
throw new Error("xhr is not inited");
}
}
通过设置 XMLHttpRequest 对象的 onreadystatechange 属性,当服务端产生响应时,浏览器会回调此处注册的函数:
function updatePanel(panelId){
return function(){
if(xhr.readyState == 4){
var response = xhr.responseText;
alert(response);
document.getElementById(panelId).innerHTML = response;
}
}
}
运行结果如下:
图 Ajax 示例
{$ activeFileHint $}