JavaScript高级程序设计 XML、Ajax 学习笔记


Posted in Javascript onSeptember 10, 2011

第十五章 JavaScript与XML

1.浏览器对XML DOM的支持

1.1 DOM2级核心

①在DOM2级在document.implementation中引入了createDocument()方法(IE6~8不支持)。

可以创建一个空白XML。

var xmldom = document.implemention.createDocument(namespaceUri,root,docype);

②要创建一个新的文档元素为<root>的XML文档,可用如下代码:

var xmldom = document.implementation.createDocument("","root",null);

aert(xmldom.documentElement.tagName);  //"root"

var child = xmldom.createElement("child");

xmldom.documentElement.appendChild(child);

③检测浏览器是否支持DOM2级XML:

var hasXmlDom = document.implementation.hasFeature("XML","2.0");

1.2 DOMParse类型

①Firefox、Opera、Chrome、Safari支持(IE8不支持),DOMParse类型可将XML解析为DOM文档。

②创建一个DOMParse实例,再调用parseFromString()方法。这个方法接受两个参数:要解析的XML字符串和内容类型(内容类型始终为"text/xml")。返回值是一个Document实例。

var parser = new DOMParse();

var xmldom = parser.parseFromString("<root><child/></root>","text/xml");

alert(xmldom.documentElement.tagName);  //"root"

alert(xmldom.documentElement.firstChild.tagName);  //"child"

var anotherChild = xmldom.createElement("child");

xmldom.documentElement.appendChild(anthorChild);

var children = xmldom.getElementsByTagName("child");

alert(children.length);  //2

③发生解析错误时,仍然会从parseFromString()中返回一个Document对象。但这个对象的文档元素是<parsererror>(Firefox、Opera);对象根元素第一个子元素为<parsererro>(Safari、Chrome)。

<parseerror>元素的内容是对解析错误地描述。通过getElementsByTagName()查找<parsererror>确定是否有解析错误。

var parse = new DOMParse();

var xmldom = parser.parseFromString("<root>","text/xml");

var errors = xmldom.getElementsByTagName("parsererror");

if(errors.length > 0 ){

alert("Parsing error!");

}

1.3 XMLSerializer类型

①此类可将DOM文档序列化为XML字符串。(IE6~8不支持)。

②要序列化DOM文档,首相必须创建XMLSerializer实例,然后将文档传入其serializerToString()方法:

var serializer = new XMLSerializer();

var xml = serializer.serializeToString(xmldom);

alert(xml);

1.4 DOM3级加载和保存

①DOM3级“加载和保存”规范的目的在于将加载、解析和序列化XML文档的任务标准化,模块规定了两个解析方法:同步方法和异步方法。

②检测DOM3级加载和保存

var hasLSSync = document.implementation.hasFeature("LS","3.0");

var hasLSAsync = document.implementation.hasFeature("LS-Async","3.0");

③DOM3级“加载和保存”还为document.implementation对象添加了下列新属性和新方法:

□MODE_SYNCHRONOUS:为同步解析方式定义的常量;

□MODE_ASYNCHRONOUS:为异步解析方式定义的常量;

□createLSParse(mode,schemaType):创建一个在指定方式(mode)下运行且符合指定模式(schema)类型的解析器。

□createLSSerializer():创建一个新XML序列化器。

□createLSInput():创建一个新的输入对象,用于解析/序列化操作。

□createLSOutput():创建一个新的输出对象,用于解析/序列化操作。

1.4.1 解析XML

(1)同步解析器

①需要先创建同步解析器。如果解析器并不想基于哪个模式进行验证,为createLSParser()的第二个参数传入null。如果需要基于XML模式进行验证,则应为第二个参数传入"http://www.w3.org/2001/XMLSchema",如果要基于XML DTD进行验证,则应该为第二个参数传入"http://www.w3.org/TR/REC-xml"。

②解析之前还要创建一个新的LSInput对象。为此,要使用createLSInput()方法;创建LSInput对象后,还需要将XML字符串赋值给该对象的stringData属性。

③解析完成后,就会返回一个XML DOM文档对象

④如果在同步解析方式下发生解析错误,则会抛出错误。

⑤示例:

var implementation = document.implementation;

var parser = implementation.createLSParser(implementation.MODE_SYNCHRONOUS,null);

var input = implement.createLSInput();

input.stirngData = "<root>";

try{

xmldom = parser.parse(input);

}catch(ex){

alert("Parsing error!");

}

(2)异步解析器

