第七章
動(dòng)態(tài)創(chuàng)建標(biāo)記
document.write 方法：
-
<script> document.write("<p>xxxxxxx</p>"); </script>缺點(diǎn)是違背了“行為與表現(xiàn)分離原則”怠缸，即使把語(yǔ)句寫到外部函數(shù)中，還是需要加入<script>標(biāo)簽才能調(diào)用，不推薦
-
innerHTML 屬性:
var testdiv = document.getElementById("testdiv"); testdiv.innerHTML = "<p>xxxxxxx</p>"可讀可寫舌剂，簡(jiǎn)單粗暴裕便，缺點(diǎn)是沒(méi)法細(xì)化操作，而且會(huì)直接替換元素里面所有內(nèi)容催训。
-
createElement 方法
document.createElement(nodeName)創(chuàng)建一個(gè)元素節(jié)點(diǎn)
-
createTextNode 方法
document.createTextNode(text)創(chuàng)建一個(gè)文本節(jié)點(diǎn)
-
appendChild 方法
節(jié)點(diǎn)創(chuàng)建后屬于“野生”的洽议，還需要加入節(jié)點(diǎn)樹，appendChild 方法可以為某個(gè)節(jié)點(diǎn)添加子節(jié)點(diǎn)
parent.appendChild(child) -
insertBefore 方法
parentElement.insertBefore(newElement, targetElement)在 targetElement 前插入一個(gè)新節(jié)點(diǎn)漫拭，其中父元素節(jié)點(diǎn) parentElement 可以由 targetElement 的 parentNode 屬性得到绞铃。用法如下：
var gallery = document.getElementById("imagegallery"); gallery.parentNode.insertBefore(placeholder, gallery); -
insertAfter “方法”
DOM并沒(méi)有提供 insertAfter 方法，不過(guò)我們可以直接創(chuàng)建一個(gè)：
function insertAfter(newElement, targetElement ) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newElement); } else { parent.insertBefore(newElement, targetElement.nextSibling); } }其中的 nextSibling 屬性是指目標(biāo)元素節(jié)點(diǎn)的下一個(gè)兄弟元素
Ajax
-
解釋：
一種異步加載技術(shù)嫂侍，可以做得到局部更新頁(yè)面中的一部分儿捧，而不用整體重新加載。其優(yōu)勢(shì)在于對(duì)頁(yè)面的請(qǐng)求以異步方式發(fā)送到服務(wù)器挑宠。而服務(wù)器不會(huì)用整個(gè)頁(yè)面來(lái)相應(yīng)請(qǐng)求菲盾，它會(huì)在后臺(tái)處理請(qǐng)求，與此同時(shí)用戶還能繼續(xù)瀏覽頁(yè)面并與頁(yè)面交互各淀。
-
XMLHttpRequest 對(duì)象
XMLHttpRequest 對(duì)象充當(dāng)著客戶端與服務(wù)器之間的中間人角色懒鉴。JavaScript可以通過(guò)這個(gè)對(duì)象自己發(fā)送請(qǐng)求和處理響應(yīng)。
-
創(chuàng)建 XMLHttpRequest 對(duì)象
- 舊版本的Internet Explorer（IE5和IE6）中使用 ActiveX 對(duì)象
var request = new ActiveXObject("Microsoft.XMLHTTP");- 其他瀏覽器（IE7+、Firefox临谱、Chrome璃俗、Safari 和 Opera）
var request = new XMLHttpRequest();- 整合成 getHTTPObject 函數(shù)
function getHTTPObject() { //兼容不同版本IE if (typeof XMLHttpRequest == "undefined") { try {return new ActiveXObject("Msxml2.XMLHTTP.6.0");} catch (e) {} try {return new ActiveXObject("Msxml2.XMLHTTP.3.0");} catch (e) {} try {return new ActiveXObject("Msxml2.XMLHTTP");} catch (e) {} return false; } return new XMLHttpRequest(); -
XMLHttpRequest 對(duì)象的 open 和 send方法
-
open 方法用來(lái)規(guī)定請(qǐng)求的類型、URL 以及是否異步處理請(qǐng)求悉默。
有三個(gè)參數(shù)：- method：請(qǐng)求的類型城豁；GET 或 POST
- url：文件在服務(wù)器上的位置
- async：true（異步）或 false（同步）
實(shí)例：
xmlhttp.open("GET","demo_get.html",true); -
send 方法將請(qǐng)求發(fā)送到服務(wù)器。
有一個(gè)參數(shù)：- string：僅用于 POST 請(qǐng)求
-
-
事件處理函數(shù) onreadystatechange , readyState 屬性和 status 屬性
-
onreadystatechange
當(dāng)請(qǐng)求被發(fā)送到服務(wù)器時(shí)抄课，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)唱星。每當(dāng) readyState 改變時(shí)，就會(huì)觸發(fā) onreadystatechange 事件跟磨。
-
readyState
服務(wù)器在向 XMLHttpRequest 對(duì)象發(fā)回響應(yīng)時(shí)间聊，該對(duì)象有許多屬性可用，瀏覽器會(huì)在不同階段更新 readyState 的值抵拘，有5個(gè)可能的值：
- 0: 請(qǐng)求未初始化
- 1: 服務(wù)器連接已建立
- 2: 請(qǐng)求已接收
- 3: 請(qǐng)求處理中
- 4: 請(qǐng)求已完成哎榴，且響應(yīng)已就緒
-
status
- 200: "OK"
- 404: 未找到頁(yè)面
實(shí)例：
xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } -
-
獲取服務(wù)器返回的數(shù)據(jù)
主要通過(guò)兩個(gè)屬性：responseText 和 responseXML
-
responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)。
document.getElementById("myDiv").innerHTML=xmlhttp.responseText; -
responseXML：用于保存 Content-Type 頭部中指定為“text/xml”的數(shù)據(jù)僵蛛，其實(shí)是一個(gè)DocumentFragment 對(duì)象叹话。
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br>"; } document.getElementById("myDiv").innerHTML=txt;
-
-
同源策略
使用 XMLHttpRequest 對(duì)象發(fā)送的請(qǐng)求只能訪問(wèn)與其所在的HTML處于同一個(gè)域中的數(shù)據(jù)，不能向其他域發(fā)送請(qǐng)求墩瞳。
