Scribd Logo
Unggah

Selamat datang di Scribd!

  • RW334 26

    Diunggah oleh

    download_all_here
    44 tayangan17 halaman

    Judul Asli

    RW334_26.ppt

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPT, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    44 tayangan17 halaman

    RW334 26

    Diunggah oleh

    download_all_here

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPT, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 17

    Javascript and AJAX

    Willem Visser
    RW334

    Overview

    Javascript
    jQuery
    AngularJS
    AJAX

    Javascript
    Scripting language with dynamic typing
    Most commonly used for executing inside the
    browser to interact with the Document
    Object Model (DOM)
    Can dynamically update static old HTML
    Client side validation

    Popularity faded until AJAX came along now


    it is the basis of many web development
    frameworks and even server side (NodeJS)
    Libraries such as jQuery and AnagularJS

    Javascript Example
    http://www.w3schools.com/js/tryit.asp?filename=tryjs_ev
    ents
    <html>
    <head>
    <script type="text/javascript">
    function displayDate() {

    document.getElementById("demo").innerHTML=Date();
    }
    </script>
    </head>
    <body>
    <h1>My First Web Page</h1>
    <p id="demo">This is a paragraph.</p>
    <button type="button" onclick="displayDate()">Display
    Date</button>
    </body>
    </html>

    jQuery
    Nothing more than a Javascript
    library
    Makes it much simpler to use JS to
    manipulate web-related information:
    html, events, animation and AJAX

    jQuery Example

    http://www.w3schools.com/Jquery/tryit.asp?
    filename=tryjquery_hide
    <html>
    <head>
    <script
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
    $("p").click(function(){$(this).hide();});
    });
    </script>
    </head>
    <body>
    <p>If you click on me, I will disappear.</p>
    <p>Click me away!</p>
    <p>Click me too!</p>
    </body>
    </html>

    AngularJS
    Open Source Javascript framework
    Maintained by Google and community

    Model-View-Controller philosophy that tries


    to improve decoupling and ease of testing
    Two-way data binding
    View and Model
    Changes to either triggers the other to change

    Includes templates as well


    JS <<< jQuery <<< AngularJS

    AngularJS Example

    http://viralpatel.net/blogs/angularjs-introduction-hello-worldtutorial/
    <html ng-app>
    <head>
    <title>Hello World, AngularJS</title>
    <script type="text/javascript"
    src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js
    "></script>
    </head>
    <body>
    Write some text:
    <input type="text" ng-model=thetext" />
    <h1>Hello {{ thetext }}</h1>
    </body>
    </html>

    AJAX
    Asynchronous Javascript and XML
    Client sends asynchronous request to server
    Client can continue

    Server responds with data or error


    Client handles success by displaying data
    Client handles failure
    Only part of the page gets refreshed!

    JS and AJAX
    http://html.net/tutorials/javascript/lesson18.
    php
    <html>
    <body>
    <h1>AJAX Calls - XML Response</h1>
    <div id="test>
    <h2>Click the button to get a list of programming
    languages</h2>
    <input type="button" value="Click Me!"
    <languages>
    onclick="loadXML('text.xml')" />
    <language>PHP</language>
    </div>
    <language>Ruby</language>
    <script type="text/javascript">
    <language>C#</language>
    var myRequest;
    <language>JavaScript</language>
    function loadXML(url) {
    </languages>
    myRequest = new XMLHttpRequest();
    myRequest.open("GET", url, true);
    myRequest.send(null);
    myRequest.onreadystatechange = getData;
    }
    function getData()
    </script>
    </body>

    JS and AJAX
    http://html.net/tutorials/javascript/lesson18.
    php
    function getData() {
    var myDiv = document.getElementById("test");
    if (myRequest.readyState ===4 && myRequest.status ===
    200) {
    var languages =
    myRequest.responseXML.getElementsByTagName("language");
    for (var i = 0; i < languages.length; i++) {
    var paragraph = document.createElement("p");
    myDiv.appendChild(paragraph);
    paragraph.appendChild(document.createTextNode(
    languages[i].firstChild.data));
    }
    }
    }
    To get this example to run: Start a webserver with
    python -m SimpleHTTPServer
    in the directory where the html and xml file is, open a browser to the IP indicated
    and click on the html file in the listing

    jQuery and AJAX (1)


    <html>
    <head>
    <script type="text/javascript" src="http://code.jquery.com/jquery1.7.min.js"></script>
    </head>
    <body>
    <p><a href="#">Click here to fetch HTML content</a></p>
    <div id="result>
    </div>
    <script type="text/javascript>
    $(document).ready(function() {
    $('a').click(function() {
    $('#result').load('content.html #content);
    });
    });
    <div id ="content"> some content </div>
    </script>
    <div id ="content1"> some content 1 </div>
    </body>
    </html>

    jQuery and AJAX (2)


    $(document).ready(function() {
    function processData(data) {
    var resultStr = ";
    var items = $(data).find('language');
    $(items).each(function(i) {
    resultStr += $(this).text() + '<br />;
    $('#result').html(resultStr);
    });
    }
    $('a').click(function() { $.get(text.xml,
    processData); });
    });

    jQuery and AJAX (3)


    $(document).ready(function() {
    function processData(data) { }
    function errorAlert(e, jqxhr) {
    alert("Your request was not successful: "
    + jqxhr);
    }
    $('a').click(function() {
    $.ajax({type: "GET, cache: false, url:
    text.xml,
    dataType: "xml, contentType:
    "text/html,
    success: processData,
    error: errorAlert

    AngularJS and AJAX (1)


    <head>
    <script
    src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.
    16/angular.min.js"></script>
    </head>
    <body ng-app="myapp>
    <div ng-controller="MyController" >
    <button ng-click="myData.doClick(item,
    $event)">Send AJAX
    </button>
    <br/>
    <div ng-repeat="item in myData.languages>
    {{item.language}} <br>
    </div>
    </div>

    AngularJS and AJAX (1)


    angular.module("myapp", [])
    .controller("MyController", function($scope, $http) {
    $scope.myData = {};
    $scope.myData.doClick = function(item, event) {
    var responsePromise = $http.get("text.json");
    responsePromise.success(function(data, status,
    headers,
    config) {
    $scope.myData.languages = data;
    });
    responsePromise.error(function(data, status,
    headers, config) {
    alert("AJAX failed!");
    });
    }
    }

    AngularJS Main Features


    Directives
    <div ng-repeat=actor in movie>

    2- way Data binding


    View and Model via $scope
    Note all still client side though, the server doesnt get updated until you POST
    something
    View will get updated the moment an AJAX call returns and is handled
    correctly

    Filtering
    Very powerful
    Useful for Search features

    Single Page Web Applications


    Just one HTML page but everything changes on it
    ng-view
    routes

    Anda mungkin juga menyukai