①需要在createLSParser()的第一个参数的位置上传入常量MODE_ASYNCHRONOUS。

②通过addEventListener()来预订load事件,以便知道文档何时解析完毕。

③如果异步解析期间发生错误,则不会触发load事件。要捕获这个错误,需要使用LSParser对象上一个名叫domConfig的特殊接口定义一个错误处理程序。(BUG:Opera9.5不会触发load)

④domConfig为DOMConfiguration类型的实例,表示针对特定文档的解析和格式化规则。LSParser会用此对象指定额外配置信息,需调用setParameter()方法。其中一个参数是"error_handler",用于指定处理解析错误的函数。

var implementation = document.implementation;

var parser = implementation.createLSParser(implementation.MODE_ASYNCHROUNS,null);

var input = implementation.createLSInput();

input.stringData = "<root>";

//预订load事件,但不会触发load事件

parser.addEventListener("load",function(event){

var xmldom = event.newDocument;

var input = event.input;

alert(xmldom.documentElement.tagName); //"root"

alert(xmldom.documentElement.firstChild.tagName);  //"child"

var anotherChild = xmldom.createElement("child");

xmldom.documentElement.appendChild(anotherChild);

var children = xmldom.getElementsByTagName("child");

alert(children.length);  //2

},false);

parser.domConfig.setParameter("error_handler",fucntion(ex){

alert("Parsing error!");

});

//开始解析

parser.parse(input);

1.4.2 其它解析方式

通过LSParser还可以执行两种类型的解析:解析来自URI的文件和基于上下文解析。

(1)解析来自URI的XML。

①不用创建LSInput。

②开始解析时调用parseURI()方法,并为其传入一个指向有效XML的URI。Parser.parseURI("example.xml");

(2)基于上下文解析

①首先解析字符串,然后将解析结果插入另一个文档。

②使用parseWithContext()方法接受3个参数:LSInput对象、上下文节点和要执行的操作。

□LSInput对象的stringData属性中必须包含XML片段的代码,不能含有XML序言内容(prolog)。

□上下文节点是解析完的片段该插入的地方。

□要执行的操作必须是下列LSParser常量之一。

◇ACTION_APPEND_AS_CHILDERN:将解析结果作为子节点添加到上下文节点中。

◇ACTION_REPLACE_CHILDREN:先移除上下文节点的所有节点,然后将解析结果作为上下文节点的子节点插入。

◇ACTION_INSERT_BEFORE:将解析结果作为上下文节点的同辈节点,插入到上下文节点前面。

◇ACTION_INSERT_AFTER:将解析结果作为上下文节点的同辈节点,插入到上下文节点后面。

◇ACTION_REPLACE:用解析结果替换上下文节点。

◇在解析错误时,以上操作均会被取消。

var implementation = document.implement;

var parser = implementation.createLSPareser(implementation.MODE.SYNCHRONOUS,null);

var input = implementation.createLSInput();

input.stringData = "<root/>";

var xmldom = parser.parse(input);

var newInput = implementation.createLSInput();

newInput.StringData = "<child/>";

parse.parseWithContext(newInput,xmldom.documentElement,parser.ACTION_APPEND_AS_CHILDREN);

alert(xmldom.documentElement.firstChild.tagName);  //"child"

1.4.3 序列化XML

①要调用document.implementation上的createLSSerialization()方法,创建一个LSSerializer对象。LSSerializer对象的主要方法是writeToString(),接受一个节点类型参数并返回该节点的XML代码字符串表述。

②通过LSSerializer对象的domCOnfig属性来设置适合打印输出的XML字符串格式,即将该属性的"format_pretty_print"参数设为true。

③序列化期间发生错误,错误会被抛出。通过将writeToStirng()放try-catch语句中,可以测试是否发生了错误。

var serializer = implementation.createLSSerializer();

serializer.domConfig.setParameter("format_pretty_print",true);

var xml = "";

try{

Xml = serializer.writeToString(xmldom);

}catch(ex){

Alert("Serialization error occurred");

}

alert(xml);

1.5 IE对XML的支持

①IE有6种不同的XML文档版本可供选择,只建议其中3种:

□MSXML2.DOMDocument:为方便脚本处理而更新的版本,建议仅在特殊情况下作后备版本使用。

□MSXML2.DOMDocument.3.0:为了在JavaScript中使用,这是最低的建议版本。

□MSXML2.DOMDocument.6.0:通过脚本能够可靠地处理的最新版本。

□确定可用版本:

