CHAPTER 8 AJAX JSON WHAT IS AJAX Ajax
- Slides: 64
CHAPTER 8 AJAX & JSON
WHAT IS AJAX?
Ajax lets you…
1
1 Request data from a server
1 Request data from a server 2
1 2 Request data from a server Load it without refreshing the entire page
It uses an asynchronous processing model. (Users can do other things while the data is loading. )
1 THE REQUEST The browser requests information from the server
1 THE REQUEST The browser requests information from the server ON THE SERVER The server responds with data (usually HTML, XML, or JSON)
1 THE REQUEST The browser requests information from the server 2 ON THE SERVER THE RESPONSE The server responds with data (usually HTML, XML, or JSON) The browser processes the content and adds it to the page
REQUEST
Web browsers use the XMLHttp. Request object to implement Ajax functionality.
Here, an instance of the object is stored in a variable called xhr: var xhr = new XMLHttp. Request;
The. open() method prepares the request: var xhr = new XMLHttp. Request; xhr. open(‘GET’, ‘test. json’, true);
The first argument can be either HTTP GET or POST: var xhr = new XMLHttp. Request; xhr. open(‘GET’, ‘test. json’, true);
The second argument specifies the file to be loaded: var xhr = new XMLHttp. Request; xhr. open(‘GET’, ‘test. json’, true);
The third argument states whether the request is asynchronous or not: var xhr = new XMLHttp. Request; xhr. open(‘GET’, ‘test. json’, true);
An additional line is then written to send the request: var xhr = new XMLHttp. Request; xhr. open(‘GET’, ‘test. json’, true); xhr. send(‘search=arduino’);
RESPONSE
When the server has responded, the onload event calls an anonymous function: xhr. onload = function() { // process response };
A property of the object called status is then used to make sure the data loaded okay: xhr. onload = function() { if (xhr. status === 200) { // process response } };
IE 9 was the first version of IE to support this way of dealing with Ajax responses.
DATA FORMATS: HTML
HTML is the simplest way to get data into a page: <div class="event"> <img src=“img/map-ny. png" alt="New York, NY” /> <p><b>New York, NY</b> May 30</p> </div>
It is available in the response. Text property of the object: $el. inner. HTML = xhr. response. Text;
The browser renders this HTML like any other HTML no extra work required.
DATA FORMATS: XML
XML looks like HTML but the tags contain different words: <event> <location>New York, NY</location> <date>May 15</date> <map>img/map-ny. png</map> </event>
It is available in the response. XML property of the object: var events = xhr. response. XML;
You need to write Java. Script to convert the XML data into HTML so it can be displayed.
DATA FORMATS: JSON
JSON looks like object literal syntax but it is just data, not an object: { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” }
It is available in the response. Text property of the object: var events = xhr. response. Text;
You need to write Java. Script to convert the JSON into HTML so it can be displayed.
JSON data is made up of keys and values: { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” }
JSON data is made up of keys and values: { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” }
The value can be a string, number, Boolean, array, object or null. You can nest objects.
{ “events”: [ { “location”: “Austin, TX”, “date”: “May 15”, “map”: “img/map-tx. png” }, { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” } ] }
{ “events”: [ { “location”: “Austin, TX”, “date”: “May 15”, “map”: “img/map-tx. png” }, { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” } ] }
{ “events”: [ { “location”: “Austin, TX”, “date”: “May 15”, “map”: “img/map-tx. png” }, { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” } ] }
{ “events”: [ { “location”: “Austin, TX”, “date”: “May 15”, “map”: “img/map-tx. png” }, { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” } ] }
Java. Script has a JSON object with two important methods: 1: Convert a Java. Script object to a string: JSON. stringify(); 2: Convert a string to a Java. Script object: JSON. parse();
JSONP
Ajax only works with data from the same domain. To get around this, you can use JSONP.
First, a function is included in the HTML page to process the JSON data and display it on the page: <script> function show. Events(data) { // code to process & display data } </script>
Next, a <script> element calls the JSON data from a remote server: <script> function show. Events(data) { // code to process & display data } </script> <script src=“http: //example. org/jsonp”> </script>
The script then calls the function that was in the browser and passes the data to it as an argument: show. Events({ “events”: [ { “location”: “New York, NY”, “date”: “May 30”, “map”: “img/map-ny. png” }. . . ] });
JQUERY & AJAX
j. Query provides methods to handle Ajax requests / responses: WORKS ON SELECTION GLOBAL METHODS OF j. Query OBJECT . load() $. get() $. post() $. get. JSON() $. get. Script() $. ajax()
The. load() method returns the content into the j. Query selection: $(‘#text’). load(‘ajax. html #text’);
The element the content will be loaded into: $(‘#text’). load(‘ajax. html #text’);
The URL of the file to load comes first in the argument: $(‘#text’). load(‘ajax. html #text’);
You can specify a fragment of the page to show (not the whole page): $(‘#text’). load(‘ajax. html #text’);
The other global Ajax methods return their data in the jqxhr object. The jqxhr object has the following properties and methods: PROPERTIES response. Text response. XML status. Text METHODS . done(). fail(). always(). abort()
j. Query provides four shorthand methods to handle specific types of Ajax requests.
url data callback type where the data is fetched from extra information for the server function to call when data returned type of data to expect from server
url data callback type where the data is fetched from extra information for the server function to call when data returned type of data to expect from server $. get(url[, data][, callback][, type])
url data callback type where the data is fetched from extra information for the server function to call when data returned type of data to expect from server $. get(url[, data][, callback][, type]) $. post(url[, data][, callback][, type])
url data callback type where the data is fetched from extra information for the server function to call when data returned type of data to expect from server $. get(url[, data][, callback][, type]) $. post(url[, data][, callback][, type]) $. get. JSON(url[, data][, callback])
url data callback type where the data is fetched from extra information for the server function to call when data returned type of data to expect from server $. get(url[, data][, callback][, type]) $. post(url[, data][, callback][, type]) $. get. JSON(url[, data][, callback]) $. get. Script(url[, callback])
There also methods that help you deal with an Ajax reponse if it fails: . done(). fail(). always() when request complete when request fails complete / fail
- Json associative array
- Yandex image search
- Json stand for
- Json xml alternatives
- Json format
- Json markup language
- Json linked data
- Json windows 10
- Cl_trex_json_serializer
- Github rapidjson
- Dom to json
- Dwd json
- Jws json serialization
- Microsoft windows logos
- Nlohmann json vcpkg
- Embulk json
- Awailability
- Php is json
- "keys.json" mongodb google cloud
- Yahoo json
- Xml to json jquery
- From json to html table softuni
- "keys.json" mongodb google cloud
- 9gag api json
- Google maps ajax
- Achilles and ajax playing dice
- Ajax stands for
- Dynatrace ajax
- Frenotomy ajax
- Pinewood detox
- Ajax updater
- Java ajax framework
- Asbetose
- Shoah e sport
- Microsoft ajax content delivery network
- Wwv_flow.ajax
- Security issues in ajax
- Asynchronous javascript and xml
- What is ajax
- Ajax cs
- Mia ajax
- Ajax
- Dwr vs ajax
- Ajax mbti
- Ajax vs wsb
- Ajax patterns
- Rich internet applications with ajax
- Ajax svg
- Lab ajax
- Jquery sqlite example
- Introduction to ajax
- Slideshare
- Exekias achilles and ajax playing a dice game
- Easyajax
- Ajax scales
- Ajax overview
- Ajax parsererror
- Ajax
- Ajax 페이징 처리 예제
- Jsp ajax 예제
- Lathe machine grinding attachment
- Ajax avanzado
- Ajax
- Cassandra solomon
- Ajax introduction