您的位置：首页 > 理论基础 > 计算机网络

Ajax学习笔记（一）

2006-09-05 21:07 295 查看

[align=center]学习AJAX[/align]
[align=center]2006年09月04日 00:29:17[/align]
[align=left][/align]
第一章、关于Ajax及其历史
Ajax不是一门新的技术，是对JavaScript和XML技术的深入探讨。可以说是新瓶装旧酒。
Ajax中最最重点的内容是XMLHttpRequest，正是由于XMLHttpRequest在现代浏览器中的广泛支持，才使得Ajax技术重新被大家重视起来。
利用Ajax可以实现与服务器端的异步刷新、局部刷新等难题。这在以往也有解决方案，但从来没有如此简单过。
Ajax并非没有缺点。基于JavaScript脚本的客户端运行，使得安全性是Ajax的弱点。而且在不同浏览器版本上，也许需要编写额外甚至是特定的代码来支持通用性。IE 4.0以前，是不支持XMLHttpRequest的，虽然现在此类浏览器已经很少，但必须考虑到这个事实。

第二章、XMLHttpRequest对象
XMLHttpRequest最早在IE 5中以ActiveX组件形式实现。现在，流行的浏览器都支持该技术。他们都有统一的函数与方法，但形式可能不同。有的是ActiveX，有的是javascript对象。因此，在编写程序创建一个XMLHttpRequest时需要判断一下浏览器的版本。
创建一个XMLHttpRequest对象的代码如下：
var xmlhttp;

function createXMLHttpRequest(){
if( window.ActiveXObject ){
     xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
  else if( window.XMLHttpRequest ){
     xmlhttp = new XMLHttpRequest();
}
}

XMLHttpRequest的方法如下：

方法	描述
abort()	停止当前请求
getAllResponseHeaders()	返回所有HTTP请求的响应首部
getResponseHeader("header")	返回指定响应首部的串值
open("method","url")	建立对服务器的调用。method参数可以是"GET/POST/PUT"，url参数可以是相对URL或者绝对URL。这个方法还有其他的3个参数
send(content)	向服务器发送请求。如果method为GET，则参数为null
setResponseHeader("header","value")	把指定首部设置为所提供的值。在设置任何首部之前，必须先调用open方法

XMLHttpRequest的属性如下：

属性	描述
onreadystatechange	该属性指向某javascript函数的指针。说明该XMLHttpRequest调用的方法
readystate	请求的状态。有5个状态：0＝未初始化，1＝正在加载，2＝已加载，3＝交互中，4＝完成
responseText	服务器的响应，为一个串
responseXML	服务器的响应，表示为XML，这个对象可以解析为一个DOM对象
status	服务器的HTTP状态码。（200＝OK，404＝Not Found等等）
statusText	HTTP状态码对应的文字（OK，Not Found等等）

交互示例：
<html>
<head>a simple exanple of XMLHttpRequest</head>
<script type="text/javascript">
var xmlhttp;

function createXMLHttpRequest(){
if( window.ActiveXObject ){
   xmlhttp = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else if( window.XMLHttpRequest ){
  xmlhttp = new XMLHttpRequest();
}
}

function startRequest(){
createXMLHttpRequest();
xmlhttp.onreadystatechange = handleStateChanges;
xmlhttp.open( "GET","simpleResponse.xml" );
xmlhttp.send(null);
}

function handleStateChanges(){
if( xmlhttp.readyState == 4 )
{
  if( xmlhttp.status == 200 )
  {
   alert("The server replied with:" + xmlhttp.responseText ) ;
  }
}
}
</script>

<body>
<form action="#">
<input type="button" value="start basic asynchronous request" onclick="startRequest();" />
</form>
</body>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： ajax xmlhttprequest javascript asynchronous 服务器浏览器

相关文章推荐

新的分享

章节导航