码迷,mamicode.com
首页 > Web开发 > 详细

ajax

时间:2015-08-12 14:33:27      阅读:120      评论:0      收藏:0      [点我收藏+]

标签:

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

ajax

标签:

原文地址:http://www.cnblogs.com/forerver-elf/p/4724223.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!