• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Network Programming
 

Network Programming

on

  • 787 views

 

Statistics

Views

Total Views
787
Views on SlideShare
787
Embed Views
0

Actions

Likes
0
Downloads
14
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Network Programming Network Programming Document Transcript

    • In the name of God Network Programming AJAX and CSS Pejman Khadivi Assistant Professor ECE Department Isfahan University of Technology pkhadivi@ec.iut.ac.ir 1 What is AJAX? • Asynchronous JavaScript and XML – Not a new programming language – Technique for creating better, faster, and more interactive web applications » AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages. 2
    • Why AJAX? • In traditional JavaScript coding: – Make an HTML form and GET or POST data to the server – The user will have to click the "Submit" button – Wait for the server to respond – Server returns a new page each time • Traditional web applications can run slowly and tend to be less user-friendly. 3 Why AJAX? • With AJAX: – JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object • A web page can make a request to, and get a response from a web server – Without reloading the page – User will stay on the same page – Will not notice that scripts request pages 4
    • Example: Google Suggest • Was made popular in 2005 by Google » Google Suggest is using the XMLHttpRequest object to create a very dynamic web interface: When you start typing in Google's search box, a JavaScript sends the letters off to a server and the server returns a list of suggestions. • XMLHttpRequest object – Internet Explorer 5.0+ – Safari 1.2 – Mozilla 1.0 / Firefox – Opera 8+ – Netscape 7 5 Build Up AJAX Applications • Two Side Scripting: – Client Side: • JavaScript and XMLHttpRequest – Server Side: • Any Server Side Scripting Language 6
    • Build Up AJAX Applications • Create XMLHttpRequest Object • Send a Request to Server – Processing with JavaScript • Wait for a Reply – Generate Output with JavaScript 7 XMLHttpRequest Object • Different Browsers: – Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); – Internet Explorer xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); 8
    • XMLHttpRequest Object <script type="text/javascript"> catch (e) function ajaxFunction() { { try var xmlHttp; { try xmlHttp=new { ActiveXObject("Microsoft.XMLHTTP"); // Firefox, Opera 8.0+, Safari } xmlHttp=new XMLHttpRequest(); catch (e) } { catch (e) alert("Your browser does not support { AJAX!"); // Internet Explorer return false; try } { } xmlHttp=new } ActiveXObject("Msxml2.XMLHTTP"); } } </script> 9 XMLHttpRequest Object • Another Method: if(navigator.appName == "Microsoft Internet Explorer") { http = new ActiveXObject("Microsoft.XMLHTTP"); } else { http = new XMLHttpRequest(); } 10
    • readyState Property • An Odd Way for Function Definition: var add=function(a, b) { return a+b; } alert(add(1,2)); » This code does the same thing as the previous example. The syntax may seem odd, but it may make more sense when you consider that a function is an object, and we're just assigning a name to the object. Think of it as saying var myVar=[1,2,3]; The content of functions declared this way is also compiled. • Other Example: var add=function theAdd(a, b) { return a+b; } alert(add(1,2)); alert(theAdd(1,2)); 11 readyState Property • Sets or retrieves the event handler for asynchronous requests. – Where the status of our server's response is stored • When our response is complete and we can get our hands on that information xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { // Get the data from the server's response } } 12
    • Send a Request • Sending a Request to the Server • open() method: – Takes three arguments: – The first argument: which method to use when sending the request (GET or POST) – The second argument: specifies the URL – The third argument: the request should be handled asynchronously • send() method sends the request off to the server xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); 13 Server-Side ASP Script • Most of the Times, a Server Side Script Handles our Request • Any Scripting Language Could be Used: – PHP, ASP, … <% response.expires=-1 response.write(time) %> 14
    • All Together • A Simple Example – Automatic Time Update <form name="myForm"> Name: <input type="text" name="username" /> Time: <input type="text" name="time" /> </form> 15 All Together • Client Side Program: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } 16
    • All Together catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } 17 All Together catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp.onreadystatechange=function() { if(xmlHttp.readyState==4) { document.myForm.time.value=xmlHttp.responseText; } } 18
    • All Together xmlHttp.open("GET","time.asp",true); xmlHttp.send(null); } </script> <form name="myForm"> Name: <input type="text" onkeyup="ajaxFunction();" name="username" /> Time: <input type="text" name="time" /> </form> </body> </html> 19 Example: ID Availability Check • Validates a user name entered into a form – The name chosen has to be at least three letters long and must still be available • Try it Here: http://daniel.lorch.cc/docs/ajax_simple/ajax-cool.html 20
    • Example: ID Availability Check • Server Side Code: <?php function validate($name) { if( == '') { return ''; } if(strlen($name) < 3) { return "<span id="warn">Username too short</span>n"; } switch($name) { case 'bob': case 'jim': case 'joe': case 'carol': return "<span id="warn">Username already taken</span>n"; } return "<span id="notice">Username ok!</span>n"; } echo validate(trim($_REQUEST['name'])); ?> 21 Example: ID Availability Check • Server Side Code: <?php function validate($name) { if( == '') { return ''; } if(strlen($name) < 3) { return "<span id="warn">Username too short</span>n"; } switch($name) { case 'bob': case 'jim': case 'joe': case 'carol': return "<span id="warn">Username already taken</span>n"; } return "<span id="notice">Username ok!</span>n"; } echo validate(trim($_REQUEST['name'])); ?> 22
    • Example: ID Availability Check • Server Side Code: <?php function validate($name) { if( == '') { return ''; } if(strlen($name) < 3) { return "<span id="warn">Username too short</span>n"; } switch($name) { case 'bob': case 'jim': case 'joe': case 'carol': return "<span id="warn">Username already taken</span>n"; } return "<span id="notice">Username ok!</span>n"; } echo validate(trim($_REQUEST['name'])); ?> 23 Example: ID Availability Check • What Will Happen? 24
    • Example: ID Availability Check • Client Side: Create XMLHttpRequest Object 25 Example: ID Availability Check • Make a Request: function validate(user) { http.abort(); http.open("GET", "validate.php?name=" + user, true); http.onreadystatechange=function() { if(http.readyState == 4) { document.getElementById('foo').innerHTML = http.responseText; } } http.send(null); } 26
    • Example: ID Availability Check • Form in HTML Page: <form> <input type="text" onkeyup="validate(this.value)" /> <div id="foo"></div> </form> 27 Example: Databases • How to Use a DataBase: Client Side function showCustomer(str) { xmlHttp=GetXmlHttpObject(); if (xmlHttp==null) { alert ("Your browser does not support AJAX!"); return; } var url="getcustomer.asp"; url=url+"?q="+str; url=url+"&sid="+Math.random(); xmlHttp.onreadystatechange=stateChanged; xmlHttp.open("GET",url,true); xmlHttp.send(null); } 28
    • Example: Databases • How to Use a Database: Server Side 29 What is CSS? • Cascading Style Sheets – Styles define how to display HTML elements – Styles are normally stored in Style Sheets • Styles were added to HTML 4.0 to solve a problem – External Style Sheets can save you a lot of work – External Style Sheets are stored in CSS files 30
    • Different Styles • What style? – Browser default – External style sheet – Internal style sheet (inside the <head> tag) – Inline style (inside an HTML element) » Inline style (inside an HTML element) has the highest priority, which means that it will override a style declared inside the <head> tag, in an external style sheet, or in a browser (a default value). 31 CSS Syntax selector {property: value} body {color: black} p {font-family: "sans serif"} p {text-align:center;color:red} p h1,h2,h3,h4,h5,h6 { { text-align: center; color: green color: black; } font-family: arial } 32
    • Class Selector • With the class selector you can define different styles for the same type of HTML element. <p class="right"> This paragraph will be p.right {text-align: right} right-aligned. </p> p.center {text-align: <p class="center"> center} This paragraph will be center-aligned. </p> 33 Class Selector •Styled by the class "center" AND • Both the h1 element and the p the class "bold". element have class="center" <p class="center bold"> .center {text-align: center} This is a paragraph. <h1 class="center"> </p> This heading will be center-aligned </h1> <p class="center"> This paragraph will also be center- aligned. </p> 34
    • ID Selector • Styles for HTML elements with the id selector • The id selector is defined as a # #green {color: green} p#para1 { text-align: center; color: red } 35 Comments • Similar to C /* This is a comment */ p { text-align: center; /* This is another comment */ color: black; font-family: arial } 36
    • External Style Sheet • External style sheet – Each page must link to the style sheet using the <link> tag – The <link> tag goes inside the head section. <head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> 37 Internal Style Sheet • Internal style sheet should be used when a single document has a unique style <head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> </head> 38