function createDocument(){

if(typeof arguments.callee.activeXString ! = "string"){

var versions = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument"];

for(var i = 0, len = versions.length; i < len; i++){

try{

var xmldom = new ActiveXObject(versions[i]);

arguments.callee.activeXString = versions[i];

return xmldom;

}catch(ex){

//跳过

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}

②要解析XML字符串,先创建XML DOM文档,然后调用其loadXML()方法。

var xmldom = createDocument();

xmldom.loadXML("<root><child/></root>");

□在新DOM文档中填充了XML内容后,就可以像操作其他DOM文档一样操作它了(可以使用任何方法和属性)

③如果解析过程中出错,可以在parseError属性对象中找到错误。包含多个保存错误信息的属性。

□errorCode:错误类型的数值编码;没有发生错误时值为0

□filePos:文件中导致错误发生的位置。

□line:发生错误的行。

□linepos:发生错误的行中的字符。

□reason:对象错误地文本解析。

□srcText:导致错误的代码。

□url:导致错误的文件的URL。

□parseError的valueof()方法返回errorCode的值。

if(xmldom.parseError != 0){

alert("An error occurred: \n Error Code:"+xmldom.parseError.errorCoed + "\n" 

+ "line:" + xmldom.parseError.line + "\n"

+ "line.Pos" + xmldom.parseError.linepos + "\n"

+ "Reson:" + xmldom.parseError.reason

);

}

1.5.1序列化XML

IE序列化XML的能力内置在了XML DOM文档中。每个XML DOM节点都有一个xml属性,其中保存着表示该节点的XML字符串。alert(xmldom.xml)

1.5.2 加载XML文件

①与DOM3级功能类似,要加载的XML文档必须与JS代码来自同一服务器。

②加载文档的方式也可以分为同步和异步两种。要指定加载文档的方式,可以设置async属性,true表示异步(默认),false表示同步。使用load(URI)方式加载。

③异步加载XML,需为XML DOM文档的onreadystatechange事件指定处理程序。有4个就绪状态(ready state)

□1:DOM正在加载数据。

□2:DOM已经加载完数据。

□3:DOM已经可以使用,但某些部分可能还无法访问。

□4:DOM已经完全可以使用。

□实际上,只需要关注状态4。通过XML文档的readyState属性可得其就绪状态。

var xmldom = createDocument();

xmldom.async = true;

xmldom.onreadystatechange = function(){

if(xmldom.readyState == 4){

if(xmldom.parseError != 0){

Alert("An error occurred");

}else{

//其他xmldom操作

}

}

}

xmldom.load("exmaple.xml");

注:

□onreadystatechange事件指定处理语句须在调用load()方法之前。

□在事件处理内部由于ActiveX控件为预防错误,不允许使用this。

1.6 跨浏览器处理XML

function parseXML(xml){

var xmldom = null;

if(typeof DOMParser != "undefined"){

xmldom = (new DOMParser()).parseFromString(xml,"text/xml");

var errors = xmldom.getElementsByTagName("parsererror");

if(errors.length){

throw new Error("XML parsing error:" + errors[0].textContent);

}

}else if(document.implementation.hasFeature("LS","3.0")){

var implementation = document.implementation;

var parser = implementation.createLSParser(implementation.MODE_SYNCHRONOUNS,null);

var input = implementation.createLSInput();

input.stringData = xml;

xmldom = parser.parse(input);

}else if(typeof ActiveXObject != "undefined"){

xmldom = createDocument();

xmldom.loadXML(xml);

if(xmldom.parseError != 0){

throw new Error("XML parsing error:" + xmldom.parseError.reason);

}

}else{

throw new Error("No XML parser available.");

}

return xmldom;

}

用此函数解析XML字符串时,应该放在try-catch语句中

var xmldom = null;

try{

xmldom = parseXml("<root><child/><root>");

}

catch(ex){

alert(ex.message);

}

■序列化XML兼容代码

function serializeXml(xmldom){

if(typeof XMLSerializer != "undefined"){

return(new XMLSerializer()).serializeToString(xmldom);

}else if(document.implementation.hasFeature("LS","3.0")){

var implementation = document.implementation;

var serializer = implemetation.createLSSerializer();

return serializer.writeToString(xmldom);

}else if(typeof xmldom.xml != "undefined"){

return xmldom.xml;

}else{

throw new Error("Could not serialize XMLDOM.");

}

}

2.浏览器对XPath的支持

2.1 DOM3级Xpath

①DOM3级支持XPath,检测浏览器支持:

Var supportsXPath = document.implementation.hasFeature("XPath","3.0");

②DOM3级XPath中最重要的两个类型:XPathEvaluator和XPathResult。

③XPathEvalutor用于特定的上下文中队XPath表达式求值。有3个方法:

□createExpression(expression,nsresolver):将XPath表达式及相应的命名空间信息转换成一个XPathExpression,这是查询的编译版。在多次使用一个查询时很有用。

□createNSResolver(node):根据node的命名空间信息创建一个新的XPathNSResolver对象。在基于使用命名空间的XML文档求值时,需要使用XPathNSResolver对象。

□evaluate(expression,context,nsresolver,type,result):在给定的上下文中,基于特定的命名空间信息来对XPath表达式求值。剩下的参数表示如何返回结果。

□在支持DOM3级的浏览器中,Document类型通常都是与XPathEvaluator接口一起实现的。

④上面3个方法中,evalute最常用。接受5个参数:

□XPath表达式

□上下文节点

□命名空间解析器(只在XML代码中使用了XML命名空间时有必要指定,否则为null)

□返回结果的类型(见书P415)

□保存结果的XPathResult对象(通常是null,因为结果也会以函数值形式返回)

■返回结果类型为以下的其中一个:

◇XPathResult.ANY_TYPE

◇XPathResult.NUMBER_TYPE

◇XPathResult.STRING_TYPE

◇XPathResult.BOULEAN_TYPE

◇XPathResult.UNORDER_NODE_ITERATOR_TYPE

◇XPathResult.ORDERED_NODE_SNAPSHOT_TYPE

◇XPathResult.ANY_UNORDERED_NODE_TYPE

◇XPathResult.FIRST_ORDERED_NODE_TYPE

1)指定的是迭代器结果,须用iterateNext()方法从节点中取得匹配节点,无则返回null。

var result = xmldom.evalute("employee/name",xmldom.document,null,XPathResult.ORDERED_NODE_ITERATOR_TYPE,null);

if(result !== null){

var node = result.iterateNext();

while(node){

alert(node.tagName);

node = node.iterateNext();

}

}

2)指定的是快照类型,就必须使用snapshotItem()和snapshotLength属性。

1.单节点结果

指定常量XPathResult.FIRST_ORDER_NODE.TYPE会返回第一个匹配节点,可通过singleNodeValue属性来访问该节点。

2.简单类型结果

booleanValue、numberValue和stringValue

3.默认类型结果

4.命名空间支持

□对于利用了命名空间的XML文档,XPathEvaluator必须知道命名信息,然后才能正确地进行求值。

□第一种方法是通过createNSResolver()来创建XPathNSResolver对象,这个方法接受一个参数,即文档中包含命名空间定义的节点。

Var nsresolver = xmldom.createNSResolver(xmldom.documentElement);

Var result = xmldom.evaluate("wrox:book/wrox:author",xmldom.document,nsresolver,XPathResult.ORDERED_NODESNAPSHOTTYPE,null);

Alert(result.snapshotlength);

□第二种方法是定义一个函数,让它接受一个命名空间前缀,返回关联的URI。

Var nsresolver = function(prefix){

Switch(prefix){

Case "wrox" : return "http://www.wrox.com/";

//其他前缀

}

};

Var result = xmldom.evaluate("count(wrox:book/wrox:author)",xmldom.document,nsresolver,XPathResult.NUMBER_TYPE,null);

2.2 IE中的XPath

①IE对XPath的支持是内置在XML DOM文档对象中的。含有两个方法。

□selectSingleNode()方法接受一个XPath模式,在找到匹配节点时返回第一个匹配的节点。

var element = xmldom.documentElement.selectSingleNode("employee/name");

□selectNodes(),接受一个XPath模式作参数,返回与模式匹配的所有节点的NodeList(如果没有匹配的节点,则返回一个包含零项的NoedList)。

Var elements = xmldom.documentElement.selectNodes("employee/name");

Alert(elements.length);

②IE对命名空间的支持

□必须知道自己使用的命名空间,并按格式创建一个字符串:

"xmlns:prefix1 = 'uri1' xmlns:prefixf2 = 'uri2' xmlns:prefix3:'uri3' "

□将上述格式字符串传入到XML DOM文档对象的特殊方法setProperty()中。

□setProperty()接受两个参数:要设置的属性名和属性值。这里属性名应为"SelectionNameSpaces",属性值是前面格式的字符串。

xmldom.setProperty("selectionNameSpaces","xmlns:wrox = http://www.wrox.com");

var result = xmldom.documentElement.selectNodes("wrox:book/wrox:author");

2.3 跨浏览器使用XPath

□selectSingleNode()函数兼容代码

function selectSingleNode(context,expression,namespace){

var doc = (context.nodeType != 9 ? context.ownerDocument : context);

if(typeof doc.evaluate != "undefined"){

var nsresolver = null;

if(namespace instanceof Object){

nsresolver = fucntion(prefix){

return namespaces[prefix];

};

}

var result = doc.evaluate(expression,context,nsresolver,XPathResult.FIRST_ORDERED_NODE_TYPE,null);

return(result !== null ? Result.singleNodeValue : null);

}else if(typeof context.selectSingleNode != "undefined"){

//创建命名空间字符串

if(namespaces instanceof Object){

var ns = "";

for(var prefix in namespaces){

if(namespaces.hasOwnproperty(prefix)){

ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' ";

}

}

doc.setProperty("SelectionNamespaces",ns);

}

return context.selectSingleNode(expression);

}else{

throw new Error("No Xpath engine found.");

}

}

□selectNodes()函数兼容代码

P420略

3.函数对XSLT的支持

XSLT是与XML相关的一种技术,它利用XPath将文档从一种表现形式转换成另一种表现形式。

3.1 IE中的XSLT转换

1.简单的XSLT转换

□最简单方法:XSLT、XML分别加载到一个DOM文档中,再使用transformNode()方法。

□transformNode()方法:只有一个参数——包含XSLT样式表的文档。返回一个包含转换信息的字符串。

□可在xmldom各个节点机型转换。

//加载xmldom各个节点进行转换

xmldom.load("employees.xml");

xsltdom.load("employees.xslt");

//转换

var result = xmldom.transformNode(xsltdom);

2.复杂的XSLT转换

①基本原理:

a.将xml加载到“线程安全的XML DOM”中。

b.将XSLT加载到“XSL模板”中

c.使用“XSL处理器”进行转换。

□自由线程DOM:MSXML2.FreeThreadedDOMDocument

□XSL模板:MSXML2.XSLTemplate

□XSL处理器:调用XSL模板的createProcessor()创建XSL处理器。

②把XSLT样式表加载到一个线程安全的XML文档中。

function createThreadSafeDocument(){

if(typeof arguments.callee.activeXString != "string"){

var versions = ["MSXML2.FreeThreadedDOMDocument.6.0","MSXML2.FreeThreadedDOMDocument.3.0","MSXML2.FreeThreadedDOMDocument\"];

for(var i=0,len = version.length; i<len; i++){

try{

var xmldom = new ActiveXObject(versions[i]);

arguments.callee.activeXString = versions[i];

return xmldom;

}catch(ex){

// 跳过

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}

□线程安全的XML DOM与常规XML DOM使用方式一致。

var xsltdom = createThreadSafeDocument();

xsltdom.async = fasle;

xsltdom.load("employee.xslt");

③为自由线程DOM指定XSL模板

fucntion createXSLTemplate(){

if(typeof arugments.callee.activeXString != "string"){

var versions = ["MSXML2.XSLTemplate.6.0","MSXML2.XSLTemplate.3.0","MSXML2.XSLTemplate"];

for(var i=0,len=versions.length;i<len;i++){

try{

var template = new ActiveXObject(versions[i]);

arguments.callee.activeXString = version[i];

return template;

}catch(ex){

//跳过

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}

□使用createXSLTemplate()函数创建用法:

var template = createXSLTemplate();

template.stylesheet = xsltdom;

var processor = template.createProcessor();

processor.input = xmldom;

processor.transform();

var result = processor.output;

④创建XSL处理器之后,须将要转换的节点指定给input属性。然后,调用transform()方法执行转换并将结果左字符串保存在output属性中。

⑤使用XSL处理器可以对转换进行更多的控制,同时也支持更高级的XSLT特性。

□addParameter():两个参数:要设置的参数名称(与在<xsl:param>的name特性中给指定的一样)和要指定的值(多数是字符串,也可以是数值或布尔值)。

□setStartMode():接受一个参数,即要为处理器设置的模式。

□reset():重置处理器,清除原先的输入和输出属性、启动模式及其它指定的参数。processor.reset();

3.2 XSLTProcessor类型(非IE浏览器支持)

①基本原理:

a.加载两个DOM文档,一个基于XML,另一个基于XSLT。

b.创建一个新XSLTProcessor对象

c.使用importStylesheet()方法指定一个XSLT

d.最后使用transformToDocument()或transfromToFragment()方法可得一个文档片段对象。

var processor = new XSLTProcessor();

processor.importStylesheet(xsltdom);

□transformToDocument():只要传入XML DOM,就可将结果作为一个完全不同的DOM文档使用。

□transformToFragement():两个参数:要转换的XML DOM和应该拥有结果片段的文档

var fragment = processor.transformToDocument(xmldom,document);

②使用参数:

□setParameter():3个参数:命名空间URI(一般为null)、参数内部名称和要设置的值

□getParameter():取得当前参数的值,两个参数:命名空间和参数内部名。

□removeParameter():移除当前参数的值,两个参数:命名空间和参数内部名。

③重置处理器

□reset()方法:从处理器中移除所有参数和样式表。

3.3 跨浏览器使用XSLT

IE对XSLT转换支持与XSLTProcessor区别太大,跨浏览器兼容性最好的XSLT转换技术,只能是返回结果字符串。

function transform(context,xslt){

if(typeof XSLTProcess != "undefined"){

var processor = new XSLTProcessor();

processor.importStylesheet(xslt);

var result = processor.transfromToDocument(context);

return(new XMLSerialize()).serializeToString(result);

}else if(typeof context.transforamNode != "undefined"){

return context.transformNode(xslt);

}else{

throw new Error("No XSLT processor available.");

}

}

第十六章 E4X (略)

第十七章 Ajax与JSON

1.XHR对象

①IE6需要使用MSXML库中的一个ActiveX对象实现,而其他浏览器原生支持XHR对象。

function createXHR(){

if(typeof XMLHttpRequest != "undefined"){

return new XMLHttpRequest();

}else if(typeof ActiveXobject != "undefined"){

if(typeof arguments.callee.activeXString != "string"){

var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];

for(var i=0, len = versions.length; I <len; i++){

try{

var xhr = new ActiveXObject(versions[i]);

Arguments.callee.activeXString = versions[i];

return xhr;

}catch(ex){

//跳过

}

}

}

return new ActiveXObject(arguments.callee.activeXString);

}else{

throw new Error("No XHR object available");

}

}

1.1 XHR的用法

①open()方法

□接受3个参数:要发送的请求的类型(“get”、“post”等)、请求的URL和表示是异步发送请求的布尔值。

□参数URL是相对于执行代码的当前页面(当然也可以使用绝对路径);

□调用open()方法并不会真正发送请求,而只是启动一个请求以备发送。

②send()方法

□要发送特定的请求,必须使用send()方法启动。

□接受一个参数,即要作为请求主体发送的数据。如果不需要通过请求主体发送数据,则必须传入null,因为这个参数对有些浏览器来说是必须的。

□调用send()之后,请求就会被分派到服务器。

③相应的数据会自动填充XHR对象的属性,相关的属性简介如下:

□responseText:作为相应主体被返回的文本。

□responseXML:如果响应的内容是“text/xml”或“application/xml”,这个属性中将保存含着响应数据的XML DOM文档。

□status:响应的HTTP状态。

□statusText:HTTP状态的说明。

④处理响应的判断

□检查status属性,以确定响应成功返回。

□HTTP状态代码为200是成功的标志,此时responseText、responseXML应能访问。

□HTTP状态代码为304表示请求的资源没修改,可使用缓存值。

⑤同步请求

xhr.open("get", "example.txt", false);

xhr.send(null);

if( (xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){

alert(xhr.statusText);

}else{

alert("Request was unsuccessful:" + xhr.status);

}

⑥异步请求

1)发送异步请求还需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。取值如下:

□0:未初始化。尚未调用open()方法。

□1:启动。已调用open()方法,未调用send()方法。

□2:发送。已调用send()方法,但尚未接收到响应。

□3:接收。已接收到部分响应数据。

□4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

2)readyState值的变化会触发readyStatechange事件。由于并非所有浏览器支持DOM2级方法,因此用DOM0级添加处理程序。

var xhr = createXHR();

xhr.onreadystatechange = function(){

if(xhr.readyState == 4){

if( (xhr.staus >= 200 && xhr.status < 300) || xhr.status == 304){

alert(xhr.responseText);

}else{

alert("Request was unsuccessful: " + xhr.status);

}

}

};

xhr.open("get","example.txt", true);

xhr.send(null);

⑦在接收到响应之前还可以调用abort()方法取消异步请求。xhr.abort();

1.2 HTTP头部信息

XHR对象提供了操作“请求头部”和“响应头部”信息的方法。

①请求头部

1)请求头部信息

□Accept:浏览器能够处理的内容类型。

□Accept-Charset:浏览器能够显示的字符集。

□Accept-Encoding:浏览器能够处理的压缩编码。

□connection:浏览器与服务器之间连接的类型。

□Cookie:当前页面设置的任何cookie。

□Host:发出请求的页面所在的域。

□Referer:发出请求的页面的URI。

□User-Agent:浏览器的用户代理字符串。

②setRequestHeader()方法可以设置自定义的请求头部信息。

□接收两个参数:头部字段名称和头部字段的值。

□要成功发送请求头部信息,必须在调用open()方法之后且调用send()方法之前。

③getResponseHeader()方法,传入头部字段名称,可以取得相应的响应头部信息。

④getAllResponseHeader()方法,取得一个包含所有头部信息的长字符串。

1.3 GET请求

①常用语服务器查询信息。

②GET请求经常会发生查询字符串格式问题。查询字符串中每个参数的名称和值都必须使用encodeURIComponent()进行编码。

③辅助向现有URL末尾添加查询字符串参数:

function addURLParam(url, name, value){

url += (url.indexOf("?") == -1 ? "?" : "&" );

url += encodeURIComponent(name) + "=" + encodeURIComponent(value);

return url;

}

1.4 POST请求

①通常用于向服务器发送应该被保存的数据。

②xhr.open("post","example.php",true);发送post请求的第二步就是向send方法中传入某些数据。

1.5浏览器差异

①IE

□IE为XHR对象添加了一个timeout属性,表示请求在等待响应。

□规定时间内没有接收到响应,就出发timeout事件,进而调用ontimeout事件处理程序。

②Firefox

1)load事件

2)progress事件

2.跨域请求

①IE中XDomainRequest对象

1)XDR与XHR区别

□cookie不会随请求发送,也不会随响应返回。

□只能设置请求头部信息中的Content-Type字段。

□不能访问响应头部信息。

□只支持GET和POST请求。

□XDR只能访问Access-Control-Allow-Origin头部设置为有当前域的资源。

2)所有XDR请求都是异步执行的,不能创建同步请求。

□返回请求之后,会触发load事件,响应的数据也会保存在response属性中。

□接收到响应后,只能访问响应的原始文本,没有办法确定响应的状态代码。

□响应有效会触发load事件,如果失败(包括响应中缺少Access-Control-Origin头部)就会触发error事件。

□XDR也支持timeout属性以及ontimeout事件处理程序。

□为了支持POST请求,XDR对象提供了ontentType属性,用来表示发送数据的格式。

□在请求返回前调用abort()方法可终止请求。

var xdr = new XDomainRequest();

xdr.onload = function(){

alert(xdr.responseText);

};

xdr.timeout = 1000;

xdr.ontimeout = function(){

alert("Request took too long.");

};

xdr.open("get","http://www.xx.com/page/");

xdr.send(null);

②Firefox

1)要求远程资源有权决定自身是否可以被远程浏览器访问。

