标签：
Ajax应用程序所用的基本技术：
HTML用于建立Web表单并确定应用程序其他部分使用的字段。
JavaScript代码是运行Ajax应用程序的核心代码，帮助改进与服务器应用程序的通信。
DHTML或Dynamic HTML，用于动态更新表单。我们将使用div、span或其他动态HTML元素来标记HTML。
文档对象模型DOM用于处理HTML结构和服务器返回的XML。
创建新的XMLHttpRequest对象，它负责处理所有服务器通信的对象。
<script language="javascript" type="text/javascript‘>
var xmlHttp = new XMLHttpRequest();
</script>
Ajax基本上就是把JavaScript技术和XMLHttpRequest对象放在Web表单和服务器之间。当用户填写表单时，数据发送给一些JavaScript代码而不是直接发送给服务器。相反，JavaScript代码捕获表单数据并向服务器发送请求。请求是异步发送的,不用等待服务器的响应。然后服务器将数据返回JavaScript代码，后者决定如何处理这些数据。
得到XMLHttpRequest的句柄后，其他的JavaScript代码就非常简单了。事实上，我们将使用JavaScript代码完成非常基本的任务：
获取表单数据：JavaScript代码很容易从HTML表单中抽取数据并发送到服务器。
修改表单上的数据：更新表单很简单，从设置字段值到迅速替换图像。
解析HTML和XML：使用JavaScript代码操纵DOM，处理HTML表单服务器返回的XML数据的结构。
在Mirosoft浏览器上创建XMLHttpRequest对象
var xmlHttp = false;
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHtt = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
xmlHttp = false;
}
}
处理Mozilla和Microsoft浏览器
var xmlHttp = new XMLHttpRequest();
支持多种浏览器的方式创建XMLHttpRequest对象
/* Create a new XMLHttpRequest object to talk to the WEB server*/
var xmlHttp = false;
/*@cc_on @*/
/@if (@_jscript_version >=5)
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e2){
xmlHttp = false;
}
}
@end @*/
if(!xmlHttp&&typeof XMLHttpRequest != ‘undefined‘){
xmlHttp = new XMLHttpRequest();
}
发送请求：
1.从Web表单中获取所需要的数据
2.建立要连接的URL
3.打开到服务器的连接
4.设置服务器在完成后要运行的函数
5.发送请求
function callServer(){
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
if(city==null || city=="") return null;
if(state==null || state=="") return null;
var url = "/scripts/getZipCode.php?city="+escape(city)+"&state="+escape(state);
//Open a connection to the server
xmlHttp.open("GET",url.true);
//Setup a function for the server to run when it‘s done
xmlHttp.onreadystatechange = updatePage;
//Send the request
xmlHttp.send(null);
}
处理响应：
什么也不要做，直到xmlHttp.readyState属性的值等于4
服务器将把响应填充到xmlHttp.responseText属性中
function updatePage(){
if(xmlHttp.readyState == 4){
var response = xmlHttp.responseText;
document.getElementById("zipCode").value= response;
}
}
XMLHttpRequest简介
open()：建立到服务器的新情求
send()：向服务器发送请求
abort()：推出当前请求
readyState：提供当前HTML的就绪状态
reponseText：服务器返回的请求响应文本
javaScript浏览器对象
1.window对象
是Document、Location和History对象的父对象。
属性：
name：指定窗口名称
parent：代表当前的父窗口。返回属性和方法。
opener：返回当前窗口。返回属性和方法。
top：代表主窗口（所有的父窗口）。返回属性和方法。
self：返回当前窗口的一个对象。返回属性和方法。
defaultstatus：返回设置在浏览器状态栏中显示的默认内容。
status：返回设置将在浏览器状态栏中显示的指定内容。
status = Dataformat(date);
方法：
alert();
confirm();
prompt();
open(url,name,attr);
close();
navigate();在当前窗口中显示制定网页
Window.navigate "http://www.baidu.com"
setTimeout();设置一个定时器，经指定时间间隔后调用过程
Window.setTimeout(过程名,时间间隔,脚本语言);
clearTimeout();给指定的计数器复位
Window.clearTimeout 计数器名称
focus();获取当前焦点
blur();当前对象失去焦点
事件：
OnLoad{} 当HTML文件载入浏览器时
OnUnLoad{} 当HTML文件从浏览器删除时
OnFocus{} 获得焦点时
OnBlur{} 失去焦点时
OnHelp{} 用户按下F1时
onResize{} 用户调整窗口大小时
OnScroll{} 滚动窗口时
OnError{} 载入HTML文件出错时
2.Document对象
Documnet对象表示在浏览器窗口或其中一个框架中显示的HTML文档，通过该对象的属性和方法可以获得和控制页面对象的外观和内容。Document对象包含以下对象和集合：All（文档中所有元素的集合）、Anchors（锚点集合）、Applets（Java的小程序集合）、Body（文档主题对象）、Children（子元素集合）、Embeds（嵌入对象）、Form（表单集合）、Frames（框架集合）、Images（图像集合）、Links（链接集合）、Plugins（插件集合）、Scripts（脚本集合）、Selection（选择器对象）和StyleSheets（级联样式表集合）。
属性：
fgColor:设置或返回文档的颜色
bgColor：设置或返回文档背景的颜色
linkColor：设置或返回文档中超链接的颜色
alinkColor:设置或返回文档中活动链接的颜色
vlinkColor:设置或返回已经访问过的超链接的颜色
title：返回当前文档标题
location:设置或返回文档的URL
parentWindow:包含此HTML文件的上层窗口
referrer:返回链接到当前页面的那个页面URL
lastModified:返回当前文档的最后修改日期
all:返回所有标记和对象
anchors:表示文档中的锚点，每个锚点都被存储在anchros数组中
links:表示文档中的超链接，每个超链接都存储在links数组中
form:返回所有表单
images:返回所有图像
stylesheets:返回所有样式属性对象
applets:返回所有Applet对象
embeds:返回所有嵌入标记
scripts:返回所有Script对象
方法：
open() 打开要输入的文档
write() 向文档中写入HTML代码
writeLn() 向文档中写入HTML代码后换行
close() 关闭文档，并显示所有使用write和writeLn方法写入的内容
clear() 清除当前文档的内容，刷新屏幕
事件：
onClick:function(){} 单击鼠标
onDbClick{} 双击鼠标
onMouseDown{} 按下鼠标左键
onMouseUp{} 放开鼠标左键
onMouseOver{} 鼠标移到对象上
onMouseOut{} 鼠标离开对象
onMouseMove{} 移动鼠标
onSelectStart{} 开始选取对象内容
onDragStart{} 开始以拖动方式移动选取对象内容
onKeyDown{} 按下键盘按钮
onKeyPress{} 当用户按下任意键时，先产生KeyDown事件，若用户一直按住左键，则产生连续的KeyPress事件
3.History对象
History对象包含用户已浏览过的URL集合，提供浏览器导航按钮功能，可以通过文档的历史记录来浏览文档。
属性：
length:返回历史表中的URL地址数目
方法：
back() 在历史表中向后搜索
forward() 在历史表中向前搜索
go() 在历史表中跳转到指定的项
4.Navigator对象
Navigator对象包含浏览器的信息
属性：
appCodeName:返回浏览器的代码名称
appName:返回浏览器的名称
appVersion:返回浏览器的版本号
userLanguage:返回当前用户所使用的语言
cookieEnable:若允许使用cookies，则该属性返回true，否则返回false
方法：
java.Enable();确定浏览器中的java是否可用
5.Location对象
包含当前的URL信息
属性：
href:返回或设置当前文档的完整URL
hash:返回或设置当前URL中#后的部分的名称
host:返回或设置udangqianURL中的主机名和端口部分
hostname：返回或设置当前URL中的主机名
port:返回或设置当前URL中的端口部分
path:返回或设置当前URL中的路径部分
protocol:返回或设置当前URL中的协议类型
search:返回或设置当前URL中的查询字符串，即提交给服务器时在URL中紧跟？后面的内容
方法：
reload() 重新加载当前文档
replace() 用参数中给出的网址替换当前的网址
assign() 将当前URL地址设置为其参数所给出的URL
XMLHttpRequest对象提供客户端与HTTP服务器异步通信协议。
var xmlHttp;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
创建了XMLHttpRequest对象后，通过在js脚本中调用XMLHttpRequest对象的方法和XMLHttpRequest的属性，实现Ajax的功能。
属性：
onreadystatechange:状态改变事件触发器，每个状态改变都会触发这个事件触发器
readyState:对象状态：0=未初始化 1=正在加载 2=已加载 3=交互中 4=完成
responseText:服务器的响应 字符串
responseXML:服务器的响应 XML 该对象可以解析为一个DOM对象
status:服务器返回的HTTP状态吗
statusText:HTTP状态码的相应文本
方法：
abort() 停止当前请求
getAllResponseHeaders() 将HTTP请求的所有响应首部作为键/值对返回
getResponseHeader("header") 返回指定首部的字符串
open("method","url"[,asyncFlag[,"username"[,"password"]]]) 建立对服务器的调用，method参数可以是相对或绝对URL。该方法有3个参数可选：asyncFlag=是否非同步标记 username=用户名 password=密码
send(content) 向服务器发送请求
setRequestHeader("header","value") 把指定首部设置为所提供的值，在调用方法之前必须先调用open方法
ajax利用浏览器与服务器之间的一个通道来完成数据提交或请求。页面的脚本程序通过浏览器提供的空间完成数据的提交和请求，并将返回的数据由js处理后展现到页面上。整个过程由浏览器、js、jsp共同完成，AJAX就是这组技术的总称。
ajax的请求和响应过程如下：
网页调用js程序-->js利用浏览器提供的XMLHTTP对象向Web服务器发送请求-->请求的URL资源处理后返回结果给浏览器的XMLHTTP-->XMLHTTP对象调用实现设置的处理方法-->js方法解析返回的数据，利用返回的数据更新页面。
标签：
原文地址：http://www.cnblogs.com/forerver-elf/p/4724223.html
