Web Services Fundamentals

Introduction

• Web Services are resources which are accessed over the web

• AppStudio Apps can access Web Services

• The information that is pulled from the web can make interesting apps

• Data can be pulled from your own server or someone else's.

• Mashups are apps which pull information from more than one source

Same Origin Policy and CORS

Same Origin Policy (SOP): The policy permits scripts running on pages originating from the same site – a combination of scheme, hostname, and port number – to access each other's DOM with no specific restrictions, but prevents access to DOM on different sites.

Cross Origin Resource Sharing (CORS): is a mechanism that allows scripts on a web page to make AJAX requests to another domain, not the domain the script originated from. Such "cross-domain" requests would otherwise be forbidden by web browsers, per the Same Origin Policy.

• Suppose we create an AppStudio app.

• It gets saved on our server (nsbapp.com), together with all the files it needs to run.

• When someone runs it, they enter http://www.nsbapp.com/HelloWorld into their browser.

• The app is then loaded from the website and stored on the device.

• Since the app is loaded from nsbapp.com, SOP allows it to access resources on nsbapp.com: HTML, JavaScript, CSS files, images, etc.

• However, it would not be allowed full use of resources on another site, such as nsbasic.com.

• CORS is a way of allowing apps running from another server to access specific resources on the server.

AJAX

AJAX: stands for Asynchronous JavaScript and XML. It is a group of interrelated web development techniques used on the client-side to create asynchronous web applications.

• It has evolved since it was originally named.

• Now, it does not necessary involve asynchronous, JavaScript or XML!

• The AppStudio AJAX statement allows an app to request information from a web service.

A Simple Exchange of Data with the server

Let's look at some code. We will have our AppStudio app send the server a string, which the server will return reversed. Here is what the app looks like:

File:AJax1.png

The only code in this app is the "Reverse" button. The Ajax function sends the contents of the top TextArea to a PHP script that is running on the server. If it returns successfully, we display what came back. Otherwise, we show the error:

Dim req
Function btnAjax_onclick()
  req=Ajax("ajax.php/?myText=" & txtSend.value)
  If req.status=200 Then 'success
    txtResponse.value=req.responseText
  Else 'failure
    txtResponse.value="Error: " & req.err.message
  End If
End Function

The PHP script is even easier. It gets the input that is named myText, reverses it, and uses the echo statement to send it back.

<?php
 // Get the data from the client. 
 $myText = $_GET['myText'];
 // Send back the text, reversed
 echo "Data received from Device (reversed): " . strrev($myText); 
?>

Here is the result:

A few notes:

• The php script needs to be on the same folder on the server as the AppStudio app.
• Ajax is based on XMLHttpPost.
• A handy way to return data from your PHP script is in JSON format. PHP even has a handy json_encode() function.
• PHP is not enabled on the nsbapp.com server.