□这需要通过设置Access-Contro-Allow-Origin头部实现。

□要访问另一个域资源,可以使用标准XHR对象,并为open()方法传入一个绝对URL。

2)与IE中XDR对象不同,跨域XHR对象允许访问status和statusText属性,也支持同步请求。

3)跨域XHR的额外限制如下:

□不能使用setRequestHeader()设置自定义头部。

□不会发送也不会接受cookie

□getAllRequestponseHeaders()方法只能返回空字符串。

3.JSON

①JSON是纯文本,而不是JavaScript代码。JSON的设计意图在服务器端构建格式化的数据,然后再将数据发送给浏览器。

②由于JSON在JavaScript中相当于对象和数组,因此JSON字符串可以传递给eval()函数,让其解析并返回一个对象或数组的实例。

③如果你是自己编写代码来对JSON求值,最好将输入文本放在一对圆括号中。因为eval()在对输入的文本求值时,是将其作为JS代码而非数据格式看待。在对以左花括号开头的对象求值时,就好像是遇到一个没有名字的JavaScript语句,会导致错误。将文本放在一对圆括号中可以解决这个问题,因圆括号表示值而不是语句。

var object1 = eval("{}");  //抛出错误

var object2 = eval("({})");  //没有问题

var object3 = eval("(" + jsonText + ")");  //通用解决方案

