锘??xml version="1.0" encoding="utf-8" standalone="yes"?>
聽2
<
script聽language
=
"
javascript
"
>
聽3
<!--
聽4
function聽Checkform(form)
聽5
{
聽6
聽聽聽var聽rr
=/^
[
1
-
9
]\d
{
3
}
-
(
?
:(
?
:
0
[
1
-
9
])
|
(
?
:
1
[
0
-
2
]))
-
(
?
:(
?
:[
0
-
2
][
1
-
9
])
|
(
?
:[
1
-
3
][
0
-
1
]))聽(
?
:(
?
:[
0
-
2
][
0
-
3
])
|
(
?
:[
0
-
1
][
0
-
9
])):[
0
-
5
][
0
-
9
]:[
0
-
5
][
0
-
9
]$
/
聽7
聽聽
if
(
!
rr.test(form.date.value))
{
聽8
聽聽聽聽alert(
'
璇瘋緭鍏ユ紜殑鏃墮棿鏍煎紡錛屽錛?007-09-29聽10:50:00
'
);
聽9
聽聽聽聽form.date.focus();
10
聽聽聽聽
return
聽
false
;
11
聽聽}
12
聽聽alert(
'
ok!
'
);
13
聽聽
return
聽
true
;
14
}
15
//
-->
16
</
script
>
17
<
form聽name
=
"
form1
"
聽method
=
"
post
"
聽action
=
""
聽onSubmit
=
"
return聽Checkform(this);
"
>
18
聽聽
<
input聽name
=
"
date
"
聽type
=
"
text
"
聽id
=
"
date
"
聽size
=
"
20
"
聽maxlength
=
"
19
"
>
19
聽聽
<
input聽type
=
"
submit
"
聽name
=
"
Submit
"
聽value
=
"
鎻愪氦
"
>
20
</
form
>
]]>
document 鏂囨尅瀵硅薄 - JavaScript鑴氭湰璇█鎻忚堪
---------------------------------------------------------------------
娉?欏甸潰涓婂厓绱爊ame灞炴у拰JavaScript寮曠敤鐨勫悕縐板繀欏諱竴鑷村寘鎷ぇ灝忓啓
聽聽聽 鍚﹀垯浼氭彁紺轟綘涓涓敊璇俊鎭?"寮曠敤鐨勫厓绱犱負絀烘垨鑰呬笉鏄璞?
---------------------------------------------------------------------
瀵硅薄灞炴?br />document.title聽聽聽聽聽聽聽聽聽聽聽聽聽 //璁劇疆鏂囨。鏍囬絳変環(huán)浜嶩TML鐨?lt;title>鏍囩
document.bgColor聽聽聽聽聽聽聽聽聽聽聽 //璁劇疆欏甸潰鑳屾櫙鑹?br />document.fgColor聽聽聽聽聽聽聽聽聽聽聽 //璁劇疆鍓嶆櫙鑹?鏂囨湰棰滆壊)
document.linkColor聽聽聽聽聽聽聽聽聽 //鏈偣鍑昏繃鐨勯摼鎺ラ鑹?br />document.alinkColor聽聽聽聽聽聽聽聽 //嬋媧婚摼鎺?鐒︾偣鍦ㄦ閾炬帴涓?鐨勯鑹?br />document.vlinkColor聽聽聽聽聽聽聽聽 //宸茬偣鍑昏繃鐨勯摼鎺ラ鑹?br />document.URL聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //璁劇疆URL灞炴т粠鑰屽湪鍚屼竴紿楀彛鎵撳紑鍙︿竴緗戦〉
document.fileCreatedDate聽聽聽 //鏂囦歡寤虹珛鏃ユ湡錛屽彧璇誨睘鎬?br />document.fileModifiedDate聽聽 //鏂囦歡淇敼鏃ユ湡錛屽彧璇誨睘鎬?br />document.fileSize聽聽聽聽聽聽聽聽聽聽 //鏂囦歡澶у皬錛屽彧璇誨睘鎬?br />document.cookie聽聽聽聽聽聽聽聽聽聽聽聽 //璁劇疆鍜岃鍑篶ookie
document.charset聽聽聽聽聽聽聽聽聽聽聽 //璁劇疆瀛楃闆?綆浣撲腑鏂?gb2312
---------------------------------------------------------------------
甯哥敤瀵硅薄鏂規(guī)硶
document.write()聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //鍔ㄦ佸悜欏甸潰鍐欏叆鍐呭
document.createElement(Tag)聽聽聽聽聽聽聽 //鍒涘緩涓涓猦tml鏍囩瀵硅薄
document.getElementById(ID)聽聽聽聽聽聽聽 //鑾峰緱鎸囧畾ID鍊肩殑瀵硅薄
document.getElementsByName(Name)聽聽 //鑾峰緱鎸囧畾Name鍊肩殑瀵硅薄
document.body.appendChild(oTag)
---------------------------------------------------------------------
body-涓諱綋瀛愬璞?br />document.body聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //鎸囧畾鏂囨。涓諱綋鐨勫紑濮嬪拰緇撴潫絳変環(huán)浜?lt;body></body>
document.body.bgColor聽聽聽聽聽聽聽 //璁劇疆鎴栬幏鍙栧璞″悗闈㈢殑鑳屾櫙棰滆壊
document.body.link聽聽聽聽聽聽聽聽聽聽 //鏈偣鍑昏繃鐨勯摼鎺ラ鑹?br />document.body.alink聽聽聽聽聽聽聽聽聽 //嬋媧婚摼鎺?鐒︾偣鍦ㄦ閾炬帴涓?鐨勯鑹?br />document.body.vlink聽聽聽聽聽聽聽聽聽 //宸茬偣鍑昏繃鐨勯摼鎺ラ鑹?br />document.body.text聽聽聽聽聽聽聽聽聽聽 //鏂囨湰鑹?br />document.body.innerText聽聽聽聽聽 //璁劇疆<body>...</body>涔嬮棿鐨勬枃鏈?br />document.body.innerHTML聽聽聽聽聽 //璁劇疆<body>...</body>涔嬮棿鐨凥TML浠g爜
document.body.topMargin聽聽聽聽聽 //欏甸潰涓婅竟璺?br />document.body.leftMargin聽聽聽聽 //欏甸潰宸﹁竟璺?br />document.body.rightMargin聽聽聽 //欏甸潰鍙寵竟璺?br />document.body.bottomMargin聽聽 //欏甸潰涓嬭竟璺?br />document.body.background聽聽聽聽 //鑳屾櫙鍥劇墖
document.body.appendChild(oTag) //鍔ㄦ佺敓鎴愪竴涓狧TML瀵硅薄
甯哥敤瀵硅薄浜嬩歡
document.body.onclick="func()"聽聽聽聽聽聽聽聽聽聽 //榧犳爣鎸囬拡鍗曞嚮瀵硅薄鏄Е鍙?br />document.body.onmouseover="func()"聽聽聽聽聽聽 //榧犳爣鎸囬拡縐誨埌瀵硅薄鏃惰Е鍙?br />document.body.onmouseout="func()"聽聽聽聽聽聽聽 //榧犳爣鎸囬拡縐誨嚭瀵硅薄鏃惰Е鍙?
---------------------------------------------------------------------
location-浣嶇疆瀛愬璞?/p>
document.location.hash聽聽聽聽聽聽 // #鍙峰悗鐨勯儴鍒?br />document.location.host聽聽聽聽聽聽 // 鍩熷悕+绔彛鍙?br />document.location.hostname聽聽 // 鍩熷悕
document.location.href聽聽聽聽聽聽 // 瀹屾暣URL
document.location.pathname聽聽 // 鐩綍閮ㄥ垎
document.location.port聽聽聽聽聽聽 // 绔彛鍙?br />document.location.protocol聽聽 // 緗戠粶鍗忚(http:)
document.location.search聽聽聽聽 // ?鍙峰悗鐨勯儴鍒?/p>
documeny.location.reload()聽聽聽聽聽聽 //鍒鋒柊緗戦〉
document.location.reload(URL)聽聽聽 //鎵撳紑鏂扮殑緗戦〉
document.location.assign(URL)聽聽聽 //鎵撳紑鏂扮殑緗戦〉
document.location.replace(URL)聽聽 //鎵撳紑鏂扮殑緗戦〉
---------------------------------------------------------------------
selection-閫夊尯瀛愬璞?br />document.selection
---------------------------------------------------------------------
images闆嗗悎(欏甸潰涓殑鍥捐薄)
a)閫氳繃闆嗗悎寮曠敤
document.images聽聽聽聽聽聽聽聽聽聽聽聽聽 //瀵瑰簲欏甸潰涓婄殑<img>鏍囩
document.images.length聽聽聽聽聽聽 //瀵瑰簲欏甸潰涓?lt;img>鏍囩鐨勪釜鏁?br />document.images[0]聽聽聽聽聽聽聽聽聽聽 //絎?涓?lt;img>鏍囩聽聽聽聽聽聽聽聽聽聽
document.images[i]聽聽聽聽聽聽聽聽聽聽 //絎琲-1涓?lt;img>鏍囩
b)閫氳繃nane灞炴х洿鎺ュ紩鐢?br /><img name="oImage">
document.images.oImage聽聽聽聽聽聽 //document.images.name灞炴?/p>
c)寮曠敤鍥劇墖鐨剆rc灞炴?br />document.images.oImage.src聽聽 //document.images.name灞炴?src
d)鍒涘緩涓涓浘璞?br />var oImage
oImage = new Image()
document.images.oImage.src="1.jpg"
鍚屾椂鍦ㄩ〉闈笂寤虹珛涓涓?lt;img>鏍囩涓庝箣瀵瑰簲灝卞彲浠ユ樉紺?/p>
<html>
<img name=oImage>
<script language="javascript">
聽聽聽 var oImage
聽聽聽 oImage = new Image()
聽聽聽 document.images.oImage.src="1.jpg"
</script>
</html>
<html>
<script language="javascript">
聽聽聽 oImage=document.caeateElement("IMG")
聽聽聽 oImage.src="1.jpg"
聽聽聽 document.body.appendChild(oImage)
</script>
</html>
----------------------------------------------------------------------
forms闆嗗悎(欏甸潰涓殑琛ㄥ崟)
a)閫氳繃闆嗗悎寮曠敤
document.forms聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //瀵瑰簲欏甸潰涓婄殑<form>鏍囩
document.forms.length聽聽聽聽聽聽聽聽聽聽 //瀵瑰簲欏甸潰涓?lt;form>鏍囩鐨勪釜鏁?br />document.forms[0]聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //絎?涓?lt;form>鏍囩
document.forms[i]聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //絎琲-1涓?lt;form>鏍囩
document.forms[i].length聽聽聽聽聽聽聽 //絎琲-1涓?lt;form>涓殑鎺т歡鏁?br />document.forms[i].elements[j]聽聽 //絎琲-1涓?lt;form>涓j-1涓帶浠?/p>
b)閫氳繃鏍囩name灞炴х洿鎺ュ紩鐢?br /><form name="Myform"><input name="myctrl"></form>
document.Myform.myctrl聽聽聽聽聽聽聽聽聽 //document.琛ㄥ崟鍚?鎺т歡鍚?/p>
c)璁塊棶琛ㄥ崟鐨勫睘鎬?br />document.forms[i].name聽聽聽聽聽聽聽聽聽 //瀵瑰簲<form name>灞炴?br />document.forms[i].action聽聽聽聽聽聽聽 //瀵瑰簲<form action>灞炴?br />document.forms[i].encoding聽聽聽聽聽 //瀵瑰簲<form enctype>灞炴?br />document.forms[i].target聽聽聽聽聽聽聽 //瀵瑰簲<form target>灞炴?/p>
document.forms[i].appendChild(oTag) //鍔ㄦ佹彃鍏ヤ竴涓帶浠?br />-----------------------------------------------------------------------
<html>
<!--Text鎺т歡鐩稿叧Script-->
<form name="Myform">
<input type="text" name="oText">
<input type="password" name="oPswd">
<form>
<script language="javascript">
//鑾峰彇鏂囨湰瀵嗙爜妗嗙殑鍊?br />document.write(document.Myform.oText.value)
document.write(document.Myform.oPswd.value)
</script>
</html>
-----------------------------------------------------------------------
<html>
<!--checkbox,radio鎺т歡鐩稿叧script-->
<form name="Myform">
<input type="checkbox" name="chk" value="1">1聽聽聽聽
<input type="checkbox" name="chk" value="2">2聽聽聽聽
</form>聽聽聽聽
<script language="javascript">聽聽聽聽
function fun(){聽聽聽聽
聽聽 //閬嶅巻checkbox鎺т歡鐨勫煎茍鍒ゆ柇鏄惁閫変腑聽聽聽聽
聽聽 var length聽聽聽聽
聽聽 length=document.forms[0].chk.length聽聽聽聽
聽聽 for(i=0;i<length;i++){聽聽聽聽
聽聽 v=document.forms[0].chk[i].value聽聽聽聽
聽聽 b=document.forms[0].chk[i].checked聽聽聽聽
聽聽 if(b)聽聽聽聽
聽聽聽聽 alert(v=v+"琚変腑")聽聽聽聽
聽聽 else聽聽聽聽
聽聽聽聽 alert(v=v+"鏈変腑")聽聽聽
聽聽 }聽聽聽聽
聽聽 }聽聽聽聽
</script>聽聽聽聽聽
<a href=# onclick="fun()">ddd</a>聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽
</html>
-----------------------------------------------------------------------
<html>
<!--Select鎺т歡鐩稿叧Script-->
<form name="Myform">
<select name="oSelect">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</form>
<script language="javascript">
聽聽聽 //閬嶅巻select鎺т歡鐨刼ption欏?br />聽聽聽 var length
聽聽聽 length=document.Myform.oSelect.length
聽聽聽 for(i=0;i<length;i++)
聽聽聽 document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
聽聽聽 //閬嶅巻option欏瑰茍涓斿垽鏂煇涓猳ption鏄惁琚変腑
聽聽聽 for(i=0;i<document.Myform.oSelect.length;i++){
聽聽聽 if(document.Myform.oSelect[i].selected!=true)
聽聽聽 document.write(document.Myform.oSelect[i].value)
聽聽聽 else
聽聽聽 document.write("<font color=red>"+document.Myform.oSelect[i].value+"</font>")聽聽
聽聽聽 }
</script>
<script language="javascript">
聽聽聽 //鏍規(guī)嵁SelectedIndex鎵撳嵃鍑洪変腑鐨刼ption
聽聽聽 //(0鍒癲ocument.Myform.oSelect.length-1)
聽聽聽 i=document.Myform.oSelect.selectedIndex
聽聽聽 document.write(document.Myform.oSelect[i].value)
</script>
<script language="javascript">
聽聽聽 //鍔ㄦ佸鍔爏elect鎺т歡鐨刼ption欏?br />聽聽聽 var oOption = document.createElement("OPTION");
聽聽聽 oOption.text="4";
聽聽聽 oOption.value="4";
聽聽聽 document.Myform.oSelect.add(oOption);
</script>
<html>
-----------------------------------------------------------------------
<Div id="oDiv">Text</Div>
document.all.oDiv聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //寮曠敤鍥懼眰oDiv聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽
document.all.oDiv.style.display=""聽聽聽聽聽聽聽聽聽聽聽聽聽 //鍥懼眰璁劇疆涓哄彲瑙?br />document.all.oDiv.style.display="none"聽聽聽聽聽聽聽聽聽 //鍥懼眰璁劇疆涓洪殣钘?br />document.getElementId("oDiv")聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 //閫氳繃getElementId寮曠敤瀵硅薄
document.getElementId("oDiv").style=""
document.getElementId("oDiv").display="none"
/*document.all琛ㄧずdocument涓墍鏈夊璞$殑闆嗗悎
鍙湁ie鏀寔姝ゅ睘鎬э紝鍥犳涔熺敤鏉ュ垽鏂祻瑙堝櫒鐨勭綾?/
鍥懼眰瀵硅薄鐨?涓睘鎬?br />document.getElementById("ID").innerText聽聽 //鍔ㄦ佽緭鍑烘枃鏈?br />document.getElementById("ID").innerHTML聽聽 //鍔ㄦ佽緭鍑篐TML
document.getElementById("ID").outerText聽聽 //鍚宨nnerText
document.getElementById("ID").outerHTML聽聽 //鍚宨nnerHTML
<html>
<script language="javascript">
function change(){
document.all.oDiv.style.display="none"
}
</script>
<Div id="oDiv" onclick="change()">Text</Div>
</html>
<html>
<script language="javascript">
function changeText(){
document.getElementById("oDiv").innerText="NewText"
}
</script>
<Div id="oDiv" onmouseover="changeText()">Text</Div>
</html>
聽
鍦↖E涓?select灞炰簬window綾誨瀷鎺т歡錛屽畠浼氣滄尅浣忊濇墍鏈夐潪window綾誨瀷鎺т歡 鏈夊縐嶇鍔炴硶; 浠ヤ笅渚嬪瓙緋葷綉涓婅祫婧愭暣鐞?/p> 鍘熷潃錛?a >http://hi.baidu.com/suofang/blog/item/72f2f7ed23f2324e78f055c4.html 絎?縐嶆柟娉曠殑渚嬪瓙錛氭渶濂界殑鏂規(guī)硶錛歩frame鏉ュ綋浣渄iv鐨勫簳 Div琚玈elect鎸′綇錛屾槸涓涓瘮杈冨父瑙佺殑闂銆偮犅犅?br />聽聽聽聽聽 鏈夌殑鏈嬪弸閫氳繃鎶奷iv鐨勫唴瀹規(guī)斁鍏frame鎴杘bject閲屾潵瑙e喅銆偮犅犅?br />聽聽聽聽聽 鍙儨榪欐牱浼氱牬鍧忛〉闈㈢殑緇撴瀯錛屼簰鍔ㄦт笉澶уソ銆偮犅犅?br />聽聽聽聽
絎?縐嶆柟娉曠殑渚嬪瓙錛氭渶鐩存帴鐨勬柟娉?闅愯棌涓嬫媺妗? 涓嬮潰鎻愪緵鐨勬槸涓涓瘮杈冮氱敤鐨勪竴緇勫嚱鏁? test.htm ------------ <script> function cal_ShowElement(){ function cal_GetOffsetTop(src){ </script> 浠ヤ笂榪欑鏂規(guī)硶,濡傛灉瀵逛簬select妗嗘暟鐩皯,鐩稿鍥哄畾鐨勮瘽,鐩存帴鐢╫bj.style.visibility="hidden"榪欐牱榪涜闅愯棌鏄洿鐩存帴鐨? 絎?縐嶆柟娉曪細鐢╥frame浣滆澆浣?/strong> 浠ヤ笅鏄竴綆鍗曠殑渚嬪瓙: ----------- <html> function show(){ 絎?縐嶆柟娉曪細Object瀵硅薄鐨勪紭鍏堝害杈冮珮,鍙互鎸′綇select妗?/strong> <OBJECT id=aa style="display:none;z-index:1000; position:absolute; top:0; left:0; width:152; height: 200;" type="text/x-scriptlet" data="about:<body><div style='position:absolute;left:0;top:0;width:152;height:200;font:14;color:white;background:black;border:1 solid black'>test</div>"></OBJECT> 榪欑鏂規(guī)硶铏界劧涔熺畝鍗?浣嗗澶嶆潅鐨勫眰鏄潵璇磋繕涓嶆槸濂界殑瑙e喅鏂規(guī)硶. |
瀵?String 瀵硅薄緙栫爜浠ヤ究瀹冧滑鑳藉湪鎵鏈夎綆楁満涓婂彲璇伙紝
escape(charString)
蹇呴夐」 charstring 鍙傛暟鏄緙栫爜鐨勪換鎰?String 瀵硅薄鎴栨枃瀛椼?
escape 鏂規(guī)硶榪斿洖涓涓寘鍚簡 charstring 鍐呭鐨勫瓧絎︿覆鍊鹼紙 Unicode 鏍煎紡錛夈傛墍鏈夌┖鏍箋佹爣鐐廣侀噸闊崇鍙蜂互鍙婂叾浠?a >闈?ASCII 瀛楃閮界敤 %xx 緙栫爜浠f浛錛屽叾涓?xx 絳変簬琛ㄧず璇ュ瓧絎︾殑鍗佸叚榪涘埗鏁般備緥濡傦紝絀烘牸榪斿洖鐨勬槸 "%20" 銆?/p>
瀛楃鍊煎ぇ浜?255 鐨勪互 %uxxxx 鏍煎紡瀛樺偍銆?
娉ㄦ剰 聽 escape 鏂規(guī)硶涓嶈兘澶熺敤鏉ュ緇熶竴璧勬簮鏍囩ず鐮?(URI) 榪涜緙栫爜銆傚鍏剁紪鐮佸簲浣跨敤 encodeURI 鍜?b>encodeURIComponent 鏂規(guī)硶銆?br />
灝嗘枃鏈瓧絎︿覆緙栫爜涓轟竴涓湁鏁堢殑緇熶竴璧勬簮鏍囪瘑絎?(URI)銆?/p>
encodeURI(URIString)
蹇呴夌殑 URIString 鍙傛暟浠h〃涓涓凡緙栫爜鐨?URI銆?/p>
encodeURI 鏂規(guī)硶榪斿洖涓涓紪鐮佺殑 URI銆傚鏋滄?zhèn)畣缂栫爜缁撴灉浼犻掔粰 decodeURI錛岄偅涔堝皢榪斿洖鍒濆鐨勫瓧絎︿覆銆?b>encodeURI 鏂規(guī)硶涓嶄細瀵逛笅鍒楀瓧絎﹁繘琛岀紪鐮侊細":"銆?/"銆?;" 鍜?"?"銆傝浣跨敤 encodeURIComponent 鏂規(guī)硶瀵硅繖浜涘瓧絎﹁繘琛岀紪鐮併?br />
灝嗘枃鏈瓧絎︿覆緙栫爜涓轟竴涓粺涓璧勬簮鏍囪瘑絎?(URI) 鐨勪竴涓湁鏁堢粍浠躲?/p>
encodeURIComponent(encodedURIString)
蹇呴夌殑 encodedURIString 鍙傛暟浠h〃涓涓凡緙栫爜鐨?URI 緇勪歡銆?/p>
encodeURIComponent 鏂規(guī)硶榪斿洖涓涓凡緙栫爜鐨?URI銆傚鏋滄?zhèn)畣缂栫爜缁撴灉浼犻掔粰 decodeURIComponent錛岄偅涔堝皢榪斿洖鍒濆鐨勫瓧絎︿覆銆傚洜涓?encodeURIComponent 鏂規(guī)硶瀵規(guī)墍鏈夌殑瀛楃緙栫爜錛岃娉ㄦ剰錛屽鏋滆瀛楃涓蹭唬琛ㄤ竴涓礬寰勶紝渚嬪 /folder1/folder2/default.html錛屽叾涓殑鏂滄潬涔熷皢琚紪鐮併傝繖鏍蜂竴鏉ワ紝褰撹緙栫爜緇撴灉琚綔涓鴻姹傚彂閫佸埌 web 鏈嶅姟鍣ㄦ椂灝嗘槸鏃犳晥鐨勩傚鏋滃瓧絎︿覆涓寘鍚笉姝竴涓?URI 緇勪歡錛岃浣跨敤 encodeURI 鏂規(guī)硶榪涜緙栫爜銆?br />
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest() {
聽聽聽 if (window.ActiveXObject) {
聽聽聽聽聽聽聽 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
聽聽聽 }
聽聽聽 else if (window.XMLHttpRequest) {
聽聽聽聽聽聽聽 xmlHttp = new XMLHttpRequest();
聽聽聽 }
}
聽聽聽
function doSearch() {
聽聽聽 createXMLHttpRequest();
聽聽聽 xmlHttp.onreadystatechange = handleStateChange;
聽聽聽 xmlHttp.open("GET", "dynamicContent.xml", true);
聽聽聽 xmlHttp.send(null);
}
聽聽聽
function handleStateChange() {
聽聽聽 if(xmlHttp.readyState == 4) {
聽聽聽聽聽聽聽 if(xmlHttp.status == 200) {
聽聽聽聽聽聽聽聽聽聽聽 clearPreviousResults();
聽聽聽聽聽聽聽聽聽聽聽 parseResults();
聽聽聽聽聽聽聽 }
聽聽聽 }
}
function clearPreviousResults() {
聽聽聽 var header = document.getElementById("header");
聽聽聽 if(header.hasChildNodes()) {
聽聽聽聽聽聽聽 header.removeChild(header.childNodes[0]);
聽聽聽 }
聽聽聽 var tableBody = document.getElementById("resultsBody");
聽聽聽 while(tableBody.childNodes.length > 0) {
聽聽聽聽聽聽聽 tableBody.removeChild(tableBody.childNodes[0]);
聽聽聽 }
}
function parseResults() {
聽聽聽 var results = xmlHttp.responseXML;
聽聽聽 var property = null;
聽聽聽 var address = "";
聽聽聽 var price = "";
聽聽聽 var comments = "";
聽聽聽 var properties = results.getElementsByTagName("property");
聽聽聽 for(var i = 0; i < properties.length; i++) {
聽聽聽聽聽聽聽 property = properties[i];
聽聽聽聽聽聽聽 address = property.getElementsByTagName("address")[0].firstChild.nodeValue;
聽聽聽聽聽聽聽 price = property.getElementsByTagName("price")[0].firstChild.nodeValue;
聽聽聽聽聽聽聽 comments = property.getElementsByTagName("comments")[0].firstChild.nodeValue;
聽聽聽聽聽聽聽
聽聽聽聽聽聽聽 addTableRow(address, price, comments);
聽聽聽 }
聽聽聽
聽聽聽 var header = document.createElement("h2");
聽聽聽 var headerText = document.createTextNode("Results:");
聽聽聽 header.appendChild(headerText);
聽聽聽 document.getElementById("header").appendChild(header);
聽聽聽
聽聽聽 document.getElementById("resultsTable").setAttribute("border", "1");
}
function addTableRow(address, price, comments) {
聽聽聽 var row = document.createElement("tr");
聽聽聽 var cell = createCellWithText(address);
聽聽聽 row.appendChild(cell);
聽聽聽
聽聽聽 cell = createCellWithText(price);
聽聽聽 row.appendChild(cell);
聽聽聽
聽聽聽 cell = createCellWithText(comments);
聽聽聽 row.appendChild(cell);
聽聽聽
聽聽聽 document.getElementById("resultsBody").appendChild(row);
}
function createCellWithText(text) {
聽聽聽 var cell = document.createElement("td");
聽聽聽 var textNode = document.createTextNode(text);
聽聽聽 cell.appendChild(textNode);
聽聽聽
聽聽聽 return cell;
}
</script>
</head>
<body>
聽 <h1>Search Real Estate Listings</h1>
聽
聽 <form action="#">
聽聽聽 Show listings from
聽聽聽聽聽聽聽 <select>
聽聽聽聽聽聽聽聽聽聽聽 <option value="50000">$50,000</option>
聽聽聽聽聽聽聽聽聽聽聽 <option value="100000">$100,000</option>
聽聽聽聽聽聽聽聽聽聽聽 <option value="150000">$150,000</option>
聽聽聽聽聽聽聽 </select>
聽聽聽聽聽聽聽 to
聽聽聽聽聽聽聽 <select>
聽聽聽聽聽聽聽聽聽聽聽 <option value="100000">$100,000</option>
聽聽聽聽聽聽聽聽聽聽聽 <option value="150000">$150,000</option>
聽聽聽聽聽聽聽聽聽聽聽 <option value="200000">$200,000</option>
聽聽聽聽聽聽聽 </select>
聽聽聽 <input type="button" value="Search" onclick="doSearch();"/>聽聽聽
聽 </form>
聽
聽
聽
聽 <span id="header">
聽
聽 </span>
聽 <table id="resultsTable" width="75%" border="0">
聽聽聽 <tbody id="resultsBody">
聽聽聽 </tbody>
聽 </table>
</body>
</html>
dynamicContent.xml鏂囦歡
<?xml version="1.0" encoding="UTF-8"?>
<properties>
聽聽聽 <property>
聽聽聽聽聽聽聽 <address>812 Gwyn Ave</address>
聽聽聽聽聽聽聽 <price>$100,000</price>
聽聽聽聽聽聽聽 <comments>Quiet, serene neighborhood</comments>
聽聽聽 </property>聽聽聽
聽聽聽 <property>
聽聽聽聽聽聽聽 <address>3308 James Ave S</address>
聽聽聽聽聽聽聽 <price>$110,000</price>
聽聽聽聽聽聽聽 <comments>Close to schools, shopping, entertainment</comments>
聽聽聽 </property>聽聽聽
聽聽聽 <property>
聽聽聽聽聽聽聽 <address>98320 County Rd 113</address>
聽聽聽聽聽聽聽 <price>$115,000</price>
聽聽聽聽聽聽聽 <comments>Small acreage outside of town</comments>
聽聽聽 </property>聽聽聽
</properties>
function createXMLHttpRequest() {
聽聽聽 if (window.ActiveXObject) {
聽聽聽聽聽聽聽 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
聽聽聽 }
聽聽聽 else if (window.XMLHttpRequest) {
聽聽聽聽聽聽聽 xmlHttp = new XMLHttpRequest();
聽聽聽 }
}
聽聽聽
function startRequest(requestedList) {
聽聽聽 requestType = requestedList;
聽聽聽 createXMLHttpRequest();
聽聽聽 xmlHttp.onreadystatechange = handleStateChange;
聽聽聽 xmlHttp.open("GET", "parseXML.xml", true);
聽聽聽 xmlHttp.send(null);
}
聽聽聽
function handleStateChange() {
聽聽聽 if(xmlHttp.readyState == 4) {
聽聽聽聽聽聽聽 if(xmlHttp.status == 200) {
聽聽聽聽聽聽聽聽聽聽聽 if(requestType == "north") {
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 listNorthStates();
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽聽聽聽聽 else if(requestType == "all") {
聽聽聽聽聽聽聽聽聽聽聽聽聽聽聽 listAllStates();
聽聽聽聽聽聽聽聽聽聽聽 }
聽聽聽聽聽聽聽 }
聽聽聽 }
}
聽
function listNorthStates() {
聽聽聽 var xmlDoc = xmlHttp.responseXML;
聽聽聽 var northNode = xmlDoc.getElementsByTagName("north")[0];
聽聽聽
聽聽聽 var northStates = northNode.getElementsByTagName("state");
聽聽聽
聽聽聽 outputList("Northern States", northStates);
}
function listAllStates() {
聽聽聽 var xmlDoc = xmlHttp.responseXML;
聽聽聽 var allStates = xmlDoc.getElementsByTagName("state");
聽聽聽
聽聽聽 outputList("All States in Document", allStates);
}
function outputList(title, states) {
聽聽聽 var out = title;
聽聽聽 var currentState = null;
聽聽聽 for(var i = 0; i < states.length; i++) {
聽聽聽聽聽聽聽 currentState = states[i];
聽聽聽聽聽聽聽 out = out + "\n- " + currentState.childNodes[0].nodeValue;
聽聽聽 }
聽聽聽
聽聽聽 alert(out);
}
</script>
parseXML.xml鏂囦歡
<?xml version="1.0" encoding="UTF-8"?>
<states>
聽聽聽 <north>
聽聽聽聽聽聽聽 <state>Minnesota</state>
聽聽聽聽聽聽聽 <state>Iowa</state>
聽聽聽聽聽聽聽 <state>North Dakota</state>
聽聽聽 </north>
聽聽聽 <south>
聽聽聽聽聽聽聽 <state>Texas</state>
聽聽聽聽聽聽聽 <state>Oklahoma</state>
聽聽聽聽聽聽聽 <state>Louisiana</state>
聽聽聽 </south>
聽聽聽 <east>
聽聽聽聽聽聽聽 <state>New York</state>
聽聽聽聽聽聽聽 <state>North Carolina</state>
聽聽聽聽聽聽聽 <state>Massachusetts</state>
聽聽聽 </east>
聽聽聽 <west>
聽聽聽聽聽聽聽 <state>California</state>
聽聽聽聽聽聽聽 <state>Oregon</state>
聽聽聽聽聽聽聽 <state>Nevada</state>
聽聽聽 </west>
</states>