本文共 4105 字，大约阅读时间需要 13 分钟。
- 功能需求 公司使用wcf rest搭建了一个服务，为了使不同网站客户能够访问这个服务，决定用最通用的javascript+html 嵌入到客户网站调用该服务。要求使用简单，数据格式为xml，并能兼容大部分浏览器（IE6-IE9、360、firefox、chrome）等
- 解决思路 使用javascript+ajax请求的方式，调用远程服务。遇到的主要问题是如何解决浏览器兼容问题，比如IE8+调用远程服务的时候会遇到跨域问题，程序中是通过创建ActiveXObject解决的，而不是标准的XMLHttpRequest
- 主要代码解释
- IE浏览器，解决跨域访问问题
function crossDomainIE() {
// Use Microsoft XDR var xdr
= new XDomainRequest();
xdr.open(
"POST", url);
xdr.onload
= function () {
// XDomainRequest doesn't provide responseXml, so if you need it: var dom
= new ActiveXObject(
"Microsoft.XMLDOM");
dom.async
= false;
displayData(xdr.responseText);
};
xdr.send(data);
}
- 其它浏览器，默认无跨域问题
function noCrossDomain() {
var xmlhttp
= createXMLHttp();
xmlhttp.open(
"POST", url);
xmlhttp.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*"); xmlhttp.send(data);
// Create the callback: xmlhttp.onreadystatechange
= function () {
if (xmlhttp.readyState
!= 4) {
return;
// Not there yet }
if (xmlhttp.status
!= 200) {
return;
}
displayData(xmlhttp.responseText);
}
}
- XML文本转换为Xml Dom也存在浏览器兼容问题
function convertXml2Dom(xmlData) {
if (window.ActiveXObject) {
//for IE xmlDoc
= new ActiveXObject(
"Microsoft.XMLDOM");
xmlDoc.async
= "false";
xmlDoc.loadXML(xmlData);
return xmlDoc;
}
else if (document.implementation
&& document.implementation.createDocument) {
//for Others parser
= new DOMParser();
xmlDoc
= parser.parseFromString(xmlData,
"text/xml");
return xmlDoc;
}
}
- 解决firefox无法用innerText显示文本的问题1
//显示查询结果 function displayData(resp) {
var xmlObject
= convertXml2Dom(resp);
document.getElementById(
"lblAge").innerText
= xmlObject.getElementsByTagName(
"Age")[
0].childNodes[
0].nodeValue;
//相同值再次赋值给innerHTML是应为innerText在firefox中无效，暂不知道原因 document.getElementById(
"lblAge").innerHTML
= xmlObject.getElementsByTagName(
"Age")[
0].childNodes[
0].nodeValue;
}
- 完整源代码
<script type
= "text/javascript" > var url
= "远程服务url地址";
var data;
window.onload
= function () {
//请求xml数据 data
= "\ <?xml version='1.0' encoding='utf-8'?>\ <xmlhttpuest>\ <FirstName>Chen</FirstName>\ <LastName>Fox</LastName>\ </xmlhttpuest>\ ";
if (window.XDomainRequest) {
//为了解决IE的跨域问题 crossDomainIE();
}
else {
noCrossDomain();
}
}
//IE浏览器，解决跨域访问 function crossDomainIE() {
// Use Microsoft XDR var xdr
= new XDomainRequest();
xdr.open(
"POST", url);
xdr.onload
= function () {
// XDomainRequest doesn't provide responseXml, so if you need it: var dom
= new ActiveXObject(
"Microsoft.XMLDOM");
dom.async
= false;
displayData(xdr.responseText);
};
xdr.send(data);
}
//其它浏览器，默认无跨域问题 function noCrossDomain() {
var xmlhttp
= createXMLHttp();
xmlhttp.open(
"POST", url);
xmlhttp.setRequestHeader(
"Content-Type",
"application/x-www-form-urlencoded");
//xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "*"); xmlhttp.send(data);
// Create the callback: xmlhttp.onreadystatechange
= function () {
if (xmlhttp.readyState
!= 4) {
return;
// Not there yet }
if (xmlhttp.status
!= 200) {
return;
}
displayData(xmlhttp.responseText);
}
}
//创建ajax http对象 function createXMLHttp() {
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp
= new XMLHttpRequest();
}
else {
// code for IE6, IE5 xmlhttp
= new ActiveXObject(
"Microsoft.XMLHTTP");
}
return xmlhttp;
}
//将xml文本转换为xml dom function convertXml2Dom(xmlData) {
if (window.ActiveXObject) {
//for IE xmlDoc
= new ActiveXObject(
"Microsoft.XMLDOM");
xmlDoc.async
= "false";
xmlDoc.loadXML(xmlData);
return xmlDoc;
}
else if (document.implementation
&& document.implementation.createDocument) {
//for Others parser
= new DOMParser();
xmlDoc
= parser.parseFromString(xmlData,
"text/xml");
return xmlDoc;
}
}
//显示查询结果 function displayData(resp) {
var xmlObject
= convertXml2Dom(resp);
document.getElementById(
"lblAge").innerText
= xmlObject.getElementsByTagName(
"Age")[
0].childNodes[
0].nodeValue;
//相同值再次赋值给innerHTML是应为innerText在firefox中无效，暂不知道原因 document.getElementById(
"lblAge").innerHTML
= xmlObject.getElementsByTagName(
"Age")[
0].childNodes[
0].nodeValue;
}
< /script
>
转载于:https://www.cnblogs.com/gossip/archive/2012/09/14/2684948.html