=================================================================================
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>
相关推荐
HTML+XHTML+CSS+JavaScript+DOM+AJAX语法及范例实用辞典是一本系统、全面的语法和范例辞典,详尽介绍了html、xhtml、css、javascript、dom、ajax这6种技术的语法。全书共分5章,书中不但对语法进行了理论讲解,而且...
web开发必备,含:ajax实战中文版.pdf,CSS中文手册.chm、Div+CSS 布局.pdf,DOM文档.chm、HTML基础.chm、xml手册.chm,正则表达式.CHM,JS宝典.chm
Beginning JavaScript with DOM Scripting and Ajax is for the person who has a good grasp of HTML and CSS but wants to add JavaScript to their skillset. If you want to learn some basic programming ...
Beginning JavaScript with DOM Scripting and Ajax is for the person who has a good grasp of HTML and CSS but wants to add JavaScript to their skillset. If you want to learn some basic programming ...
css + Ajax + DOM + javascript的运用,工作中遇到css的问题的时候,在网上手机的关于css的资料,个人觉得还行。
web开发资料集合(ajax css dom html javascript xml 正则表达式 共22本)!! 菜鸟高手都不能错过!!
《HTML+XHTML+CSS+JavaScript+DOM+AJAX语法及范例实用辞典》这本书的附赠光盘,内容有从chapter1-chapter5的所有网站源码。
资源名称:Web编程基础——CSS、JavaScript、jQuery 资源截图: 资源太大,传百度网盘了,链接在附件中,有需要的同学自取。
HTML+Ajax+DOM+JavaScript+CSS+XML(文档合集).rar
本书循序渐进地讲述了JavaScript 及相关的CSS、DOM、Ajax、jQuery 等技术。书中从JavaScript 语 言基础开始,分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie,并在上一版 的基础上新增了两...
Ajax-domajax.zip,一个jquery插件,可以在不使用javascript行的情况下构建完整的ajax调用,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中...
可是好东西哦,很难找的 <br>包含内容: Cascading Style Sheet 样式表中文手册.chm DOM帮助文档.chm HTML基础.chm JavaScript宝典.chm xml_基础学习完全手册.chm
Beginning JavaScript with DOM Scripting and Ajax, 2nd Edition: This book will teach you about JavaScript and how to use it in a practical manner. After you read it, you’ll be able to Understand ...
Web如今已经深入每个人的日常生活,而Ajax这个新兴事物的出现把Web的发展向前推进了一大步。但是在学好Ajax之前,必须学好JavaScript和DOM、CSS。这里是本关于JavaScript Dom编程的书籍。希望对大家有帮助
主要内容包括JavaScript的概念和基本语法、CSS基础、CSS排版、DOM模型框架、网页中的事件、表格表单、JavaScript的调试与优化、Ajax异步技术等。在此基础之上又通过精彩的实例详细讲解了jQuery的相关技术:主要包括...
3.1 DOM不是JavaScript,它是文档 3.2 DOM的级别 3.2.1 DOM 0 级 3.2.2 DOM 1 级 3.2.3 DOM 2 级 3.2.4 DOM 3 级 3.2.5 哪个级别适合你 3.3 创建示例文档 3.3.1 创建DOM...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
JavaScript DOM高级程序设计 JavaScript进阶/写库必备。文档带有章节目录。 第一章 遵循最佳实践 第二章 创建可重用的对象 第三章 DOM2核心和DOM2 HTML 第四章 响应用户操作事件 第五章 动态修改样式和层叠样式表 第...
HTML5开发教程-5.CSS基础 1.HTML常用标记超链接表格表单 2.HTML常用标题段落等标记 3.相关概念及HTML语法 4-CSS语法部分选择符 5-CSS部分选择符及选择符权重 6-CSS部分文本属性上 7-CSS部分文本属性下 8-CSS列表...
https://www.bilibili.com/video/BV1gK411P7RQ?p=92&spm_id_from=pageDriver