详解AJAX核心 —— XMLHttpRequest 对象 (下)
继续上一篇的内容
上一篇关于XMLHttpRequest 对象发送对服务器的请求只说到了用Get方式，没有说Post方式的。那是因为要说Post方式就需要先说另外一个东西，那就是DOM（Document Object Model）文档对象模型。JavaScript通过DOM读取、改变或者删除 HTML、XHTML 以及 XML中的元素，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目，而且这样的操作会马上显示在页面上。另外，所有浏览器执行W3C 发布的 DOM 标准规范，DOM的跨浏览器的兼容问题也就不是问题了。
先来看看下面的这个HTML文档
<html>
<head>
<title>文档标题</title>
</head>
<body>
<h1>我的标题</h1>
<a href="">我的链接</a>
</body>
</html>
这个HTML文档转换成对象表示就是下图这个DOM树。
从这个树就能看出来，HTML中的每一项对应到DOM中都是一个节点，包括属性和文本。
而每个节点都包含某些信息的属性。节点属性包括下面三种：
- nodeName（节点名称）
- nodeValue（节点值）
- nodeType（节点类型）
nodeName
nodeName 属性含有某个节点的名称。
- 元素节点的 nodeName 是标签名称
- 属性节点的 nodeName 是属性名称
- 文本节点的 nodeName 永远是 #text
- 文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
nodeValue
- 对于文本节点，nodeValue 属性包含文本。
- 对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
nodeType
nodeType 属性可返回节点的类型。
主要常用节点类型有下面几种：
- 元素节点类型是1
- 属性节点类型是2
- 文本节点类型是3
- 文档节点类型是9
使用DOM从取得DOM对象开始，看看怎么访问DOM对象本身吧：
var domTree = document;
实际中我们更多的是直接使用 document 而来表示DOM对象。
从这里开始，我们可以通过DOM对象访问文档中的所有内容了。
再看看取的节点所使用的方法吧。
我们重点来看看getElementById() 和 getElementsByTagName()
- document.getElementById("ID"); 返回通过 ID 指定的节点；
- document.getElementsByTagName("标签名称"); 返回指定的标签名所有的节点（作为一个节点列表）；
在本文我们用到的主要用到的就是上面这些方法，具体详细的内容可以上网搜索，或者可以到这里查看：具体的详细信息可以看http://www.w3school.com.cn/htmldom/index.asp；
下面做一个简单的例子，看看怎么使用DOM以Post方法发送内容给服务器，并把结果显示出来。
看看这个HTML页面
<html>
<head>
<title>AJAX and the DOM</title>
</head>
<body>
<div id="Content">
<input type="text" id = "name" value="myname" />
<br/>
<input type="text" id = "age" value="99" />
</div>
<input type="button" value="Tell me!" />
<div id = "result"></div>
</body>
</html>
我们的目标就是简单的把名字和年龄发送给服务器进行处理，并把结果显示在result这个DIV中。
XMLHttpRequest 对象 就使用上一篇的方法创建，这里就不再多说了。
首先就是要取得名字和年龄的值
var name = document.getElementById("name").value; //取名字
var age = document.getElementById("age").value; //取年龄
然后再将名字和年龄按照通信格式拼接
var info = name+"|"+age; //简单的将姓名和年龄用竖线分割交给服务器处理
好了，整理好要发送的内容，确定发送的地址，以及方式；看，这里就是用Post方式了，地址自然就是要进行处理服务器的地址了。
xmlhttp.open("Post","http://localhost/WebForm1.aspx",true);
这个时候我们就可以使用send方法将info对象发送给服务器了。
xmlhttp.send(info);
处理返回的结果也很简单了，直接把结果显示在result中
var result = document.getElementById("result").firstChild;
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == && xmlhttp.status == ){
result.nodeValue = xmlhttp.responseText;
}
}
顺带说一下，把结果显示在result这个DIV中，为什么是 getElementById("result").firstChild 而不是直接getElementById("result")。这就跟开始时说的DOM对象有关系了，前面也说过，在DOM中文本也是一个节点，这里DIV中的文本就是result这个DIV的子节点，而又是唯一一个节点，所以用firstChild就可以取到了。
完整的页面代码
<html>
<head>
<title>AJAX and the DOM</title>
<script language="JavaScript">
var xmlhttp = false; //创建一个新变量 request 并赋值 false。使用 false 作为判断条件，它表示还没有创建 XMLHttpRequest 对象。
function CreateXMLHttp(){
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //较新版本的IE
if(!xmlhttp) {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //较旧版本的IE
}
}
return xmlhttp;
}
xmlhttp = CreateXMLHttp(); function send()
{
xmlhttp.open("Post","http://localhost/WebForm1.aspx",true);
var name = document.getElementById("name").value; //取名字
var age = document.getElementById("age").value; //取年龄
var info = name+"|"+age; //简单的将姓名和年龄用竖线分割交给服务器处理
var result = document.getElementById("result").firstChild;
xmlhttp.send(info);
xmlhttp.onreadystatechange = function (){
if(xmlhttp.readyState == 4 && newxmlhttp.status == 200){
result.nodeValue = newxmlhttp.responseText;
}
}
}
</script>
</head>
<body>
<div id="Content">
<input type="text" id = "name" value="myname" />
<br/>
<input type="text" id = "age" value="99" />
</div>
<input type="button" value="Test me!" onClick="send();" />
<div id = "result"></div>
</body>
</html>
服务器端就做最近简单的处理，代码如下：
<%@ Page language="c#" AutoEventWireup="true" %>
<script language="C#" runat="server">
public string result;
private void Page_Load(object sender, System.EventArgs e)
{
// 在此处放置用户代码以初始化页面
System.IO.StreamReader sr = new System.IO.StreamReader(Page.Request.InputStream,System.Text.Encoding.UTF8);
string[] gets = sr.ReadToEnd().Split('|');
result = string.Format(@"Your name is {0},{1} years old!",gets[0],gets[1]);
}
</script>
<%=result%>
详解AJAX核心 —— XMLHttpRequest 对象 (下)的更多相关文章
- 详解AJAX核心 —— XMLHttpRequest 对象 (上)
我要说的内容都是非常基础的内容,高手就免看了,如果看了欢迎给点意见啊.新手或者对低层还不是很了解的人可以看看,帮助理解与记忆. XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程 ...
- AJAX 核心 —— XMLHTTPRequest 对象回顾
一.AJAX概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML) ...
- [置顶] Ajax核心--XMLHttpRequest对象
XMLHttpRequest 对象是AJAX功能的核心,学习XMLHttpRequest对象就先从创建XMLHttpRequest 对象开始,了解在不同的浏览器中创建XMLHttpRequest 对象 ...
- Ajax核心--XMLHttpRequest对象
XMLHttpRequest 对象是AJAX功能的核心,学习XMLHttpRequest对象就先从创建XMLHttpRequest 对象开始,了解在不同的浏览器中创建XMLHttpRequest 对象 ...
- AJAX核心XMLHTTPRequest对象
老早就写好了总结.今天整理发表一下. XMLHttpRequest对象是AJAX的核心技术,XMLHttpRequest 是XMLHTTP 组件的对象,通过这个对象.AJAX能够像桌面应用程序一样仅仅 ...
- AJAX——核心XMLHttpRequest对象
AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,HTML,Jquery,Css……)重新融合的一个新的知识框架.而,XMLHttpR ...
- js进阶ajax的XMLHttpRequest对象的status和statustext属性（如果ajax和php联合使用的话：open连接服务器的第二个参数文件路径改成请求php的url即可）
js进阶ajax的XMLHttpRequest对象的status和statustext属性(如果ajax和php联合使用的话:open连接服务器的第二个参数文件路径改成请求php的url即可) 一.总 ...
- Mysql加锁过程详解（9）-innodb下的记录锁，间隙锁，next-key锁
Mysql加锁过程详解(1)-基本知识 Mysql加锁过程详解(2)-关于mysql 幻读理解 Mysql加锁过程详解(3)-关于mysql 幻读理解 Mysql加锁过程详解(4)-select fo ...
- 详解AJAX核心中的XMLHttpRequest对象
转自:http://developer.51cto.com/art/200904/119577.htm XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHtt ...
随机推荐
- Oracle11g的注册表清理
每次卸载了oracle总是有一堆注册表没有清理,麻烦,特地在网上找了一个较为完整的,全文复制过来,存自己这里,如下: <<< Windows Registry Editor Vers ...
- Git入门——基础知识问答
问题一:为什么要选择Git作为Android开发的版本控制工具? 答:1)git是android项目和社区的统一语言. 2)高通版本发布频繁,需要与平台及时同步,快速re ...
- @synthesize
@synthesize 相当于把属性当成成员变量来用,不用再写self.属性@synthesize myButton; 这样写了之后,那么编译器会自动生成myButton的实例变量,以及相应的gett ...
- 对面试题（剑指offer）产生的一些思考。
零散的思绪.另外,推荐<剑指offer>.本文初期大部分思考都从剑指引发. 面试题不单单只是用来面试.其中有很多编程的经验可以学习.就如同我们当年的考试:) 1:鲁棒性的一个方面:边界条件 ...
- Ecstore的微信账号绑定会员免登录
在微信公众号中通过消息交互/自定义菜单,可直接登录Ecstore手机商城.如果想用原商城账号登录,可以通过登录绑定,在后台可以获取登录绑定的链接这个链接可以在微信公众号消息交互场景或自定义菜单中使用, ...
- python bottle 框架开发任务管理系统 V_1.0版
经过1-2个星期的开发,现在开发了个半成品(UI现在比较烂,因为我的前端本来就很差,将就下吧),大概功能如下:用户功能(添加.删除.修改),添加部门功能,任务管理功能(添加.删除.修改,详细).项目管 ...
- C语言--关键字 typedef
一.typedef 1.基本使用 1> typedef 在基本数据类型中的使用 typedef int MyInt; // 相当于给 int 起了一个别名 typedef MyInt MyInt ...
- IOS开发之动态获取模型的属性值
#import "model.h" #import <objc/runtime.h> @implementation model +(instancetype)mode ...
- position属性absolute与relative(转)
每次要用到Position属性时,总要去搜索下,这两个属性值的区别:今天就直接复制网上的结果,以便以后多看看. Absolute,CSS中的写法是:position:absolute; 他的意思是绝对 ...
- display:table-cell的惊天作用，直接惊呆你！
一 display:table-cell介绍 ... 二 用法 (1)高度不固定元素,垂直居中 ... (2)高度不固定列表元素,登高排列 ... (3)宽度不固定元素,平均分配 ...