You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
4.4 KiB
73 lines
4.4 KiB
<!doctype html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|
<title>My Learning Website</title> |
|
<link href="/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css"> |
|
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> |
|
<!-- WARNING: Respond.js doesn't work if you view the page via file:// --> |
|
<!--[if lt IE 9]> |
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> |
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> |
|
<![endif]--> |
|
</head> |
|
<body> |
|
|
|
<div class="banner"> |
|
<h1 class="courselink">Introduction to Web APIs</h1> |
|
<h2 class="lecturer">LinkedIn Learning : Andrew Probert - September 2019</h2> |
|
<h2 class="episodetitle">What is an API?</h2> |
|
</div> |
|
|
|
<article> |
|
|
|
<h2 class="sectiontitle">APIs in Plain English</h2> |
|
<p>Using an API is a little bit like ordering food in a restaurant. You ask the waiter what you want and he delivers it to you, you don'#t need to know how it's made, where it's made and so on. An API provide will supply the documentation telling you what data is available and how you can request it.</p> |
|
<h2 class="sectiontitle">The request and response Cycle</h2> |
|
<p>The client (that is, the browser) sends a request to the server using an HTTP verb. In mmost cases, particularly for this course, that will be GET. The most common verbs are (I'm not sure if there are others or if this list is actually complete</p> |
|
<pre class="inset"> |
|
•GET - the client requests data which the server sends back (all being well). |
|
•POST - the client sends some data to the server to update the data held there. |
|
•PUT - similar to POST, except that we are sending new data to the server (essentially, this is an insert command). |
|
•DELETE - deletes some data that is currently on the server.</pre> |
|
<p>The cycle is</p> |
|
<pre class="inset"> |
|
•request - this is sent to the server, in the form of a GET request, for example. |
|
• response - the server will send the data back assuming that the request is properly formed and there are no other issues (such as authorization).</pre> |
|
<h2 class="sectiontitle">What is JSON?</h2> |
|
<p>There are two main formats in which data is usually returned to you, XML and JSON. XML used to be the most common but JSON is the dominant format now.</p> |
|
<pre class="inset"> |
|
JSON - JavaScript Object Notation</pre> |
|
<p>The data is formatted like a JavaScript option which makes it easy to use in a web application.</p> |
|
<p>JSON data is essentially a collection of key value pairs enclosed in curly braces. You could think of the key as being like a property so it might be something like name. The value is the value! That might be something like Philip. Both the keys and values are wrapped in double quotes and they are separated by a colon, so it will look something like this. The key-value pairs are separated with commas.</p> |
|
<pre class="inset"> |
|
{ |
|
"name" : "Philip", |
|
"name" : "Andrew" |
|
}</pre> |
|
<p>In general, the data will be a little bit more complex than this and it can often look as though it represents database records, as in the following image.</p> |
|
<img src="images/image1.png" alt="Some sample JSON data"> |
|
<h2 class="sectiontitle">Parsing Data</h2> |
|
<p>When the data is returned, it is on the form of a text string which we can then convert to JSON using a JavaScript method, JSON.parse. This method takes one argument and that is the response string. The converstion outputs an object which you can use like any other object in JavaScript. Bear in mind that the object is actually an array of objects so you will use JavaScripts syntax for handling arrays to access the data.</p> |
|
</article> |
|
|
|
<div class="btngroup"> |
|
<button class="button" onclick="window.location.href='#';"> |
|
Next Chapter - Connect to an API |
|
</button> |
|
<button class="button" onclick="window.location.href='introductiontowebapis.html'"> |
|
Course Contents |
|
</button> |
|
<button class="button" onclick="window.location.href='/webdevelopment/webdevelopment.html'"> |
|
Web Development Page |
|
</button> |
|
<button class="button" onclick="window.location.href='/index.html'"> |
|
Home |
|
</button> |
|
</div> |
|
|
|
</body> |
|
</html> |