Difference between http call and webservice

HTTP call is a pure HTTP Request/Reponse using GET and POST. 

Webservice can be implemented via HTTP/JMS/MQ 

As far as the transport protocol is concerned, HTTP is pretty similar to both XML and Web Service. In case of a general HTTP call, XML message is transported over HTTP protocol, and SOAP message is transported over HTTP protocol in case of a web service. 

But, the kind of message that's being transported over this HTTP protocol really matters. XML differs a lot from a SOAP Message. While XML is specific to one transaction and to one particular system, a SOAP Message can be made generic to multiple systems. 

Difference between web application and web service?

Web application: 

================
any application which resides on a server, but meant for use by humans,
which uses web pages as the presentation layer. All user interactivity (the GUI) is done
through web pages, but all data is stored and (mostly) manipulated on the server.

Web service:
===========
server-based application (as above) which may be accessed over the web via HTTP, but is
meant primarily for interaction with other programs. Thus, it will have a clearly-defined API
which consists of providing responses to HTTP GET and POST requests made by a remote application.
Now, this doesn't mean you can't access a web service from your browser, but it means that the
application won't necessarily have a GUI user interface. You will most likely, for example,
receive all results of GET and POST requests as strings of XML, which requires a client-side parser.

So, think of web applications as completed user interfaces, while web services are more intended to
be application components or "libraries" which can be used by other applications. Essentially,
web services are to distributed applications what DLLs or class libraries are to most traditional
compiled applications.

Also, this means that a web service has to have a more organized design that most web applications,
because there won't necessarily be a human at the other end who can figure out through trial and
error what the app does. This is why the whole concept of "web services" has brought a whole new
set of acronyms such as SOAP, UDDI, etc...

jQuery Form Validation Example (2mins)

2min Setup Validation Instructions

Step 1 – Include the latest version of the jQuery Library.

Or use the hotlink welcome file:

double click code to edit/copy

1 2	//hosted by Microsoft Ajax CDN <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>

Step 2 – Download the jQuery Validation Plugin.

Or use the hotlink welcome file:

double click code to edit/copy

1 2	//hosted by Google API <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 3 – Add the following JavaScript validation rules to your webpage (or indlude as seperate js include).

The code below contains the input field validation rules for the form and also includes a direct submit handler (works for mutiple forms on same page).

double click code to edit/copy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46

(function($,W,D) {     var JQUERY4U = {};       JQUERY4U.UTIL =     {         setupFormValidation: function()         {             //form validation rules             $("#register-form").validate({                 rules: {                     firstname: "required",                     lastname: "required",                     email: {                         required: true,                         email: true                     },                     password: {                         required: true,                         minlength: 5                     },                     agree: "required"                 },                 messages: {                     firstname: "Please enter your firstname",                     lastname: "Please enter your lastname",                     password: {                         required: "Please provide a password",                         minlength: "Your password must be at least 5 characters long"                     },                     email: "Please enter a valid email address",                     agree: "Please accept our policy"                 },                 submitHandler: function(form) {                     form.submit();                 }             });         }     }       //when the dom has loaded setup form validation rules     $(D).ready(function($) {         JQUERY4U.UTIL.setupFormValidation();     });   })(jQuery, window, document);

Step 4 – Add the HTML for the form and some styles.

The input fields “name” attribute is important as it maps directly to the validation rules.

double click code to edit/copy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<!-- HTML form for validation demo --> <form action="" method="post" id="register-form" novalidate="novalidate">       <h2>User Registration</h2>       <div id="form-content">         <fieldset>               <div class="fieldgroup">                 <label for="firstname">First Name</label>                 <input type="text" name="firstname">             </div>               <div class="fieldgroup">                 <label for="lastname">Last Name</label>                 <input type="text" name="lastname">             </div>               <div class="fieldgroup">                 <label for="email">Email</label>                 <input type="text" name="email">             </div>               <div class="fieldgroup">                 <label for="password">Password</label>                 <input type="password" name="password">             </div>               <div class="fieldgroup">                 <p class="right">By clicking register you agree to our <a target="_blank" href="/policy">policy</a>.</p>                 <input type="submit" value="Register" class="submit">             </div>           </fieldset>     </div>           <div class="fieldgroup">             <p>Already registered? <a href="/login">Sign in</a>.</p>         </div> </form>

Here are some optional CSS styles, which I used for the demo.

double click code to edit/copy

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

/* example styles for validation form demo */ #register-form {     background: url("form-fieldset.gif") repeat-x scroll left bottom #F8FDEF;     border: 1px solid #DFDCDC;     border-radius: 15px 15px 15px 15px;     display: inline-block;     margin-bottom: 30px;     margin-left: 20px;     margin-top: 10px;     padding: 25px 50px 10px;     width: 350px; }   #register-form .fieldgroup {     background: url("form-divider.gif") repeat-x scroll left top transparent;     display: inline-block;     padding: 8px 10px;     width: 340px; }   #register-form .fieldgroup label {     float: left;     padding: 15px 0 0;     text-align: right;     width: 110px; }   #register-form .fieldgroup input, #register-form .fieldgroup textarea, #register-form .fieldgroup select {     float: right;     margin: 10px 0;     height: 25px; }   #register-form .submit {     padding: 10px;     width: 220px;     height: 40px !important; }   #register-form .fieldgroup label.error {     color: #FB3A3A;     display: inline-block;     margin: 4px 0 5px 125px;     padding: 0;     text-align: left;     width: 220px; }

That’s it your done!