Scribd
Upload
81 views

Call A Webservice Method From An HTML Page (Javascript)

This document discusses calling web services from JavaScript using the XMLHttpRequest object. It provides code examples for making GET and POST requests to web services and retrieving and parsing the response. It also discusses using jQuery to make AJAX requests and examples of making nested AJAX calls to retrieve and display data. Finally, it provides an overview of XML parsing and accessing the XML document object model.

Uploaded by

ramarao_pand
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
81 views

Call A Webservice Method From An HTML Page (Javascript)

This document discusses calling web services from JavaScript using the XMLHttpRequest object. It provides code examples for making GET and POST requests to web services and retrieving and parsing the response. It also discusses using jQuery to make AJAX requests and examples of making nested AJAX calls to retrieve and display data. Finally, it provides an overview of XML parsing and accessing the XML document object model.

Uploaded by

ramarao_pand
Copyright
© © All Rights Reserved
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 7

Calling Web Services from Java Script:using XMLHTTPRequest Object:

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");
}

GET Method:
var url;
if(isDefault==true)
url="http://"+location.host+"/container/seam/resource/restv1/vesselStowageService/
retriveBay?bay="+bay+"&vcn="+vcn ;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var obj=xmlhttp.responseText;
lowerBays = eval ("(" + obj + ")");
for(var b=0;b<lowerBays.lowerBayDetails.length;b++){
var bay = lowerBays.lowerBayDetails[b].bay;
}

}
}
}

POST Method:
var jsonString = JSON.stringify(saveBayInfo);
for(var i=0; i < jsonString.length; i++){
jsonString = jsonString.replace('\\', '');
}
jsonString = jsonString.replace('"[', '[');
jsonString = jsonString.replace(']"', ']');
var
url="http://"+location.host+"/container/seam/resource/restv1/vesselStowageService/
json?bay="+bay+"&vcn="+vcn+"&combinationBayNo="+combinationBayNo;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type",
"application/json;charset=UTF-8");
xmlhttp.setRequestHeader("Content-length", jsonString.length);
xmlhttp.setRequestHeader("Connection", "close");

xmlhttp.send(jsonString);

