How to Parse XML Response Using jQuery - javascript

I am trying to parse an xml response using jQuery and just output an element the a page but i am unsuccessful in this.
Below is the code that I am using for the response & parsing of it.
$.ajax({
url: UCMDBServiceUrl,
type: "POST",
dataType: "xml",
data: soapMessage,
success: UCMDBData,
crossDomain: true,
contentType: "text/xml; charset=\"utf-8\""
});
alert("Sent2");
return false;
}
function UCMDBData(xmlHttpRequest, status, msg)
{
alert("Came back1");
$(xmlHttpRequest.responseXML).find('tns:CIs').each(function()
{
alert("Came back2");
$(this).find("ns0:CI").each(function()
{
alert("Came back3");
$("#output").append($(this).find("ns0:ID").text());
});
});
}
I am receiving alerts for "Came back1" but it doesnt appear to be going any further. Below is the XML Response that I am trying to parse using my above jquery code. The text that I am ultimately trying to return out of the response is in this element
<?xml version='1.0' encoding='utf-8'?>
<soapenv:Envelope xmlns:soapenv="http://schemas.xmlsoap.org/soap/envelope/"><soapenv:Header />
<soapenv:Body>
<tns:getFilteredCIsByTypeResponse xmlns:ns0="http://schemas.hp.com/ucmdb/1/types" xmlns:ns1="http://schemas.hp.com/ucmdb/ui/1/types" xmlns:ns2="http://schemas.hp.com/ucmdb/1/types/query" xmlns:ns3="http://schemas.hp.com/ucmdb/1/types/props" xmlns:ns4="http://schemas.hp.com/ucmdb/1/types/classmodel" xmlns:ns5="http://schemas.hp.com/ucmdb/1/types/impact" xmlns:ns6="http://schemas.hp.com/ucmdb/1/types/update" xmlns:ns7="http://schemas.hp.com/ucmdb/discovery/1/types" xmlns:ns8="http://schemas.hp.com/ucmdb/1/types/history" xmlns:tns="http://schemas.hp.com/ucmdb/1/params/query">
<tns:CIs>
<ns0:CI>
<ns0:ID>4d030502995a00afd989d3aeca2c990c</ns0:ID>
<ns0:type>nt</ns0:type>
<ns0:props>
<ns0:strProps>
<ns0:strProp>
<ns0:name>name</ns0:name>
<ns0:value>prodoo</ns0:value>
</ns0:strProp>
</ns0:strProps>
<ns0:booleanProps>
<ns0:booleanProp>
<ns0:name>host_iscomplete</ns0:name>
<ns0:value>false</ns0:value>
</ns0:booleanProp>
</ns0:booleanProps>
</ns0:props>
</ns0:CI>
</tns:CIs>
<tns:chunkInfo>
<ns0:numberOfChunks>0</ns0:numberOfChunks>
<ns0:chunksKey>
<ns0:key1 />
<ns0:key2 />
</ns0:chunksKey>
</tns:chunkInfo>
</tns:getFilteredCIsByTypeResponse>
</soapenv:Body>
</soapenv:Envelope>
So my question is that how do I properly parse the data? I believe the code syntax is correct but I am not getting the expected returned results. I would appreciate any help, thanks.
EDIT
I have modified my code to the following like the suggestion, but still no luck:
$.ajax({
url: UCMDBServiceUrl,
type: "POST",
dataType: "xml",
data: soapMessage,
success: UCMDBData,
crossDomain: true,
contentType: "text/xml;"
});
alert("Sent2");
return false;
}
function UCMDBData(data, textStatus, jqXHR) {
alert("Came back1");
$(data).find('tns:CIs').each(function () {
alert("Came back2");
$(this).find("ns0:CI").each(function () {
alert("Came back3");
$("#output").append($(this).find("ns0:ID").text());
document.AppServerForm.outputtext.value = document.AppServerForm.outputtext.value + "http://localhost:8080/ucmdb/cms/directAppletLogin.do?objectId=" + $(this).find('ns0:ID').text() +"&infopane=VISIBLE&navigation=true&cmd=ShowRelatedCIs&interfaceVersion=8.0.0&ApplicationMode=ITU&customerID=1&userName=admin&userPassword=admin";
});
});
}
When I execute the only alert message i receive back is "Came back1" which means that the code is still not going through the xml properly with jquery. Any other suggestions?

