从不同的服务器/域解析 XML 时,我将如何解决跨域问题?有人可以给我一个例子吗?该示例不必仅限于 jQuery,因为 JavaScript 也足够了。
3 回答
要完全理解为什么纯跨域 XML 行不通,首先看看如何促进跨域 JSON 会有所帮助。
首先,让我们看看在 jQuery 中发出 AJAX 请求时会发生什么:
$.ajax({
url: '/user.php?userId=123',
success: function(data) {
alert(data); // alerts the response
});
在上面的示例中,AJAX 请求是相对于域进行的。我们知道,如果我们尝试在路径前添加不同的域,请求将失败并出现安全异常。
但是,这并不是说浏览器不能向另一个域发出请求。这是您可能熟悉的示例:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
根据我们对如何在页面上导入 JavaScript 的了解,我们看到可以加载存在于另一个域中的资源!
JSONP 是一个利用这一知识的概念。JSONP 代表“带有填充的 JSON”,它的成功取决于 JavaScript 对象可以使用字符串表示法表示,以及 JavaScript 脚本标签可以从外部域加载和运行内容的事实。
在引擎盖下,jQuery 的 JSONP 看起来像这样,虽然它可能不准确:
// programmatically load a script tag on the page using the given url
function loadRemoteData(url) {
var script = document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src", url);
document.getElementsByTagName("head")[0].appendChild(script);
}
此外,在页面某处,我们定义了一个回调处理程序:
function processData(jsonResult) {
alert(JSON.stringify(jsonResult)); //alert the JSON as a string
}
在这里,我们提出请求:
// make a request for the data using the script tag remoting approach.
loadRemoteData("http://example.com/users.php?userId=123&callback=processData");
为了使其正常工作,我们的 PHP 脚本必须以 JSON 格式返回数据,并且还必须以 JavaScript 函数名称的形式在字符串周围添加“填充”,我们可以将其作为参数传入(即“回调” )
因此,如果我们在 Firebug 或 Chrome NET 选项卡中查看它,来自服务器的响应可能看起来像这样:
processData( { "userId" : "123" , "name" : "James" , "email" : "example@example.com" } );
因为我们知道 JavaScript 内容在下载后立即运行,所以processData
我们之前定义的函数会立即被调用,并将我们的 JSON 字符串作为参数传递。然后它会收到警报,使用 JSON.stringify 将对象转换回字符串。
由于它是一个对象,我还可以访问它的属性,如下所示:
function processData(jsonResult) {
alert(JSON.stringify(jsonResult)); //alert the JSON as a string
// alert the name and email
alert("User name is " + jsonResult.name + " and email is " + jsonResult.email);
}
最后,让我们进入主要问题:JSONP 可以用于获取 XML,还是可以跨域解析 XML? 正如其他人指出的那样,答案是一个响亮的“否”,但让我们通过一个例子来看看为什么:
processData(<?xml version="1.0"><user><userid>12345</userid><name>James</name><email>example@example.com</email></user>);
现在,如果将原始 XML 传递给函数会发生什么?它将中断,因为 JavaScript 无法将 XML 转换为 JSON。
但是,假设我们将 XML 放在引号中:
processData("<?xml version="1.0"><user><userid>12345</userid><name>James</name><email>example@example.com</email></user>");
现在,在这个例子中, jsonResult 变量实际上接受了一个字符串,我们可以使用它。使用一些 JavaScript XML 解析实用程序,我们可以将该字符串加载到 XML DOM Parser 中并使用它来处理!
但是,它不是纯 XML,它仍然是底层的 JavaScript 响应。PHP 服务器的响应类型仍然是 text/javascript,我们仍然使用脚本标签来加载真正只是纯 JavaScript 的内容。
总之,您可以使用“XMLP”或带填充的 XML(我只是编造的,这不是真的!),但如果您要经历实际修改响应以返回函数回调的所有麻烦wrapper,您也可以将输出转换为 JSON,让浏览器自动本地处理转换,省去使用 XML 解析器的麻烦。
但是如果出于某种原因将数据保存为 XML 格式更容易,您可以修改响应并为其提供 JavaScript 包装器。
如果您将来自遗留应用程序的 XML 数据存储在数据库中,并且您使用脚本标记远程处理或 JSONP 调用将其返回到客户端,那么我认为这很有用。
我找到了一个很好的解决方案来从跨域 ajax 请求中检索 xml。
从 jQuery 1.5 开始,您可以使用 dataType "jsonp xml" (http://api.jquery.com/jQuery.ajax/) !
所以我用了这个:
$.ajax({
type: "GET",
url: "http://yoururl",
dataType: "jsonp xml",
success: function(xmlResponse) { // process data }
});
我的 Web 服务的服务器端用于将 xml 字符串结果封装在 jQuery 创建的回调中:
private static Stream GetXmlPStream(string result, string callback)
{
if (result == null)
result = string.Empty;
result = EncodeJsString(result);
if (!String.IsNullOrEmpty(callback))
result = callback + "(" + result + ");";
byte[] resultBytes = Encoding.UTF8.GetBytes(result);
if (WebOperationContext.Current != null)
WebOperationContext.Current.OutgoingResponse.ContentType = "application/xml";
return new MemoryStream(resultBytes);
}
以及您需要清理 xml 字符串(以便 javascript 可以解析它)的魔法方法(我在另一个 Stack 线程中找到它):
private static string EncodeJsString(string s)
{
StringBuilder sb = new StringBuilder();
sb.Append("\"");
foreach (char c in s)
{
switch (c)
{
case '\"':
sb.Append("\\\"");
break;
case '\\':
sb.Append("\\\\");
break;
case '\b':
sb.Append("\\b");
break;
case '\f':
sb.Append("\\f");
break;
case '\n':
sb.Append("\\n");
break;
case '\r':
sb.Append("\\r");
break;
case '\t':
sb.Append("\\t");
break;
default:
int i = (int)c;
if (i < 32 || i > 127)
{
sb.AppendFormat("\\u{0:X04}", i);
}
else
{
sb.Append(c);
}
break;
}
}
sb.Append("\"");
return sb.ToString();
}
希望这会有所帮助!
我意识到这是一个老问题,但我在搜索时发现了这个。而且,我认为答案是针对与此处发布的问题略有不同的问题,因此我想添加此答案,该答案至少应适用于 jQuery 1.12 及更高版本。我没有在早期版本中测试过。
好的,我想请求这个 URL:http://sample.domain/feeds/itemdata.xml
我想找到Item
如下所示的内容:
<Item>
<ProductItemNo>1228101530</ProductItemNo>
...
</Item>
这有效,跨域:
$.ajax({
dataType: "xml",
url: "http://sample.domain/feeds/itemdata.xml",
success: function(xml) {
var itemdata = $(xml).find("ProductItemNo:contains('1228101530')").parent();
}
});