`
zzg
  • 浏览: 124533 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

Ajax使用

阅读更多
在.JS文件或者网页中写入如下脚本
js 代码
 
  1. //定义XMLHttp实例  
  2. var xmlHttp;  
  3. function createXMLHttpRequest(){  
  4. //开始初始化XMLHttpRequest对象  
  5.   if(window.ActiveXObject){  
  6. //IE浏览器  
  7.     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  8.   }else if(window.XMLHttpRequest){  
  9. //Mozilla浏览器  
  10.     xmlHttp = new XMLHttpRequest();  
  11.   }  
  12. if(xmlHttp){  
  13.     xmlHttp.open("GET",url,false);  
  14.     xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};  
  15.     xmlHttp.send(null);  
  16.   }  
  17. }  
  18. //回调函数举例  
  19. //返回的4种状态  
  20. function setState(greens,reds,contains){  
  21. var contains = document.getElementById("contain");  
  22.   if(xmlHttp.readyState == 0){  
  23.     contains.innerHTML = "正在初始化";  
  24.   }  
  25.   if(xmlHttp.readyState == 1){  
  26.     contains.innerHTML = "正在准备发送请求";  
  27.   }  
  28.   if(xmlHttp.readyState == 2){  
  29.     contains.innerHTML = "正在发送请求";  
  30.   }  
  31.   if(xmlHttp.readyState == 3){  
  32.     contains.innerHTML = "正在接收数据";  
  33.   }  
  34.   if(xmlHttp.readyState == 4){  
  35. //信息已经成功返回,开始处理信息  
  36.     if(xmlHttp.status == 200){  
  37.    contains.innerHTML = xmlHttp.responstText; //返回值  
  38.     }  
  39.   }  
  40. }  


返回xml例子
xml 代码
 
  1. <states>  
  2. <north>  
  3.     <state>Minniesota</state>  
  4.     <state>Iowa</state>  
  5.     <state>North Dako</state>  
  6. </north>  
  7. </states>  

js 代码
 
  1. var xmlDoc = xmlHttp.responseXML;  
  2. var northNode = xmlDoc.getElementsByTagName("north")[0];  
  3. var northStates = northNode.getElementsByTagName("state");  



DOM的一些详解

(1)设置
      在从服务器返回数据的同时,还要进行设置,使浏览器不会在本地缓存结果,response.setHeader("Cache-Control","no-cache");response.setHeader("pragma","no-cache");
      XMLHttpRequest对象提供2个可以用来访问服务器响应的属性,一个是responseText将响应提供一个串,结合HTML元素的innerHTML属性,非常有用.(document.getElementById("results").innerHTML= xmlHttp.responseText).一个是responseXML将响应提供为一个XML对象.

      (2)DOM元素的一些有用的属性
childNodes--------------------------------------返回当前元素所有子元素的数组
firstChild   --------------------------------------返回当前元素的第一个下级子元素
lastChild   ---------------------------------------返回当前元素的最后一个子元素
nextSibling---------------------------------------返回紧跟在当前元素后面的元素
nodeValue----------------------------------------指定表示元素值的读/写属性
parentNode --------------------------------------返回元素的父节点
previousSibling----------------------------------返回紧邻当前元素之前的元素

  (3)用于遍历XML文档的DOM元素方法(document)
getElementById(id)-----------------------------获取有指定唯一ID属性值文档中的元素
getElementsByTagName(name)--------------返回当前元素中有指定标记名的子元素的数组
hasChildNodes()--------------------------------返回一个布尔值,指定元素是否有子元素
getAttribute(name)------------------------------返回元素的属性值,属性由name指定

      (4)动态创建内容时所用的W3C DOM属性和方法
document.createElement(tagName)----------文档对象上的createElement方法可以创建由tagName指定的元素
document.createTextNode(text)--------------文档对象的createTextNode方法会创建一个包含静态文本的节点.
.appendChild(childNode)---------该方法将指定的节点增加到当前元素的子节点列表.
.getAttribute(name)|.setAttribute(name,value)-----------------获得和设置元素中name属性的值
        .insertBefore(newNode,targetNode)-----这个方法将节点newNode作为当前元素的子节点插到targetNode元素前面。
        .removeAttribute(name)-----这个方法从元素中删除属性name
        .removeChild(childNode)-----这个方法从元素中删除子元素childNode
         .replaceChild(newNode,oldNode)-----这个方法将节点oldNode替换为节点newNode
          .hasChildNodes()这个方法返回一个布尔值,指示元素是否有子元素

XMLHttpRequest对象的一些典型方法

(1)、void open(String method,String url,boolean asynch);这个方法会建立对服务器的调用。
第一个参数表示要提供调用的特定方法(get,post,put)
第二个参数表示要提供所调用资源的url
第三个参数表示是异步(true)还是同步(false)
(2)、void send(content):这个方法会向具体服务器发出请求。可选参数会作为请求体的一部分发送。
(3)、void setRequestHeader(String header ,String value):这个方法为HTTP请求中一个给定的首部设置值
第一个参数表示要设置的首部。
第二个参数表示要 在首部中放置的值。这个方法必须在调用open()之后才能调用。
XMLHttpRequest对象的一些典型属性:
(1)、onreadystatechange:每个状态改变时都会触发这个事件处理器,通常会调用一个javascript函数,用来处理返回时要调用的函数。
(2)、readyState:请求的状态。有5个值:0=未初始化,1=正在加载,2=已经加载,3=交互中,4=完成。
(3)、responseText:服务器的响应,表示为一个串
(4)、responseXML:服务器的响应,表示为一个XML,这个对象可以解析为一个DOM对象。
(5)、status:服务器的Http状态码(200对应ok,404对应Not Found(未找到))



servlet向浏览器回写
java 代码
 
  1. response.setContentType("text/xml");  
  2. PrintWriter out = response.getWriter();  
  3. out.println(responseText);  
  4. out.close();  

分享到:
评论

相关推荐

    Ajax(Ajax使用js包)

    使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤

    AjaxRequest(Ajax使用包)

    **AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...

    Ajax使用示例

    在本项目中,“Ajax使用示例”提供了一个完整的Ajax应用实例,帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在不刷新整个页面的情况下与服务器进行...

    各种版本ajax使用方法及相关问题

    本资料包详细介绍了四种不同版本的Ajax使用方法,以及解决相关问题的经验分享。 1. **jQuery的Ajax使用** jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括Ajax操作。使用`$.ajax()`函数是...

    aspnet ajax使用文档(AspNet_AJAX_Documentation)

    这份"aspnet ajax使用文档(AspNet_AJAX_Documentation)"涵盖了关于如何使用ASP.NET AJAX的核心概念、API以及最佳实践。 首先,ASP.NET AJAX的核心组件包括AJAX Control Toolkit和UpdatePanel。UpdatePanel是ASP.NET...

    北大青鸟Y2Ajax使用工具包

    【北大青鸟Y2Ajax使用工具包】是一个专门为ASP.NET开发者设计的集合,它包含了用于增强Web应用程序交互性和用户体验的Ajax工具。这个压缩包中主要包括了三部分:AjaxControlToolkit、ASPAJAXExtSetup以及CodeSmith ...

    通过DOM和Ajax使用XML_从菜鸟到专家2006

    《通过DOM和Ajax使用XML_从菜鸟到专家2006》是一本旨在帮助初学者深入理解并掌握XML、DOM以及Ajax技术的书籍。XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于数据交换、配置文件、文档存储...

    掌握Ajax使用 JSON 进行数据传输

    掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输

    ACCP 5.0 Y2Ajax使用工具包

    【ACCP 5.0 Y2Ajax使用工具包】是一个专为北大青鸟ACCP 5.0课程设计的JavaScript库,旨在简化Web应用程序中的异步通信,即Ajax技术的实现。这个工具包是为了帮助学员更好地理解和应用Ajax技术,提高Web开发效率。...

    一个完整的ajax应用例子

    2. **JavaScript**:Ajax使用JavaScript来创建XMLHttpRequest对象,它是与服务器进行通信的关键。 3. **XML与JSON**:虽然名字中有XML,但现代Ajax应用更倾向于使用JSON(JavaScript Object Notation)作为数据交换...

    ajax使用

    介绍ajax如何使用.

    ajax使用小例子,局部刷新

    ajax使用小例子 //作者:核武器 2010.01.26 qq:61357455 Email:Behappy1982@163.com 单击按钮的时候,显示按钮上的文字,效果是局部WEB刷新,增加用户体验

    ajax使用例子 包括返回xml

    文档"ajax_xml运用.doc"可能包含了一个使用Ajax获取并解析XML数据的例子。通常,这个过程包括以下几个步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,通过`new XMLHttpRequest()`来创建一个实例。 2. **...

    aspnet ajax使用示例(AspNet_AJAX_Documentation)

    这个压缩包"AspNet_AJAX_Documentation(Samples)"很可能是包含了一系列ASP.NET AJAX的使用示例,帮助开发者深入理解和实践这一技术。 在ASP.NET AJAX中,主要涉及以下几个核心概念和技术: 1. **UpdatePanel**:...

    websocket long poll Ajax使用测试

    客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器...

    thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json完整实例

    本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...

Global site tag (gtag.js) - Google Analytics