分类目录归档:Javascript

XMLHttpRequest对象介绍

熟悉XMLHttpRequest对象是学习Ajax技术的第一步。XMLHttpRequest属于Javascript对象。

XMLHttpRequest对象的基本属性和方法:

open():建立到服务器的新请求。

send():向服务器发送请求。

abort():退出当前请求。

readyState:提供当前HTML的就绪状态。

responseText:服务器返回的请求相应文本。

XMLHttpRequest的属性和方法都和请求/响应模型有关。

XMLHttpRequest得到了现代浏览器的较好支持,但在IE5和IE6中必须使用特定于IE的ActiveXObject()构造函数。

 

 

XMLHttpRequest对象的创建

<script language=”javascript” type=”text/javascript”>

var request;

function createRequest(){

try{

request=new XMLHttpRequest();

}catch(trymicrosoft){

try{

request=new ActiveXObject(“Msxml2.XMLHTTP”);

}catch(othermicrosoft){

try{

request=new ActiveXObject(“Microsoft.XMLHTTP”);

}catch(failed){

request=false;

}

}

}

if(!request)

alert(“Error initializing XMLHttpRequest!”);

}

</script>

这个创建XMLHttpRequest对象的方法适用于大多数浏览器。

编写自己的Javascript库

通过编写自己的Javascript库来提高自己的Javascript水平.

今天先实现两个方法,以后边学习边编写.

(function (){
window[‘SoftLin’]={}
//等同于document.getElementById()
//实现了多叁数
function $(){
var elements=new Array();
for(var i=0;i<arguments.length;i++){
var element=arguments[i];

if(typeof element==’string’){
element=document.getElementById(element);
}
if(arguments.length==1){
return element;
}
elements.push(element);
}
return elements;
}
window[‘SoftLin’][‘$’]=$;
//获许指定标签下Class名
function getElementsByClassName(className,tag){
var allTags=document.getElementsByTagName(tag);
var matchingElements=new Array();

className=className.replace(/-/g,”\-“);
var regex=new RegExp(“(^|\s)”+className+”(\s|$)”);

var element;
for(var i=0;i<allTags.length;i++){
element=allTags[i];
if(regex.test(element.className)){
matchingElements.push(element);
}
}
return matchingElements;

}
window[‘SoftLin’][‘getElementsByClassName’]=getElementsByClassName;
//向DOM节点添加事件
function addEvent(node,type,listener){
if(!(node=$(node)))
return false;
if(node.addEventListener){
node.addEventListener(type,listener,false);
return true;
}else if(node.attachEvent){
node[‘e’+type+listener]=listener;
node[type+listener]=function(){node[‘e’+type+listener](window.event);}
node.attachEvent(‘on’+type,node[type+listener]);
return true;
}
return false;
};
window[‘SoftLin’][‘addEvent’]=addEvent;
//向DOM节点后面添加节点
function insertAfter(){
}
//删除多个子节点
function removerChiildren(){
}

//将方法绑定到指定对象上
function bindFunction(obj,func){
return function(){
func.apply(obj,arguments);
}
}
window[‘SoftLin’][‘bindFunction’]=bindFunction;

//获取浏览器大小
function getBrowserWindowSize(){
var de=document.documentElement;
return{
‘width’:(
window.innerWidth || (de && de.clientWidth) || document.body.clientWidth),
‘height’:(
window.innerHeight || (de && de.clientHeight) || document.body.clientHeight)
}
};
window[‘SoftLin’][‘getBrowserWindowSize’]=getBrowserWindowSize;
//nodeType常量 字面量方法定义
window[‘SoftLin’][‘node’]={
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATE_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12
}
//遍历节点
function walkElementsLisner(func,node){
var root=node||window.document;
var nodes=root.getElementsByTagName(‘*’);
for(var i=0;i<nodes.length;i++){
func.call(nodes[i]);
}
};
window[‘SoftLin’][‘walkElementsLisner’]=walkElementsLisner;

//返回节点的深度
function walkTheDOMRecursive(func,node,depth,returnFromParent){
var root=node||window.document;
var returnFromParent=func.call(node,depth++,returnFromParent);
var node=root.firstChild;
while(node){
walkTheDOMRecursive(func,node,depth,returnFromParent);
node=node.nextSibling;
}
};
window[‘SoftLin’][‘walkTheDOMRecursive’]=walkTheDOMRecursive;
//遍历节点的属性
function walkTheDOMWithAttirubutes(node,func,depth,returnFromParent){
var root=node||window.document;
returnFromParent=func.call(root,depth++,returnFromParent);
if(root.attributes){
for(var i=0;i<root.attributes.length;i++){
walkTheDOMWithAttirubutes(root.attributes[i],func,depth-1,returnFromParent);

}
}
if(root.nodeType!=SoftLin.node.ATTRIBUTE_NODE){
node=root.firstChild;
while(node){
walkTheDOMWithAttirubutes(node,func,depth,returnFromParent);
node=node.nextSibling;
}
}
}
window[‘SoftLin’][‘walkTheDOMWithAttirubutes’]=walkTheDOMWithAttirubutes;

})();