The namespace-scoped names need to be handled a little differently. According to this answer:
jQuery XML parsing with namespaces
you would need to use an attribute selector [#nodeName=tns:CIs] instead.
You may need to drop the "#" for jQuery versions later than 1.3. Another suggestion is to escape the colon: .find('tns\:CIs'), which is hacky because it conflates the syntactic prefix with the semantic namespace (the uri). So if the prefix changed this method would break. A more correct answer will recognize the mapping of prefix to namespace uri. The jquery-xmlns plugin for namespace-aware selectors looks promising in that respect.

Your jQuery success function is of the wrong form. It needs to be of the form
function UCMDBData(data, textStatus, jqXHR) {
alert("Came back1");
$(data).find('tns:CIs').each(function () {
alert("Came back2");
$(this).find("ns0:CI").each(function () {
alert("Came back3");
$("#output").append($(this).find("ns0:ID").text());
});
});
}
In addition, in your $.ajax function, change the contentType line to be contentType: "text/xml" instead of what you have before (assuming that you're sending XML to the server).
See the jQuery.ajax() documentation for more information.

Based on your comment, why do something crazy with jQuery? Just use javascript itself!
var open = '<ns0:ID>';
var close = '</ns0:ID>';
var start = obj.indexOf(open) + open.length;
var end = obj.indexOf(close);
var result = obj.slice(start, end);
Here's a jsfiddle that shows it in action.

Probably the right syntax would be
success: function(xml) {
$(xml).find('tns:CIs').each(function() {
......

Related

Calling a Servlet from Ajax

I have a Java servlet, that i need to call and pass it a variable using Ajax. I have written an Ajax script, to get the variable that needs to be passed to the servlet. However i am not sure how to do so. Any help on this matter please?
This is my ajax code:
var data;
data = "NUMBER ='" + Number + "'";
var Key = '';
$.ajax({
type: "POST",
url: "Record?DB=EMP&Table=EMP_HISTORY&",
dataType: 'xml',
data: {
"Where": data
},
success: function(xml) {
$(xml).find('record').each(function() {
key = $(this).find("PK").text();
});
},
error: function(error) {
}
});
Your url parameter has & at last, I don't know if you have done it purposefully. However you may try this :
$.ajax({
url:"Record?DB=EMP&Table=EMP_HISTORY",
data:{Where:data},
contentType:"application/json; charset=utf-8",
dataType:"json",
success: function(xml) {
$(xml).find('record').each(function() {
key = $(this).find("PK").text();
});
},
error:function () {
}
});
It's unclear that which step u r in.Since that ,i would rather give u some advice.
1、if u dont use any webframework, then goto file web.xml and edit the servlet tag.configure the url and the according serlvet.Then u can overwrite the doPost() method in the servlet and receive the http request.
2、if u use webframework like struts.u can modify the configuration in struts.xml and write the according method in ur action to deal with the request.
3、if u use jsp as ur solution.u can simple do it in the jsp file. Deal with the request variables through getRequestParameter and out.print the result.
hope my advice is helpful!

Merging Javascript AJAX requests

I have a performance problem when loading a website over the network stored on an internal server. The performance issue is down to the multiple AJAX requests made in my Javascript file constantly trying to access an XML file and then getting an Image from a XML node or a Name from an XML node.
Is there a way I can merge the AJAX requests together to reduce the amount of requests from the client device to the XML file stored on the server.
My code is as below:
function getimage(getID,XMLImageID)
{
$("#" + getID).empty();
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLImageID).each(function(){
var image = $(this).find("image[href]").attr("href");
$('#'+ getID).append($("<img"+" class="+"Timages"+" src=\"" +image+"\"/>"));
});
},
error: function() {
alert("(getImage) An error occurred while processing XML file. Reasons could be: \n The XML cant be located. \n The XML is being used by another program. \n The XML is trying to parse incompatible characters. \n The XML syntax/tags are incorrect.");
}
});
}
function getdept(getid,XMLID)
{
var scriptTag = document.scripts[document.scripts.length - 1];
var parentTag = scriptTag.parentNode;
getid = parentTag.id;
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLID).each(function(){
var dept = $(this).find('Dept').text();
var id = $(this).attr("id");
var sName = $(this).find('Name').text();
$("#"+getid).append('<div class="Team_People" onmouseover="area_hover1(this);area_hover2(this)" href="#p'+id+'">'+dept+'<br />'+sName+'</div>');
});
},
error: function() {
alert("(getHierPeopleDept)An error occurred while processing XML file. Reasons could be: \n The XML cant be located. \n The XML is being used by another program. \n The XML is trying to parse incompatible characters. \n The XML syntax/tags are incorrect.");
}
});
}
The AJAX response uses a simplified code below, I just need to merge the code above to make it more neater rather than having multiple ajax requests. Not sure if this is possible (whether adding multiple parameters would work)?
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(xml){
$(xml).find(XMLID).each(function(){
//Get something from XML node
});
},
});
}
If anyone could guide me in the right direction that would be much appreciated!
Thanks
Regards
AJ
Create a global XML variable and query that with your function calls...
var XML = null;
function fetchXML(){
$.ajax({
type: "GET",
url: "XML/XML.xml",
dataType: "xml",
success: function(data){
XML = data;
},
error:function(){ alert('something went wrong');})
}
function getImage(id) {
$(XML).find(id).each(){ ... };
}
funcition getDept(id) {
$(XML).find(id).each(){ ... };
}

How to read XML file in Javascript (or jQuery)

I'm working on getting info for an artist from last.fm servers and I need to be able to read the picture of the artist they have on their servers. You can view an example XML return statement here. As you can see, there are many images for each artist (small, medium, large, extralarge, and mega). I need to be able to ready any of these and get the appropriate value back.
I'm new to reading XML/DOM through Javascript, so I'm sure it's fairly simple, but the extra attribute of "size" in the XML file is throwing me for a bit of a loop. Thanks!
This gets the first image for example.
$.ajax({
url: "http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=Cher&api_key=ac74a1e6fae52bc5f55a8a6f30b84db9",
type: "GET",
dataType: "html",
success: function(data) {
var xml = $.parseXML(data)
$(xml).each(function()
{
alert($(this).find("lfm>artist>image[size]:first").text());
});
},
error: function(jqXHR, textStatus, errorThrown ){
// debug here
alert("failure");
}
});
}
use $.parseXML to create a kind of x-document.. then you can find stuff from it with jquery selectors.
getXMLNode(retObj.responseXML, "thatField");
function getXMLNode(xml, nameOfField) {
return $($.parseXML(xml)).find(':first').find(nameOfField).text();
}
Something to this effect should return all image sizes:
$.ajax({
type: "GET",
url: "http://ws.audioscrobbler.com/2.0/?method=artist.getinfo&artist=Cher&api_key=ac74a1e6fae52bc5f55a8a6f30b84db9",
dataType: "xml",
success: function (xml) {
// Parse the xml file and get data
var xmlDoc = $.parseXML(xml),
$xml = $(xmlDoc);
$xml.find('image').each(function () {
console.log($(this).text())
});
}
});