Usin Jquery:
GET Method:
row = table.rows[j].id;
myFunction("bay" + row);
document.getElementById('by'+row).innerHTML = jQuery(x[j]).text();
jQuery.ajax({
type: "GET",
async: false,
url:"http://"+location.host+"/container/seam/resource/restv1/yardPlanning?
yardName="+(parseInt(tableId)+1),
contentType: "application/xml; charset=utf-8",
dataType: "xml",
success: function (data, status, jqXHR) {
var bayData =
document.getElementById(bay" +
row).getElementsByTagName('tr');
jQuery(data).find('row').each(function () {var rowNumber =
jQuery(this).attr("number");
var tiers = jQuery(this).find('tiers').text();
var containerSize = jQuery(this).find('tiers').attr("size");
var tierIndex = tiers.split(",");
for(var m=0;
m <
tierIndex.length;
m++){var tierNo = tierIndex[m].trim();
var tempTierNumber = "";
if(tierNo == 5){tempTierNumber = 0;
}else if(tierNo == 4){tempTierNumber = 1;
}else if(tierNo == 3){tempTierNumber = 2;
}else if(tierNo == 2){tempTierNumber = 3;
}else if(tierNo == 1){tempTierNumber = 4;
}if(containerSize == 20)
{bayData[tempTierNumber].cells[rowNumber].style.background = "DarkCyan";
}else if(containerSize == 40)
{bayData[tempTierNumber].cells[rowNumber].style.background = "Purple";
}}});
jQuery("#bay" + row).show();
document.getElementById('storageNameId').innerHTML = yardName;
jQuery("#colorCode").show();
},error: function (msg, url, line) {alert('error trapped in error:
function(msg, url, line)');
alert('msg = ' + msg + ', url = ' + url + ', line = ' + line);
}});
Example1
function search(){
resetFunction();
jQuery.ajax({
type: "GET",
async: false,

url:
"http://"+location.host+"/container/seam/resource/restv1/yardPlanning/search",
contentType: "application/xml; charset=utf-8",
dataType: "xml",
success: function (data, status, jqXHR) {
jQuery(data).find('yard').each(function () {
var yardNumber = jQuery(this).attr("name");
var bays = jQuery(this).find('bays').text();
var bayNo = bays.split(",");
for(var j=0; j < bayNo.length; j++){
var bay = bayNo[j].trim();
var rowIndex =
document.getElementById(parseInt(bay)).rowIndex;
var tr =
document.getElementById('myTable'+(yardNumber-1))
.getElementsByTagName('tr')[rowIndex];
}

tr.style.backgroundColor = 'blue';

});
},
error: function (msg, url, line) {
alert('error trapped in error: function(msg, url, line)');
alert('msg = ' + msg + ', url = ' + url + ', line = ' +

line);

});

}
Example2
function innerAjaxCall(bayData,yardNo,bayNo){
jQuery.ajax({
type: "GET",
async: false,
url:
"http://"+location.host+"/container/seam/resource/restv1/yardPlanning/plannedBaysI
nfo?yardName="+yardNo+"&bayNo="+bayNo,
contentType: "application/xml; charset=utf-8",
dataType: "xml",
success: function (data, status, jqXHR) {
jQuery(data).find('row').each(function () {
var rowNumber = jQuery(this).attr("number");
var tiers = jQuery(this).find('tiers').text();
var containerSize =
jQuery(this).find('tiers').attr("size");
var tierIndex = tiers.split(",");
for(var m=0; m < tierIndex.length; m++){
var tierNo = tierIndex[m].trim();
var tempTierNumber = "";
if(tierNo == 5){
tempTierNumber = 0;
}else if(tierNo == 4){
tempTierNumber = 1;
}else if(tierNo == 3){
tempTierNumber = 2;

}else if(tierNo == 2){


tempTierNumber = 3;
}else if(tierNo == 1){
tempTierNumber = 4;
}
if(containerSize == 20){
bayData[tempTierNumber].cells[rowNumber].style.background = "DarkCyan";
}else if(containerSize == 40){
bayData[tempTierNumber].cells[rowNumber].style.background = "Purple";
}
}
});
},
error: function (msg, url, line) {
alert('error trapped in error: function(msg, url, line)');
alert('msg = ' + msg + ', url = ' + url + ', line = ' +
line);
}
});
}

XML Parser

Previous

Next Chapter

All modern browsers have a built-in XML parser.


An XML parser converts an XML document into an XML DOM object - which can then be
manipulated with JavaScript.

Parse an XML Document


The following code fragment parses an XML document into an XML DOM object:
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","books.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

Parse an XML String


The following code fragment parses an XML string into an XML DOM object:
txt="<bookstore><book>";
txt=txt+"<title>Everyday Italian</title>";
txt=txt+"<author>Giada De Laurentiis</author>";
txt=txt+"<year>2005</year>";
txt=txt+"</book></bookstore>";
if (window.DOMParser)
{
parser=new DOMParser();
xmlDoc=parser.parseFromString(txt,"text/xml");
}
else // Internet Explorer
{
xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async=false;
xmlDoc.loadXML(txt);
}
Note: Internet Explorer uses the loadXML() method to parse an XML string, while other
browsers use the DOMParser object.

Access Across Domains


For security reasons, modern browsers do not allow access across domains.
This means, that both the web page and the XML file it tries to load, must be located on the
same server.

The XML DOM


In the next chapter you will learn how to access and retrieve data from the XML DOM object.

XML DOM

Previous

Next Chapter

A DOM (Document Object Model) defines a standard way for accessing and manipulating
documents.

The XML DOM


The XML DOM defines a standard way for accessing and manipulating XML documents.
The XML DOM views an XML document as a tree-structure.
All elements can be accessed through the DOM tree. Their content (text and attributes) can
be modified or deleted, and new elements can be created. The elements, their text, and their
attributes are all known as nodes.
You can learn more about the XML DOM in our XML DOM tutorial.

The HTML DOM


The HTML DOM defines a standard way for accessing and manipulating HTML documents.
All HTML elements can be accessed through the HTML DOM.
You can learn more about the HTML DOM in our JavaScript tutorial.

Load an XML File - Cross-browser Example


The following example parses an XML document ("note.xml") into an XML DOM object and
then extracts some info from it with a JavaScript:

Example
<html>
<body>
<h1>W3Schools Internal Note</h1>
<div>
<b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>
</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","note.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;
document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=

xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

You might also like