AJAX学习笔记.docx
《AJAX学习笔记.docx》由会员分享，可在线阅读，更多相关《AJAX学习笔记.docx（20页珍藏版）》请在冰点文库上搜索。
AJAX学习笔记
创建XMLHttpRequest对象：
VarxmlHttp;
//创建XMLHttpRequest对象
FunctioncreateXMLHttpRequest（）{
//下面根据浏览器是否支持ActiveXObject而采用不同的方式创建XMLHttpRequest对象
If（window.ActiveXObject）
{
xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;
}elseif（window.XMLHttpRequest）
{
xmlHttp=newXMLHttpRequest（）;
}
}
//启动与服务器的异步通信
Functionbegin（）
{
//调用createXMLHttpRequest（）创建XMLHttpRequest对象
createXMLHttpRequest（）;
//将状态触发器绑定得到一个函数上面
xmlHttp.onreadystatechange=processor;//这是一个函数名，当xmlHttp对象的状态发生
//改变时，就会自动的调用这个函数
//使用GET方式建立对服务器资源的一个异步调用
xmlHttp.open（"GET","test.xml"）;//第一个参数是打开与服务器连接的方式，第二个参数
//是请求服务器的url地址
//向服务器发送请求
xmlHttp.send（null）;//参数就是向服务器发送的数据，在使用GET方式的时候一般都为
//null,因为GET方式的数据都是包含在url地址中，而采用POST方
//式请求的时候这个值就需要设置，这也是GET方式和POST的区
//别之一
}
//定义一个状态处理函数用于处理状态触发器的状态改变
Functionprocessor（）
{
If（xmlHttp.readyState==4）//如果服务器处理请求成功，会返回一个状态值，为4
{
If（xmlHttp.status==200）//如果服务器返回状态为成功，也会返回一个状态码，200
//为成功
{
Alert（"从服务器返回的内容为：
"+xmlHttp.responseText）;
}
}
}
XMLHttpRequest对象的方法：
1.Abort（）;停止当前请求
2.getAllResponseHeaders（）返回HTTP请求的所有响应头部的键/值字符串
3.getResponseHeader（"header"）返回指定头部属性的字符串值
4.Open（method,url）建立对服务器的调用。
Method参数可以提供GET、POST或者PUT，URL参数可以是相对URL或者绝对URL
5.Send（content）向服务器发送请求，content参数为请求的数据
6.setRequestHeader（"header","value"）为指定头部属性设置指定值
XMLHttpRequest对象的属性：
7.Onreadystatechange:
状态改变的事件触发器，通常绑定一个JS函数，每当状态发生变化时，就调用该函数
8.readyState:
请求的状态，有5个值，这里的每个状态，代表XMLHttpRequest对象与服务器交互的每个状态：
0代表未初始化，1代表读取中，2已读取，3交互中，4完成；
9.responseText：
从服务器返回的文本形式的响应内容
10.responseXML:
从服务器放回到的兼容DOM的XML文档对象
11.status:
从服务器返回的状态码：
即请求服务器的结果：
404代表文件找不到，200代表请求成功
12.statusText:
从服务器返回的状态文本信息，例如：
OK或NotFound等
操作HTML文档的常用DOM方法：
13.getElementById（sIDValue）返回文档中具体指定id属性的元素
14.getElementByTagName（sTagName）返回当前元素中有指定标记名的子元素的数组
15.appendChild（childNode）在当前节点的childNodes[]数组中增加一个节点childNode
16.cloneNode（false|true）false表示仅复制当前节点；true表示复制当前节点，以及它的所有子孙节点
17.hasChildNodes（）判断当前节点是否拥有一个子节点，有则返回true
18.insetBefore（newNode,targetNode）将节点newNode作为当前元素的子节点插到targetNode元素前面
19.removeChild（childNode）从文档树中删除子节点childNode
20.replaceChild（newNode,oldNode）将节点oldNode替换为节点newNode
21.getAttribute（sAttrName）返回指定属性的字符串值
22.setAttribute（sAttrName,vAttrName）把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性
23.removeAttribute（ssAttribute）从元素中删除属性sAttrName
操作HTML文档的常用DOM属性：
24.Attributes:
如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性
25.childNodes：
以Node[]的形式存放当前节点的子节点，如果没有子节点，则返回空数组
26.firstChild：
以Node的形式返回当前节点的第一个子节点，如果没有子节点，则为null
27.lastChild：
以Node的形式返回当前节点的最后一个子节点，如果没有子节点，则为null
28.nextSibling：
以Node的形式返回当前节点的兄弟下一个节点。
如果没有这样的节点，则返回null
29.nodeName：
节点的名字，Element节点则代表Element的标记名称
30.nodeType：
代表节点的类型
31.parentNode：
以Node的形式返回当前节点的父节点，如果没有父节点，则为null
32.previousSibling:
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。
如果没有这样的节点，则返回null
操作XML文档的4个步骤：
1 载入整个XML文档
2 从XML文档中提取数据信息
3 对提取的信息进行加工处理
4 创建包含处理结果的HTML页面展示给用户
操作XML文档的常用DOM方法：
a.getElementById（sIdValue）返回文档中具有指定id属性的元素
b.getElementByTagName（sTagName）返回当前元素中有指定标记名的子元素数组
c.hasChildNodes（）判断当前节点是否拥有子节点，有则返回true
d.getAttribute（sAttrName）返回指定属性的字符串值
操作XML文档的常用DOM属性：
e.childNodes:
以Node[]的形式存放当前节点的子节点，如果没有，则返回空
f.firstNode：
以Node的形式返回当前节点的第一个子节点，如果没有则返回空
g.lastNode：
以Node的形式返回当前节点的最后一个节点，如果没有则返回空
h.nextSibling：
以Node的形式返回当前节点的兄弟下一个节点，如果没有则返回空
i.nodeName：
节点的名字，Element节点则代表Element的标记名称
j.nodeType：
代表节点的类型
k.parentNode：
以Node的形式返回当前节点的父节点，如果没有则返回空
l.previoueSibling：
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。
如果没有则返回空
Document对象的方法和属性：
m.document.all.nodeName
n.document.all.selectedName.options
o.document.all.selectedName.removeChild（document.all.selectedName.childNodes[0]）
p.document.createElement（"OPTION"）
q.node.nodeValue
r.document.all.selectedName.options.add（option）
得到窗口的位置：
VarleftPos=（typeofwindow.screenLeft=="number"）?
window.screenLeft:
window.screenX;
VarrightPos=（typeofwindow.screenRight=="number"）?
window.screenRight:
window.screenY;
窗口的大小：
VarpageWidth=window.innerWidth;
VarpageHeight=window.innerHeight;
If（typeofpageWidth=="number"）
{
If（patMode=="CSS1Compat"）//判断页面是否处于标准模式
{
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}
导航和打开窗口：
使用window.open（）方法既可以导航到一个特定的URL，也可以打开一个新的浏览器窗口。
这个方法有4个参数：
1要加载的URL、2窗口目标、3一个特定字符串、4一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。
Window的超时调用函数和间歇调用函数:
VartimeId=setTimeout（arg1,arg2）;//设置超时调用函数
clearTimeout（timeId）;//取消
setInterval（arg1,arg2）;//设置间歇函数
系统对话框：
Alert（arg1）;//警告对话框
Confirm（arg1）;//确认对话框
Prompt（arg1,arg2）;//提示对话框
Location对象：
它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。
他既是window对象的属性，也是document对象的属性；换句话说，window.location和document.location引用的是同一个对象。
下面列出了location对象的所有属性（注：
省略了每个属性前面的location前缀）：
属性名
例子
说明
hash
"#contents"
返回URL中的hash（#号后跟零或多个字符），如果URL中不包含散列，则返回空字符串
host
":
80"
返回服务器名称和端口号（如果有）
hostname
""
返回不带端口号的服务器名称
href
""
返回当前加载页面的完整URL。
而location对象的toString（）方法也返回这个值
pathname
"/wileyCDA/"
返回URL中的目录和（或）文件名
port
"8080"
返回URL中指定的端口号。
如果URL中不包含端口号，则这个属性返回空字符串
protocol
"http:
"
返回页面使用的协议。
通常是http:
或https:
search
"?
q=javascript"
返回URL的查询字符串。
这个字符串以问号开头
获取URL当中的所有参数及值：
FunctiongetQueryStringArgs（）
{
Varqs=（location.search.length>0?
Location.search.substring
（1）:
""）;
Varargs={};
Varitems=qs.length?
Qs.split（"&"）:
[];
Varitem=null,item=null;
Varname=null,value=null;
Vari=0,len=items.length;
For（i=0;i{
Item=items[i].spilt（"="）;
Name=decodeURIComponent（item[0]）;
Value=decodeURIComponent（item[1]）;
If（name.length）
Args[name]=value;
}
Returnargs;
}
位置操作：
使用location.assign（url）方法可以打开一个新的URL并在浏览器的历史记录中生成一条记录。
Location.href和window.href设置一个URL值，也会调用assign（）方法。
下面演示location对象的其他属性的改变对URL的改变：
//假设初始URL为
//将URL修改为
Location.hash="#section";
//将URL修改为
Location.search="?
q=javascript";
//将URL修改为
Location.hostname="";
//将URL修改为
Location.pathname="mydir";
//将URL修改为:
8080/mydir/
Location.port=“8080”；
每次修改location的属性（hash除外）,页面都会以新的URL重新加载
Replace（）方法可以禁止用户通过点击“后退”回到上一个页面的操作。
使用replace（）定位的新网页不会生成一条新的历史记录。
所以无法“后退”到上一个页面，这个方法有一个参数，表示跳转的URL路劲
Navigator对象的属性如下表：
属性或方法
说明
appCodeName
浏览器的名称。
通常都是Mozilla，即使在费Mozilla浏览器中也是如此
appMinorVersion
次版本信息
appName
完整的浏览器名称
appVersion
浏览器的版本。
一般不与实际的浏览器版本对应
buildID
浏览器编译版本
cookieEnabled
表示cookie是否启用
cpuClass
客户端计算机中使用的CPU类型
javaEnabled（）
表示当前浏览器中是否启动了JAVA
language
浏览器的主语言
mimeTypes
在浏览器中注册的MIME类型数组
onLine
表示浏览器是否连接到了因特网
opsProfile
似乎早就不用了，已作废
oscpu
客户端计算机的操作系统或使用的CPU
Platform
浏览器所在的系统平台
plugins
浏览器中安装的插件信息的数组
Preference（）
设置用户的首选项
product
产品名称
productSub
关于产品的次要信息
Register-ContentHandler（）
针对特定的MIME类型将一个站点注册为处理程序
Register-ProtocolHandler（）
针对特定的协议将一个站点注册为处理程序
securityPolicy
已经作废
systemLanguage
操作系统的语言
taintEnabled（）
已作废
userAgent
浏览器的用户代理字符串
userLanguage
操作系统的默认语言
userProfile
借以访问用户个人信息的对象
vendor
浏览器的品牌
vendorSub
有关供应商的次要信息
History对象：
history对象保存这用户上网的历史记录，从窗口被打开的那一刻起，因为history是window对象的属性，因此每个浏览器窗口、每一个标签页乃至每个框架，都有自己的history对象与特定的window对象关联。
出于安全方面的考虑，开发人员无法得知用户浏览过的URL。
不过，借由用户访问过的页面列表，同样可以在不知道实际URL的情况下是后退和前进。
使用go（）方法可以在用户的历史记录中任意跳转，可以向后也可以向前。
这个方法接受一个参数，表示向后或向前跳转的页面数的一个整数值。
负数表示向后跳转，整数表示向前跳转。
看下面的例子：
//后退一页
History.go（-1）;
//前进一页
History.go
（1）;
//前进两页
History.go
（2）;
也可以给go（）方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置------可能后退，也可能前进，具体要看哪个位置最近。
如果历史记录中不包含该字符串，那么这个方法什么也不做，例如：
//跳转到最近的页面
History.go（""）;
//跳转到最近的页面
History.go（""）;
另外，还可以使用两个简写方法back（）和forward（）来代替go（）.顾名思义，这两个方法可以模仿浏览器的“后退”和“前进”按钮。
除了以上的几个方法外，history对象还有一个length属性，保存着历史记录的数量。
这个数量包括所有历史记录，即所有向后和向前的记录。
对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0.通过像下面这样测试该属性的值，可以确定用户是否一开始就打开了你的页面。
If（history.length==0）
{
//这应该是用户打开窗开后的第一个页面
}
虽然history对象并不常用，但在创建自定义的“后退”和“前进”按钮，以及检测当前页面是不是用户历史记录的第一个页面时，还是必须使用它。
客户端能力检测代码：
FunctiongetElement（id）
{
If（document.getElementById（id））
Returndocument.getElementById（id）;
Elseif（document.all）
Returndocument.all[id];
Else
{
ThrownewError（"nowaytoretrieveelement"）;
}
}
DOM的节点结构图如下：
Node类型：
每个节点都有一个nodeType属性，用于表明节点的类型。
节点类型由在Node类型中定义的下列12个数值常量来表示，任何节点类型必居其一：
Node.ELEMENT_NODE
（1）Node.ATTRIBUTE_NODE
（2）
Node.TEXT_NODE（3）Node.CDATA_SECTION_NODE（4）
Node.ENTITY_REFERENCE_NODE（5）Node.ENTITY_NODE（6）
Node.PROCESSING_INSTRUCTION_NODE（7）Node.COMMENT_NODE（8）
Node.DOCUMENT_NODE（9）Node.DOCUMENT_TYPE_NODE（10）
Node.DOCUMENT_PRAGMENT_NODE（11）Node.NOTATION_NODE（12）
通过比较上面这些常量，可以很容易地确定节点的类型，例如：
If（someNode.nodeType==Node.ELEMENT_NODE）//在IE中无效
{
Alert（"Nodeisanelement"）;
}
为了确保跨浏览器兼容，最好还是将nodeType属性与数字值进行比较，如上面的Node.ELEMENT_NODE换成它对应的数字值1再进行比较。
nodeName和nodeValue属性：
If（someNode.nodeType==1）
{
Value=nodeName;//nodeName的值是元素的标签名
}
对于元素节点，nodeName中保存的始终都是元素的标签名，而nodeValue的值则始终为null
节点关系：
每个节点都有一个childNodes属性，其中保存着一个NodeList对象。
下面的例子展示如何访问保存在NodeList中的节点----可以通过方括号，也可以使用item（）方法访问。
VarfirstNode=someNode.childNodes[0];
VarsecondNode=someNode.childNodes.item
（1）;
Varlength=someNode.childNodes.length;
将NodeList对象转换成数组对象：
FunctionconvertToArray（nodes）
{
Vararray=null;
Try{
array=Array.prototype.slice.call（nodes,0）;
}catch{
array=newArray（）;
For（vari=0;i{
array.push（nodes[i]）;
}
}
Returnarray;
}
每个节点都有一个parentNode属性，该属性指向文档树中的父节点。
包含在childNodes列表中的所有节点都具有相同的父节点，因此他们的parentNode属性都指向同一个节点。
此外，包含在childNodes列表中的每个节点相互之间都是同胞节点。
通过使用列表中每个节点的previousSibling和nextSibling属性，可以访问同一列表中的其他节点。
列表中第一个节点的previousSibling属性值为Null,而列表中最后一个节点的nextSibling属性的值同样也为null；
父节点与其第一个和最后一个子节点之间也存在特殊关系。
父节点的firstChild和lastChild属性分别指向其childNodes列表中的第一个和最后一个节点。
另外，hasChildNodes（）方法也是一个非常有用的方法，这个方法在节点包含一个或多个子节点的情况下返回true；所有节点都有一个属性是ownerD
升级会员 