ajax

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方法解析返回的数据，利用返回的数据更新页面。