3.1在Ajax中使用JSON

①Douglas Crockford的JSON序列化器/解析器。www.json.org/js.html

②在上述库中,有一个全局JSON对象,有两个方法:parse()和stringify()。

③parse()方法:

□两个参数:JSON文本和一个可选的过滤函数。在传入的文本是有效地JSON情况下,parse()方法返回传入数据的一个对象表示。

□例子:var object = JSON.parse("{}"); 与直接使用eval()不同的是,这里不需要传入的文本家圆括号(内部自动处理)。

□第二个参数是一个函数,这个函数以一个JSON键和值作为参数。要想让作为参数的键出现在结果对象中,该函数必须返回一个值。

var jsonText = "{\"name\":\"Nicholas\",\"age\":29,\"author\":true}";

var object = JSON.parse(jsonText,function(key,value){

switch(key){

case "age" : return value+1;

case "author" : return undefined;

default : return value;

}

});

alert(object.age);  //30

alert(object.author); //undefined

④JSON同样也是向服务器发数据的流行格式。发送数据时,一般会把JSON放到POST请求主体中,而JSON对象的stringify()方法正是为此而设计。

⑤stringify()方法:

□三个参数:要序列化的对象、可选的替换函数(用于替换未受支持的JSON值)和可选的缩进说明符(可以是每个级别缩进的空格数,也可以是用来缩进的字符)。