Jquery - parse XML received from URL

I have this URL, that I supposedly should receive an XML from. So far I have this:
function GetLocationList(searchString)
{
$.ajax({
url: "http://konkurrence.rejseplanen.dk/bin/rest.exe/location?input=" + searchString,
type: "GET",
dataType: "html",
success: function(data) {
//Use received data here.
alert("test");
}
});
Tried to debug with firebug, but it doesn't go into the success method.
Though, in DreamWeaver it is able to post a simple alert, which is inside the success method.
I tried writing xml as dataType, but it doesn't work (in DreamWeaver) when I write alert(data).
But it shows an alert with the entire XML, when I write html as dataType.
How do I get the XML correctly, and how do I parse and for example get the "StopLocation" element?
Try to add an Error function as well.
See enter link description here
This will give you all the informations you need to debug your code with Firefox.
$.ajax({
url: "http://konkurrence.rejseplanen.dk/bin/rest.exe/location?input=" + searchString,
type: "GET",
dataType: "html",
success: function(data) {
//Use received data here.
alert("test");
},
error: function(jqXHR, textStatus, errorThrown ){
// debug here
}
});
you need to parse it first, and then you can search for the attributes. like this.
success: function(data) {
var xml = $.parseXML(data)
$(xml).find('StopLocation').each(function()
{
var name = $(this).attr('name');
alert(name);
}
);
this will give you the name of each StopLocation.
hope this helps, you can use the same method for all other attributes in the document also.

Parse custom XML schema with jQuery

I am getting custom schema data back from an AJAX call and I need to parse it using jQuery. Any idea how to do this?
Here's the XML:
<xsd:get_customer_summary_response xmlns:xsd="http://com/acmeco/ovm/cas/xsd">
<xsd:customer_details>
<typ:phone_number xmlns:typ="http://com/acmeco/ovm/cas/types">1.555.5553002</typ:phone_number>
<typ:timezone xsi:nil="true" xmlns:typ="http://com/acmeco/ovm/cas/types" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"/>
<typ:zipcode xmlns:typ="http://com/acmeco/ovm/cas/types">3002</typ:zipcode>
...
</xsd:customer_details>
</xsd:get_customer_summary_response>
And here's the AJAX call. I can parse normal XML with the below, but not XSD stuff.
$.ajax({
type: "GET",
url: "so.xml",
dataType: "html",
success: function(returnhtml){
$("customer_details", returnhtml).find("zipcode").each(function() {
alert($(this).text());
});
}, etc.
Any ideas?
I haven't tested this, but have you tried:
$.ajax({
type: "GET",
url: "so.xml",
dataType: "html",
success: function(returnhtml){
$(returnhtml).find("customer_details zipcode").each(function() {
alert($(this).text());
});
}, etc.
The context argument of jQuery expects a DOM element.
returnhtml will be an HTML string according to jQuery's ajax() documentation if you set the dataType as HTML. If it's an XML string, you'd need to have jQuery convert it into an element you can work with first, before using it as context.
You can use $.parseXML for it.
success: function (returnhtml) {
var parsedXML = $.parseXML(returnhtml);
$(parsedXML).find("zipcode").each(function() {
alert($(this).text());
});
}
https://jsfiddle.net/chukanov/jjt894dc/

Categories

Resources