TEB Notes F15: October 2015

Wednesday, October 28, 2015

Simple PHP form explained

Creation of a pair of programs dealing with forms is very simple. The first program can be just an HTML file with the form and a reference to the second program processing this form on the server (in our case using PHP). Please watch the video on how to do this.

Thursday, October 22, 2015

Code explanation for the Ajax with XML lab

The required work with Ajax and XML using examples from w3schools might require some clarifications on how each line of code there works. Understanding this clearly you can somehow reuse the code dynamically creating HTML code for certain parts of the page (like a table) for presenting XML data. Explanations in this video will also allow you to make the examples more complicated and thus learn more.

Ajax code simplified (and a video)

An HTTP request consists of four parts:

the HTTP request method or "verb" (GET or POST)
the URL being requested
an optional set of request headers, which may include authentication information
an optional request body

The "GET" and "POST" methods are universally supported. "GET" is used for most "regular" requests, and it is appropriate when the URL completely specifies the requested resource, when the request has no side effects on the server, and when the server’s response is cacheable. The "POST" method is what is typically used by HTML forms. The parts of an HTTP request have a specific order: the request method and URL must come first, then the request headers, and finally the request body. XMLHttpRequest implementations generally do not initiate any networking until the send() method is called.

The HTTP response sent by a server has three parts:

a numeric and textual status code that indicates the success or failure of the request (good to check)
a set of response headers (you do not have to use these)
the response body (your information from the server)
　

Below is the code example used in this video lecture

<!DOCTYPE html>
<html>
<head>

<script>
function loadData()
{
var xhr;
xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.status==200 && xmlhttp.readyState==4 )
{document.getElementById("myDiv").innerHTML=xhr.responseText;}
}
xhr.open("GET","ajax_info.txt",true); // or just xhr.open("GET", url);
xhr.send(); // GET requests never have a body, so pass null or omit
}
</script>

</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadData()">Change Content</button>
</body>
</html>　

XMLHttpRequest Properties

onreadystatechange
An event handler for an event that fires at every state change.
readyStateThe readyState property defines the current state of the XMLHttpRequest object.
Here are the possible values for the readyState propery:

State	Description
0	The request is not initialized
1	The request has been set up
2	The request has been sent
3	The request is in process
4	The request is completed and data received

readyState=0 after you have created the XMLHttpRequest object, but before you have called the open() method.
readyState=1 after you have called the open() method, but before you have called send().
readyState=2 after you have called send().
readyState=3 after the browser has established a communication with the server, but before the server has completed the response.
readyState=4 after the request has been completed, and the response data have been completely received from the server.
responseText
Returns the response as a string.
responseXML
Returns the response as XML. This property returns an XML document object, which can be examined and parsed using W3C DOM node tree methods and properties.
status
Returns the status as a number (e.g. 404 for "Not Found" and 200 for "OK").
statusText
Returns the status as a string (e.g. "Not Found" or "OK").

Wednesday, October 21, 2015

How Ajax Changes Web Development

In this video lecture I will be talking not about the details in the code that uses XMLHttpRequest object but about the changes in Web development approach with the use of Ajax. This simple http technology is the foundation of switching from page-based interaction with the server to application based interaction when a number of small independent or communicating apps can create a coherent integral view seen as one page. You all saw such elements of pages as Google AdSense, Google Maps, Suggest, auto-complete, chats and IM, login portion of the page where independent functionality of such pieces does not require for the whole page to be reloaded and all client -side execution to be stopped until the server returns data in each Ajax section.

Working with smarterasp.net

See the short video on how to use folders and files on smarterasp server

Friday, October 16, 2015

Simple JS Debugging

In this video lecture you will learn some simple methods of HTML and JavaScript debugging. Of course, there are more powerful tools on the market, but the ones shown in the lecture are simple and easily accessible. In really big projects you can use whole studios of tools...