var contact = {

name : "Nicholas C. Zakas",

email : "nicholas@some-domain-name.com"

};

var jsonText = JSON.stringify(contact);

alert(jsonText);

□JSON序列化支持的类型:字符串、数值、布尔值、null、对象、数组和Date(Date将被换成字符串形式)。其他不支持类型将被移除,可通过stringify()第二个参数所传入的函数改变行为。

3.2安全

①JSON缺点:使用eval(),有可能受到XSS攻击。

②建议使用Crockford的库,可妥当解析JSON字符串,过滤其中恶意代码。降低遭受代码式XSS攻击的可能性。

Javascript 相关文章推荐
input 输入框内的输入事件详细分析
Mar 17 Javascript
跟我学习javascript的基本类型和引用类型
Nov 16 Javascript
基于javascript实现右下角浮动广告效果
Jan 08 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
BootStrap表单时间选择器详解
May 09 Javascript
JavaScript实现简单图片轮播效果
Aug 21 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
vue使用ElementUI时导航栏默认展开功能的实现
Jul 04 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
Nuxt v-bind绑定img src不显示的解决
Dec 05 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 #Javascript
jquery maxlength使用说明
Sep 09 #Javascript
基于jquery可配置循环左右滚动例子
Sep 09 #Javascript
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
Sep 09 #Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 #Javascript
$.ajax返回的JSON无法执行success的解决方法
Sep 09 #Javascript
yepnope.js 异步加载资源文件
Sep 08 #Javascript
You might like
adodb与adodb_lite之比较
2006/12/31 PHP
让PHP支持页面回退的两种方法
2008/01/10 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
PHP实现删除非站内外部链接实例代码
2014/06/17 PHP
ThinkPHP简单使用memcache缓存的方法
2016/11/15 PHP
Yii2使用表单上传文件的实例代码
2017/08/03 PHP
Thinkphp开发--集成极光推送
2017/09/15 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
JQuery 小练习(实例代码)
2009/08/07 Javascript
javascript 数组学习资料收集
2010/04/11 Javascript
Javascript的一种模块模式
2010/09/08 Javascript
javascript自然分类法算法实现代码
2013/10/11 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
2013/11/14 Javascript
jQuery制作拼图小游戏
2015/01/12 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
python查询mysql中文乱码问题
2014/11/09 Python
在Python的while循环中使用else以及循环嵌套的用法
2015/10/14 Python
python中的错误处理
2016/04/10 Python
python字符类型的一些方法小结
2016/05/16 Python
在Linux命令行终端中使用python的简单方法(推荐)
2017/01/23 Python
win10环境下python3.5安装步骤图文教程
2017/02/03 Python
详解django中自定义标签和过滤器
2017/07/03 Python
Python简单生成随机姓名的方法示例
2017/12/27 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
Django框架 Pagination分页实现代码实例
2019/09/04 Python
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
幼教毕业生自我鉴定
2014/01/12 职场文书
科长竞争上岗演讲稿
2014/05/12 职场文书
侵犯商业秘密的律师函
2015/05/27 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python