在.JS文件或者网页中写入如下脚本
js 代码
-
- var xmlHttp;
- function createXMLHttpRequest(){
-
- if(window.ActiveXObject){
-
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }else if(window.XMLHttpRequest){
-
- xmlHttp = new XMLHttpRequest();
- }
- if(xmlHttp){
- xmlHttp.open("GET",url,false);
- xmlHttp.onreadystatechange=function(){setState(greens,reds,contains)};
- xmlHttp.send(null);
- }
- }
-
-
- function setState(greens,reds,contains){
- var contains = document.getElementById("contain");
- if(xmlHttp.readyState == 0){
- contains.innerHTML = "正在初始化";
- }
- if(xmlHttp.readyState == 1){
- contains.innerHTML = "正在准备发送请求";
- }
- if(xmlHttp.readyState == 2){
- contains.innerHTML = "正在发送请求";
- }
- if(xmlHttp.readyState == 3){
- contains.innerHTML = "正在接收数据";
- }
- if(xmlHttp.readyState == 4){
-
- if(xmlHttp.status == 200){
- contains.innerHTML = xmlHttp.responstText;
- }
- }
- }
返回xml例子
xml 代码
- <states>
- <north>
- <state>Minniesota</state>
- <state>Iowa</state>
- <state>North Dako</state>
- </north>
- </states>
js 代码
- var xmlDoc = xmlHttp.responseXML;
- var northNode = xmlDoc.getElementsByTagName("north")[0];
- 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 代码
- response.setContentType("text/xml");
- PrintWriter out = response.getWriter();
- out.println(responseText);
- out.close();
分享到:
相关推荐
使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤
**AjaxRequest(Ajax使用包)** Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。AjaxRequest是实现Ajax功能的一个工具包,它...
本教程以一个简单的Ajax使用示例为基础,帮助初学者理解并掌握其基本概念和使用方法。 ### 1. Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript向服务器发送HTTP请求,并接收...
在本项目中,“Ajax使用示例”提供了一个完整的Ajax应用实例,帮助开发者更好地理解和运用Ajax。 1. **Ajax的基本原理**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript在不刷新整个页面的情况下与服务器进行...
本资料包详细介绍了四种不同版本的Ajax使用方法,以及解决相关问题的经验分享。 1. **jQuery的Ajax使用** jQuery是JavaScript的一个库,它极大地简化了JavaScript的使用,包括Ajax操作。使用`$.ajax()`函数是...
这份"aspnet ajax使用文档(AspNet_AJAX_Documentation)"涵盖了关于如何使用ASP.NET AJAX的核心概念、API以及最佳实践。 首先,ASP.NET AJAX的核心组件包括AJAX Control Toolkit和UpdatePanel。UpdatePanel是ASP.NET...
【北大青鸟Y2Ajax使用工具包】是一个专门为ASP.NET开发者设计的集合,它包含了用于增强Web应用程序交互性和用户体验的Ajax工具。这个压缩包中主要包括了三部分:AjaxControlToolkit、ASPAJAXExtSetup以及CodeSmith ...
《通过DOM和Ajax使用XML_从菜鸟到专家2006》是一本旨在帮助初学者深入理解并掌握XML、DOM以及Ajax技术的书籍。XML(eXtensible Markup Language)是一种用于标记数据的语言,广泛应用于数据交换、配置文件、文档存储...
掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输 掌握Ajax使用 JSON 进行数据传输
【ACCP 5.0 Y2Ajax使用工具包】是一个专为北大青鸟ACCP 5.0课程设计的JavaScript库,旨在简化Web应用程序中的异步通信,即Ajax技术的实现。这个工具包是为了帮助学员更好地理解和应用Ajax技术,提高Web开发效率。...
2. **JavaScript**:Ajax使用JavaScript来创建XMLHttpRequest对象,它是与服务器进行通信的关键。 3. **XML与JSON**:虽然名字中有XML,但现代Ajax应用更倾向于使用JSON(JavaScript Object Notation)作为数据交换...
介绍ajax如何使用.
ajax使用小例子 //作者:核武器 2010.01.26 qq:61357455 Email:Behappy1982@163.com 单击按钮的时候,显示按钮上的文字,效果是局部WEB刷新,增加用户体验
文档"ajax_xml运用.doc"可能包含了一个使用Ajax获取并解析XML数据的例子。通常,这个过程包括以下几个步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,通过`new XMLHttpRequest()`来创建一个实例。 2. **...
这个压缩包"AspNet_AJAX_Documentation(Samples)"很可能是包含了一系列ASP.NET AJAX的使用示例,帮助开发者深入理解和实践这一技术。 在ASP.NET AJAX中,主要涉及以下几个核心概念和技术: 1. **UpdatePanel**:...
客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器方式使用,包含Ajax原生,long poll,Websocket 客户端访问服务器...
本文实例讲述了thinkphp5 + ajax 使用formdata提交数据(包括文件上传) 后台返回json。分享给大家供大家参考,具体如下: 知识点总结 1.json格式标准 { 'key':"value" } {"state":"1","msg":"\u7b80\u5386\u6295\u...