class: center, middle .center[![Python](http://m1.paperblog.com/i/201/2016454/guia-python-conceptos-programacion-atributos--L-DTucOw.png)] # Web Scraping in Python: Ajax, SPA, Web Socket March 14, 2018
Instructor: [S. M. Masoud Sadrnezhaad](https://twitter.com/smmsadrnezh) --- AJAX ========== - Ajax, is short for Asynchronous JavaScript and XML – its not a technology in it own right rather a set of established technologies, a development technique if you will, for creating more responsive, interactive web applications such as Google maps. - Traditional web applications require the entire page to refresh whenever the user interacts with the system this is because the entire webpage is rebuilt following the transfer of data between the browser and the server (there is a synchronicity between a user’s action and data transfer between the web browser and the web server – the user clicks on something, data is transfered and the page is rebuilt). - Rebuilding the page in this way introduces a delay and interrupts the user from achieving their goal, which is obviously a bad thing; at least for web applications if not for sites such as this blog or a news site. --- AJAX (Contd) ========== - The objective of Ajax is to make web applications, more responsive by separating the data transfer (which happens in the background) from the users’ actions. - This is achieved by placing a piece of code (JavaScript) between the user and the server – the JavaScript (running on the users’ browser) requests data (as XML) in the background and uses this to build the webpage (by using iFrames the JavaScript can be made to only rebuild parts of the page at a time). - This separation means there is an asynchronous relationship between data transfer and the user’s interaction with the application. --- AJAX (Contd) ========== .center[![Ajax](ajax.png)] --- AJAX (Contd) ========== .center[![Ajax](ajax2.png)] --- AJAX (Contd) ========== .center[![Ajax](ajax3.png)] --- Single Page Application ========== - In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. - The server then processes the request and sends the HTML of the page to the client. - In subsequent interactions with the page, for example the user navigates to a link or submits a form with data, a new request is sent to the server and the flow starts again. - The server processes the request and sends a new page to the browser in response to the new action requested by the client. --- Single Page Application ========== .center[![SPA](spa1.jpg)] --- Single Page Application ========== - In Single-Page Applications (SPAs) the entire page is loaded into the browser after the initial request, but subsequent interactions take place using Ajax requests. - This means that the browser must update only the portion of the page that has changed; there is no need to reload the entire page. - The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience. - Single-Page Applications (SPAs) are Web apps that load a single HTML page and dynamically update that page as the user interacts with the app. - A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server. - This approach avoids interruption of the user experience between successive pages, making the application behave more like a desktop application. --- Single Page Application ========== .center[![SPA](spa2.jpg)] --- WebSocket ========== - WebSocket is a transport protocol defined by a persistent, bidirectional communication channel between server and client that takes place over a single TCP socket connection. - The WebSocket protocol enables interaction between a web client (such as a browser) and a web server with lower overheads, facilitating real-time data transfer from and to the server. - This is made possible by providing a standardized way for the server to send content to the client without being first requested by the client, and allowing messages to be passed back and forth while keeping the connection open. - In this way, a two-way ongoing conversation can take place between the client and the server. - Because a WebSocket connection is held open for the duration of a session, messages can flow back and forth between participating endpoints with little overhead and low latency. - It's used in applications such as chat, multiplayer gaming, multi-user collaboration, and live-streamed charts or scoreboards (e.g. sports matches in progress). --- WebSocket ========== .center[![WebSocket](websocket.png)] --- # References * https://derivadow.com/2007/01/05/ajax-what-is-it-its-not-dhtml/ * https://www.c-sharpcorner.com/uploadfile/rahul4_saxena/single-page-application-spa-using-angularjs-web-api-and-m/ * https://en.wikipedia.org/wiki/Single-page_application * https://en.wikipedia.org/wiki/WebSocket * https://www.pubnub.com/learn/glossary/what-is-websocket/ --- class: center, middle .center[![Python](http://m1.paperblog.com/i/201/2016454/guia-python-conceptos-programacion-atributos--L-DTucOw.png)] # Thank you. Any questions?