=================================================================================
XSTL & XML
xstl功能上和css类似。下面是xstl的例子。再后面有 css & xml 的例子
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<body>
<center>
<table border="1">
<tr>
<td>Number</td>
<td>Name</td>
<td>GRE Score</td>
</tr>
<xsl:for-each select="classmates/student">
<tr>
<td>
<xsl:value-of select="sid" />
</td>
<td>
<xsl:value-of select="sname" />
</td>
<td>
<xsl:value-of select="gre" />
</td>
</tr>
</xsl:for-each>
</table>
</center>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="xml2.xsl"?>
<classmates>
<student>
<sid>1</sid>
<sname>name1</sname>
<gre>1700</gre>
<toefl>630</toefl>
<tse>120</tse>
</student>
<student>
<sid>2</sid>
<sname>name2</sname>
<gre>1800</gre>
<toefl>599</toefl>
<tse>110</tse>
</student>
<student>
<sid>3</sid>
<sname>name3</sname>
<gre>1880</gre>
<toefl>700</toefl>
<tse>130</tse>
</student>
<student>
<sid>4</sid>
<sname>name4</sname>
<gre>1600</gre>
<toefl>660</toefl>
<tse>110</tse>
</student>
</classmates>
=================================================================================
XHTML Basic
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="this part is for Net search." />
<title>This is the Title.</title>
</head>
<body>
<p>This is one section.</p>
<h1>Size of the word.</h1>
<h6>Size of the word.</h6>
<!-- This is the comment -->
<br/> Change the line.
<hr/> Add a horizontal line.
<strong>fontWeight:bold</strong>
<em>aaaa</em>
<i>aaaa</i>
<b>aaaa</b>
<a href="http://www.cainiao8.com/">Hyperlink</a>
<h1>Inside Link<a id="biaoti"></a></h1>
<a href="#biaoti">????</a>
<ul>
<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>
</ul>
<ol>
<li>This is a list</li>
<li>This is a list</li>
<li>This is a list</li>
</ol>
<p><img src="http://www.cainiao8.com/images/logo.gif" alt="pic comment"/></p>
<p><a href="http://www.cainiao8.com/"><img src="http://www.cainiao8.com/images/logo.gif" alt="pic comment"/></a></p>
<table summary="summary">
<caption>table——caption</caption>
<colgroup>
<col id="time" />
<col id="event" />
<col id="person" />
<col id="cost" />
</colgroup>
<thead>
<tr>
<th scope="col">1th</th>
<th scope="col">2th</th>
<th scope="col">3th</th>
<th scope="col">4th</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td>1</td>
<td>111</td>
<td>11</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>222</td>
<td>22</td>
<td>3000</td>
</tr>
</tbody>
</table>
<form>Name:<input type="text"name="user"/><br/></form>
<form>Password:<input type="password"name="pass"/><br/></form>
</body>
</html>
<html>
<frameset rows="25%,75%">
<frame src="1.html"/>
<frame src="3.html"/>
</frameset>
</html>
=================================================================================
CSS Basic
内部样式表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
<!--
h1 {font-size: 12px;}
/* 把标题的大小都定义为12个像素 */
h2,h4 {font-size: 12px; display:inline;}
-->
</style>
</head>
<body>
<h1><a href="http://cainiao8.com/">菜鸟吧</a></h1>
<h2>的站长</h2>
<h3 style="display:none">是大傻瓜！傻瓜</h3>
<h4>爱吃大西瓜！</h4>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
h1.dabiaoti {
font-weight: bolder;
text-align: center;
}
h1#daohang {
font-size: 12px;
font-weight: bolder;
text-align: left;
}
h1.xinwen {
font-size: 16px;
font-weight:bold;
text-align: center;
color:green;
}
-->
</style>
</head>
<body>
<h1 class="dabiaoti">我是页面最上端的标题1</h1>
<h1 id="daohang">我是页面左侧的标题1，用来导航</h1>
<h1 class="xinwen">我是页面新闻的标题1</h1>
<p class="xinwen">我是新闻的内容。</p>
</body>
</html>
行内样式表（内嵌样式表）
<p style="text-indent:24px;">段落内容</p>
外部样式表
<head>
<link rel="stylesheet" type="text/css" href="文件位置/你的CSS文件名.css" />
/*文件位置就是所处在的文件夹相对与当前网页的相对路径*/
</head>
字体属性
<style type="text/css">
<!--
p.song { font-family: "宋体"; }
p.hei { font-family: "黑体"; }
p.eng { font-family: Arial; }
-->
</style>
</head>
<body>
<p class="song">我的字体是宋体</p>
<p class="hei">我的字体是黑体</p>
<p class="eng">My font family is Arial.</p>
文字大小
……
p.f12 { font-size: 12px; }
p.f16 { font-size: 16px; }
p.f20 { font-size: 20px; }
……
<p class="f12">我12像素</p>
<p class="f16"><span class="16">我16像素</span></p>
<p class="f20"><span class="20">我20像素</span></p>
文字样式
……
p.ita { font-style: italic; }
……
<p>我是正常样式</p>
<p class="ita">我是斜体</p>
文字粗细
……
p.b { font-weight: bold; }
……
<p>我是正常的字体。</p>
<p class="b">我是粗体</p>
……
首行缩进
{ text-indent: 24px; }
文本颜色
……
p.lv { color: green; }
p.hong { color: red; }
……
<p class="lv">我是绿色的</p>
<p class="hong">我是红色的</p>
文本对齐属性
……
p.zhong { text-align: center; }
p.zuo { text-align: left; }
p.you { text-align: right;}
……
<p class="zhong">我的对齐方式是居中</p>
<p class="zuo"><span class="lv">我的对齐方式是左对齐</span></p>
<p class="you"><span class="lv">我的对齐方式是右对齐</span></p>
……
文本修饰
……
p.shang { text-decoration: overline; }
p.xia { text-decoration: underline; }
p.zhong { text-decoration: line-through;}
a.none { text-decoration:none; }
……
<p class="shang">上划线</p>
<p class="xia">下划线</p>
<p class="zhong">中划线</p>
<p ><a href="http://www.cainiao8.com/" class="none">
我是一个链接，但是没有下划线。</a></p>
……
背景颜色属性
<style type="text/css">
body { background-color:red ;}
</style>
背景图片
<style type="text/css">
body {
background-image:url(http://www.cainiao8.com/images/logo.gif);
}
</style>
背景图片的重复设置
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:no-repeat; }
</style>
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-x;}
</style>
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-repeat:repeat-y;}
</style>
背景图片位置
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-position:center;
background-repeat:no-repeat;}
</style>
将背景图片固定在页面的某个位置
<style type="text/css">
body { background-image:url(http://www.cainiao8.com/images/logo.gif);
background-attachment:fixed;
background-repeat:no-repeat }
</style>
无序列表的样式属性
……
<style type="text/css">
.w1 { list-style-type:circle;}
.w2 { list-style-type:square;}
.w3 { list-style-type:disc ;}
</style>
……
<ul class="w1">
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
<ul class="w2">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
<ul class="w3">
<li >无序列表项目1</li>
<li >无序列表项目2</li>
<li >无序列表项目3</li>
</ul>
……
有序列表的样式属性
……
<style type="text/css">
.y1 { list-style-type:decimal ;}
.y2 {list-style-type:upper-roman ;}
.y3 {list-style-type:lower-roman ;}
</style>
……
<ol class="y1">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y2">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
<ol class="y3">
<li>有序列表项目1</li>
<li>有序列表项目1</li>
<li>有序列表项目1</li>
</ol>
……
用图片做列表项目符号
……
<style type="text/css">
.xing { list-style-image:url(../../images/list.gif);}
</style>
……
<ul class="xing" >
<li>无序列表项目1</li>
<li>无序列表项目2</li>
<li>无序列表项目3</li>
</ul>
……
div和span
相对与其他XHTML标签，div和span对于它们包含的元素是没有意义的。例如当你看到<h1></h1>标签，你知道里面是标题，当你看到<p></p>标签的时候你知道里面是一个新的自然段。可是div和span标签并没有这样的意义。div只是一个分块的标签，他可以将网页分成几个区块。div里面可能包含一个标题，一个段落，也可能包含图片在内的很多元素，甚至div也可以再包含div。而 span是行级元素(行内标签)，通常情况下它都用来定义一小段文字的样式。它们的另一个区别就是div会造成换行，而span则不会。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type"
content="text/html; charset=gb2312" />
<style type="text/css">
<!--
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
text-align: center;
width: 100%;
color: #FFFFFF;
}
-->
</style>
</head>
<body>
<div class="box">
<div class="boxhead">我在div内，类为boxhead</div>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
<p>我在div内</p>
</div>
</body>
</html>
<p><span style="color:red">我在div内，也在span内，</span>属性为box。</p>
边框
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
border: 1px solid #000000;
}
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
}
填充 padding
.boxhead {
font-size: 14px;
font-weight: bold;
background-color: #AEC6FD;
border-bottom:1px dashed #000000;
text-align: center;
width: 100%;
color: #FFFFFF;
padding:5px;
}
边界属性
.box {
background-color: #EEFAFF;
width: 30%;
float: left;
border: 1px solid #000000;
margin:5px;
}
相对定位 relative
……
<style type="text/css">
.dingwei{
position:relative;
left:50px;
}
</style>
……
<p>我是一段正常的文本</p>
<p class="dingwei">我本来应该在它的正下方，
可是relative相对定位让我在正常位置的基础上向右移动了50个像素。</p>
</body>
</html>
绝对定位 absolute
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>s
<title>我真惨!被用来演示CSS!</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
p{
font-size:24px;
font-weight:bold;
}
.dingwei1{
position:absolute;
top:35px;
left:35px;
color:#FF0000
}
.dingwei2{
position:absolute;
left:50px;
top:50px;
color:#0000FF;
}
</style>
</head>
<body>
<p class="dingwei1">CSS</p>
<p class="dingwei2">绝对定位</p>
</body>
</html>
改变整个页面的链接样式
<style type="text/css">
a:link {
color: #FF0000;
text-decoration: none;
}
a:visited {
color: #333333;
}
a:hover {
text-decoration: none;
color: #FFFFFF;
background-color:#0000FF;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
</style>
只改变局部的链接样式
#nvbar a:link {
color: #003366;
text-decoration: none;
}
#nvbar a:visited {
text-decoration: none;
color: #000000;
}
#nvbar a:hover {
color: #FFFFFF; background-color:#FF0000; } #nvbar a:active {
text-decoration: none;
}
在xml中使用css, 例子
xml1.css
sid
{
color:blue;
font-size:36;
text-indent:2em;
display: block;
}
sname
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
gre
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
toefl
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
tse
{
color:red;
font-size:24;
text-indent:2em;
display: block;
}
xml1.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="xml1.css"?>
<classmates>
<student>
<sid>1</sid>
<sname>mavid</sname>
<gre>1700</gre>
<toefl>630</toefl>
<tse>120</tse>
</student>
<student>
<sid>2</sid>
<sname>joe</sname>
<gre>1800</gre>
<toefl>599</toefl>
<tse>110</tse>
</student>
<student>
<sid>3</sid>
<sname>jane</sname>
<gre>1880</gre>
<toefl>700</toefl>
<tse>130</tse>
</student>
<student>
<sid>4</sid>
<sname>qing</sname>
<gre>1600</gre>
<toefl>660</toefl>
<tse>110</tse>
</student>
</classmates>
=======================================================================
Javascript Basic
位置
<html>
<body>
<script type="text/JavaScript">
<!--
document.write("我是菜鸟我怕谁!");
//-->
</script>
</body>
<html>
<head>
<script type="text/JavaScript">
....
</script>
</head>
<html>
<head>
<script src="scripts.js"></script>
</head>
<body>
</body>
</html>
事件
<script type="text/JavaScript">
function displaymessage()
{
alert("我是菜鸟我怕谁!");
}
</script>
<button value="点击提交" onclick="displaymessage()">onclick调用函数</button>
<button value="点击提交" onmouseover="displaymessage()">鼠标滑过调用函数</button>
<button value="点击提交" onmouseout="displaymessage()">鼠标移出调用函数</button>
=======================================================================
HTML DOM
getElementById() —— 直接拿下法
<p id="testId">
这个段落是为了展示getElementById()方法访问DOM节点的。<br />
<img src="../../images/logo.gif" alt="展示如何访问DOM" /><br />
</p>
<script type="text/javascript">
function hide(){
document.getElementById("testId").style.display = "none" ;
}
function show(){
document.getElementById("testId").style.display = "block" ;
}
</script>
……
<form action="#">
<button onclick="hide(); return false;" value="隐藏" >把它吃掉</button>
<button onclick="show(); return false;" value="显示" >把它吐出来</button>
</form>
getElementsByTagName()
<script type="text/javascript"> function allPara(){ //paras存储所有段落 paras = document.getElementsByTagName("p"); //paraNum循环变量，用于选中每个单独的段落 var paraNum; //从零开始循环，paras.length是段落节点的个数 for (var paraNum=0;paraNum<paras.length;paraNum++) { //操作：给段落设置边框。 paras[paraNum].style.border = "1px dashed pink"; } } </script>
parentNode. firstChild, listChild
<div>
<p id="test">我是第一个p的文字</p> !! 注意文字也算是一个节点
<p id="test2">我是第二个p的文字，span的文字</p>
</div>
<script type="text/javascript">
function getTest(){
var x = document.getElementById("test");
x.style.border = "1px dashed";
}
function getParent(){
var x = document.getElementById("test");
x.parentNode.style.border = "1px dashed";
}
function getFirst(){
var x = document.getElementById("test");
alert(x.firstChild.nodeValue);
}
function getLast(){
var x = document.getElementById("test");
alert(x.lastChild.nodeValue);
}
</script>
nodeName, nodeValue, nodeType
<div>
<p id="test">test文字</p>
</div>
<script type="text/javascript">
function getName(){
var x = document.getElementById("test");
alert(x.nodeName);
}
function getValue(){
var x = document.getElementById("test");
alert(x.nodeValue);
}
function getType(){
var x = document.getElementById("test");
alert(x.nodeType);
}
</script>
- 2 —— 属性节点
- 3 —— 文本节点
- 8 —— 注释节点
- 1 —— 元素节点
遍历文档所有的元素节点
<script type="text/javascript">
function countElements(node){
var total = 0;
if(node.nodeType == 1){ total +=1; }
var children = node.childNodes;
for(var i = 0;i < children.length; i++){
total += countElements(children[i]);
}
return total;
}
function test2(){
var elementsCount = countElements(document);
alert(elementsCount);
}
</script>
修改DOM--innerHTML
<div id="test">
<p>我是测试段落。</p>
</div>
<script type="text/javascript">
function test(){
alert(document.getElementById("test").innerHTML);
}
</script>
<script type="text/javascript">
function testW(){
var str = "<p>面目全非！￥%……&*（）</p>";
document.getElementById("test").innerHTML = str;
}
</script>
删除DOM节点--removeChild
<div id="test">
<p>我是将要被删除的节点</p>
</div>
<script type="text/javascript">
function remove(){
var test = document.getElementById("test");
var children = test.childNodes;
for(i=0;i<children.length;i++){
test.removeChild(children[i]);
}
}
</script>
添加DOM节点
<div id="test" style="border:1px solid"></div>
<script type="text/javascript">
function test(){
var test = document.getElementById("test");
var para = document.createElement("P");
var text = document.createTextNode("要添加的文本");
para.appendChild(text);
test.appendChild(para);
}
</script>
========================================================================
JavaScript 面向对象编程
定义javascript对象的两种方法
方法一
var cainiao = new Object();
cainiao.gender = 'male'; // 给对象添加属性
cainiao.yearOfBirth = 1986;
cainiao.name = 'Chen zhe';
cainiao.info = function () {
var str = 'Name : '+ this.name + ' Sex : '+this.gender +' Year of Birth : ' + this.yearOfBirth;
alert(str);
}
方法二
var cainiao = {
gender : 'male',
yearOfBirth : 1986,
name : 'Chen zhe',
info : function() {
var str = 'Name : '+ this.name + ' Sex : '+this.gender +' Year of Birth : ' + this.yearOfBirth;
alert(str);
}
}
如果想生成多个cainiao类型的对象，可以使用构造函数来实现：
function Person(name,gender,yearOfBirth,site){
this.name = name;
this.gender = gender;
this.yearOfBirth = yearOfBirth;
this.site = site;
this.info = function(){
var str = '姓名：' + this.name + ',性别：' + this.gender
+ ',出生年：' + this.yearOfBirth + '网站:' + this.site;
alert(str);
}
}
使用如下语句来定义多个对象：
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com');
var gaoshou = new Person('Li Hai','male',1990,'www.u148.net');
var wudi = new Person('不详','不知道','保密','bbs.blueidea.net');
给对象添加静态方法：
cainiao.skill = '会点XHTML，CSS，现在还会说JavaScript了'; // 不会影响到其他对象
给对象定义私有成员，私有方法：
（1）
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……
var privacy = privacyArg;
……
}
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com','有10跟脚趾头');
alert(cainiao.privacy); // 这里的调用会出现undefined错误
（2）
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
function insideOnly(){
alert('我只在对象内部可以调用!');
}
}
私有的特点是 没有用this把方法绑定到对象上。而私有方法想要引用对象，需要这样做：
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……
var myOwner = this;
function insideOnly(){
alert(myOwner.name);
}
}
特权方法用来访问私有属性：（this 关键字在这里起关键作用）
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
……
this.showPrivacy = function(){
var str = '秘密:' + this.name + privacy + '!';
alert(str);
};
}
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com','有10跟脚趾头');
cainiao.showPrivacy();
prototype浅析：
prototype我理解为对父类的修改。看例子：
首先定义对象
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com');
其次修改类型的prototype
Person.prototype.jump = function(){
var str = this.name + '已经离地5厘米了！';
alert(str);
}
最后调用新加入的方法
cainiao.jump();
结果显示对cainiao确实产生影响。
prototype的失灵：
Person.prototype = {
mark:'Person.Proto'
}
var cainiao = new Person('Chen Zhe','male',1986,'www.cainiao8.com');
Person.prototype = {
mark:'Person.NewProto'
}
alert(cainiao.mark);
这种情况下，cainiao的mark还是老值。新的修改不起作用。
最后的构造函数：
我们可以在构造函数中定义属性，可以在对象外部定义（静态）属性，也可以在对象的prototype中定义属性。下面是我使用的大致格式：
function Person(nameArg,genderArg,yearOfBirthArg,siteArg,privacyArg){
//公有属性
this.name = nameArg;
this.gender = genderArg;
this.yearOfBirth = yearOfBirthArg;
this.site = siteArg;
//私有属性
var privacy = privacyArg;
//特权方法
this.showPrivacy = function(){
};
}
Person.prototype = {
//公有方法
info : function(){
},
func:function(){
}
}
=================================================================================
Ajax Basic
先看一段简单的代码：
function ajaxRequest(){
var req = false;
if(window.XMLHttpRequest) {
var req = new window.XMLHttpRequest();
} else if (window.ActiveXObject) {
var req = new window.ActiveXObject('Microsoft.XMLHTTP');
}
if(!req) return false;
req.onreadystatechange = callback;
req.open('GET','ajax/ajaxTest.txt',true);
req.setRequestHeader('Accept-Language','zh-cn');
req.send(null);
function callback(){
switch (req.readyState) {
case 1:
//alert('Loading');
break;
case 2:
//alert('loaded');
break;
case 3:
//alert('Interactive');
break;
case 4:
if (req.status && req.status == 200){
var str = req.responseText;
document.getElementById('test').innerHTML = str;
}
break;
}
}
}
function addEventSimple(obj,evt,fn){
if(obj.addEventListener){
obj.addEventListener(evt,fn,false);
}else if(obj.attachEvent){
obj.attachEvent('on'+evt,fn);
}
}
addEventSimple(document,'dblclick',ajaxRequest);
XMLHttpRequest对象的属性
readyState
表示XMLHttpRequest对象的当前状态，可取值为0-4，共5个状态。
- 0 ："未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
- 1 ："发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
- 2 ："发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
- 3 ："正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
- 4 ："已加载"状态；此时，响应已经被完全接收。
onreadystatechange
当readyState属性变化的时候会调用的函数。
responseText
响应的文本内容。当 readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
responseXML
XML响应；Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。
status
HTTP状态代码。仅当readyState值为3(正在接收中)或4(已加载)时，该属性才可用。当readyState的值小于3时试图存取status的值将引发一个异常。
statusText
HTTP状态的文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常。
XMLHttpRequest对象的方法
abort()
取消当前请求。把XMLHttpRequest对象复位到未初始化状态。
open()
open(method,url,async,username,password)
方法初始化一个XMLHttpRequest对象。
method参数是必须提供的-用于指定你想用来发送请求的HTTP方法 (GET，POST，PUT，DELETE或HEAD)。
url参数用于指定XMLHttpRequest对象把请求发送到的服务器相应的URL。
async参数为布尔值，指定请求是否异步，默认值为true，即异步。
该方法把XMLHttpRequest对象的readyState属性设置为1。
setRequestHeader()
setRequestHeader(header，value)
设置请求的头部信息。必须在调用open()方法后调用这个方法（当readyState值为1时）。
send()
send([content])
把请求发送到服务器。
content函数可选，是要发送到服务器的内容，通常在POST方法的时候使用。
该方法把XMLHttpRequest对象的readyState属性的值设置为2。
getResponseHeader()
getResponseHeader(header，value)方法用于检索响应的头部值。仅当readyState值是3或4
getAllResponseHeaders()
该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部。
使用get和使用post的区别：
get方法
var name = document.getElementById('username').value;
var gender = document.getElementById('gender').value;
url = 'process.php';
query = '?name=' + name + '&gender=' + gender;
url+=query;
post方法
var name = document.getElementById('username').value;
var gender = document.getElementById('gender').value;
query = 'name=' + name + '&gender=' + gender;
//……构建XMLHttpRequest请求的代码……
request.send(query);
初步的ajax框架
<script language="javascript">
var XMLHttpReq = false;
function createXMLHttpRequest() {
if(window.XMLHttpRequest) {
XMLHttpReq = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
try {
XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
}
function sendRequest(url) {
createXMLHttpRequest();
XMLHttpReq.open("GET", url, true);
XMLHttpReq.onreadystatechange = processResponse;
XMLHttpReq.send(null);
}
function processResponse() {
if (XMLHttpReq.readyState == 4) {
if (XMLHttpReq.status == 200) {
var res=XMLHttpReq.responseXML.getElementsByTagName("res")[0].firstChild.data;
window.alert(res);
} else {
window.alert("Error Happened!");
}
}
}
function userCheck() {
var uname = document.myform.uname.value;
var psw = document.myform.psw.value;
if(uname=="") {
window.alert("user name is blank");
document.myform.uname.focus();
return false;
}
else {
sendRequest('login?uname='+ uname + '&psw=' + psw);
}
}
</script>