读《Ajax基础教程》(1)

最新推荐文章于 2025-09-12 14:04:02 发布

lybra

最新推荐文章于 2025-09-12 14:04:02 发布

阅读量513

点赞数

CC 4.0 BY-SA版权

文章标签： ajax xmlhttprequest javascript function 服务器脚本

本文链接：https://blog.youkuaiyun.com/lybra/article/details/2151986

本文介绍了Ajax的基本概念和发展历程，探讨了其在现代Web应用中的作用。文章详细解释了XMLHttpRequest对象的使用方法，包括创建对象、发送请求及处理响应的过程。此外，还讨论了GET与POST方法的区别以及远程脚本的概念。

Ryan Asleson, Nathaniel T. Schutta著
金灵等译
人民邮电出版社

第1章 Ajax 简介

1.1 Web应用简史

1.2 浏览器历史

1.3 Web应用的发展历程

CGI（Common Gateway Interface）
applet，JavaScript，servlet，ASP，PHP，Flash
DHTML革命
XML衍生语言
Ajax

1.4 可用性问题

1.5 相关技术

1.6 使用场合

1.7 设计考虑

1.8 小结

第2章使用XMLHttpRequest对象

XMLHttpRequest最早是在IE5中以ActiveX组件形式实现的。

2.1 XMLHttpRequest对象概述

在使用XMLHttpRequest对象发送请求和处理响应之前，必须先用JavaScript创建一个XMLHttpRequest对象。

var xmlHttp;
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

2.2 方法和属性

2.3 交互示例

1. 一个客户端事件出发一个Ajax事件，例如
<input type="text" id="email" name="email" onblur="validateEmail()">

2. 创建XMLHttpRequest对象的一个实例，使用open()方法建立调用，并设置URL以及所希望的HTTP方法。请求实际上通过一个send（）方法调用触发

var xmlHttp;
function validateEmail() {
var email = document.getElementById(“email”);
var url = “validate?email=” + escape(email.value);
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
}
else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
xmlHttp.open(“GET”, url);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

3. 向服务器作出请求。可能调用servlet，cgi脚本或任何服务器端技术。

4. 服务器可以作你想做的事情，包括访问数据库，甚至访问另一个系统

5. 请求返回到浏览器。Content-type设置为text/xml，XMLHttpRequest对象只能处理text/html类型的结果。

6. callback()函数会检查XMLHttpRequest对象的readyState属性，然后查看服务器返回的状态吗。
function callback() {
if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200 {
   //do something interesting here
  }
}
}

通常 web上提供的各种框架和工具包负责基本的连接和浏览器抽象，有些还增加了用户界面组件。比较成熟的库包括libXMLRequest, RSLite, sarissa, JSON (JavaScript Object Notation), JSRS, DWR (Direct Web Remoting), RoR(Ruby on Rails).

2.4 GET与POST

可以使用GET从服务器获取数据，要避免使用GET调用改变服务器上的状态。应当使用POST来改变服务器上的状态。
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

2.5 远程脚本（Remote Scripting）

2.5.1 远程脚本概述
远程脚本是一种远程过程调用类型。实现远程脚本的通常做法包括将脚本与一个IFRAME结合，以及由服务器返回JavaScript，然后再在浏览器中运行这个JavaScript。
2.5.2 远程脚本的示例

2.6 如何发送简单请求

<!DOCTYPE html PUBLIC "-//W3C .... "xxx.dtd">
<html xmlns="http://.../xhtml">
<head>
<title>Simple XMLHttpRequest</title>
<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 = handleStateChange;
xmlHttp.open("GET", "simpleResponse.xml", true);
xmlHttp.send(null);
}
function handleStateChange() {
if (xmlHttp.readyState == 4) {
  if (xmlHttp.status == 200) {
   alert("The server replied with:" + xmlHttp.responseText);
}
}
</script>
</head>
<body>
<form action="#">
  <input type="button" value="start basic asynchronous request" onclick="startRequest();"/>
</form>
</body>
</html>