`

网页基础 html css javascript DOM Ajax

阅读更多

http://www.cainiao8.com/


=================================================================================

 

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>

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics