第六章 案例研究：图片库改进版
这一章将根据第五章提到的内容对图片库进行了改进
首先检查DOM方法是否被游览器支持
if(!document.getElementById) return false;
if(!document.getElementsByTagName) return false;
if(!document.getElementById("placeholder"))
//.......类似的测试
接下来讲到了一个重点内容：共享onload事件
JavaScript往往需要在HTML文档加载结束后执行，不然一些dom方法会找不到对象,这就是为什么jquery
作者给出了一个有意思的方法，用于加载多个函数，这个方法看起来很简单，但其中思想需要仔细领悟，这本书中以后的几个方法的思路也是类似的
addLoadEvent函数
function addLoadEvent(func) {
var oldonload=window.onload;
if(typeof window.onload != ‘function‘){
window.onload=func;
} else {
window.onload= function (){
oldonload();
func();
}
}
}
1.把现有的window.onload事件处理函数存入变量oldonload.
2.如果在这个处理函数上还没有绑定任何函数，就向平时一样把函数添加给它.
3.如果在这个处理函数上已经绑定了一些函数，就把新函数追加到现有函数末尾.
三元操作符
variable(变量) = condition(条件) ? if true : if else;
可以看出三元操作符是if/else 的一种变体
nodeName属性
返回元素的标签名，总是返回大写字母比如IMG,P,A等html标签
第七章 动态创建标记
document.write()方法可以轻松的把字符串插入文档，但是它不能做到javascript完全与html分离，必须吧<script>放到<html>里。
innerHTML属性
该属性被浏览器广泛支持，既能用于读取，又能用于写入。
利用这个技术无法区分“插入一段html内容”与“写入一段html内容”。一旦使用innerHTML,它的全部内容将被替换。
<div id="test">
<p>this is <em>my</em> content.</p>
</div>
var text= document.getElementById("test").innerHTML
alrert(text) // <p>this is <em>my</em> content.</p>
<div id="test">
</div>
document.getElementById("test").innerHTML = "<p>this is <em>my</em> content.</p>" //浏览器中会看到相应效果
DOM方法介绍
1.createElement方法
document.createElement(nodename);
创建一个元素节点，只不过属于文档碎片(document fragment),没有成为DOM节点树的一部分，需要被添加进DOM树。
2.appendChild方法
parent.appendChild(child)
把新创建的节点插入某个文档的节点树，让它成为这个文档某个现有节点的子节点。
3.createTextNode方法
document.createNode(text)
创建一个文本节点，注意它与createElement的差别。
现在innerHTML方法就能用上述几个DOM方实现了。
4.insertBefore()方法
parentElement.insertBefore(newElement,targetElement)
把一个新元素插入到一个现有元素的前面，必须告诉它父元素(parentElement)、新元素(newElement)、目标元素(targetElement)。
5.insertAfter()函数(DOM中没有此方法)
function insertAfter(newElement,targetElement){
var parent=targetElement.parentNode;
if(parent.lastChild==targetElement){
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
parentNode属性：父节点；nextSibling属性：下一个兄弟元素节点；
这个函数十分简单，却效果很好。
Ajax
这是前端必须掌握的技能，现在页面已经离不开Ajax效果了，开发人员一般用jquery来处理这一行为，作者介绍了javasciprt方法
获取XMLHttpRequest对象，作者提供了兼容的方法，记下就好
function getHTTPObject(){
if(typeof XMLHttpRequest == "undefined")
XMLHttpRequest = function(){
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();
}
作者提供了一个例子：
function getNewContent(){
var request = getHTTPObject();
if(request){
request.open("GET","example.txt",true);
request.onreadystatechange = function(){
if(request.readyState==4){
var para = document.createElement("p");
var txt = document.createTextNode(request.responseText);
para.appendChild(txt);
document.getElementById(‘new‘).appendChild(para);
}
};
request.send(null);
} else{
alert(‘Sorry,your browser doesn\‘t support XMLHttpRequest‘);
}
}
addLoadEvent(getNewContent);
当页面加载完成，以上代码发起一个GET请求，加载exemple.txt文件
request.open()
代码中的onreadystatechange是一个时间处理函数，它会在服务器给XMLHttpRequest对象送回响应时被触发执行
request.onreadystatechange = dosomething
然后就可以发送请求
reequest.send(null)
浏览器会在不同阶段更新readyState属性 0 代表未初始化 1 代表正在加载 2代表加载完毕 3代表正在交互 4表示完成。
在这个例子中readyState=4时，就会从requst里获取requestText内容
这一篇就到这里，Ajax内容在最后一章会有一个更详细的例子