Asynchronous JavaScript & XML (AJAX)
Technique for accessing web servers from a web page. |
Modifies only a portion of the displayed page without the need to reload the whole document file |
Enables more interactivity not possible in the traditional web applications using synchronous request and response model |
Partial Page Update
A mark up file (.cshtml) that renders HTML output wihtin another markup file's rendered output |
In controller: return(PartialView ("_viewPage", model()); |
In .cshtml: <partial name = "_viewPage" model = ("codes in here") |
Web API
REST APIs
- Stands for REpresentational State Transwer
- Operats on HTTP request/Response Protocol |
HTTP Status Code
- Sucessful Responses: 200, 201
- Redirection Response: 301
- Client Error: 400, 401, 403, 404
- Server Error: 500 |
API returning object with HTTP Status
- IActionResult return type like Web App controller
- Able to be return with HTTP response status:
Ok(200)
NotFound(404
BadRequest(400)
UnAuthorized(401) |
Media Format Support in WEB API
- XML (eXtensible Markup Language)
- JSON(JavaScript Object Notation)
- BSON(Binary JSON) |
Web API Routing - Routing maps incoming requests to specific controller and action Example: In ApiController: [Route("api/(name of controller)")]
In Browser: http://localhost/api/controller |
|
|
jQuery
load() - method is used to load data from a server and puts the returned data into the selected element.
Syntax:
$(selector).load(URL)
$(selector).load(URL, data, callback) |
getJSON() - method used to get JSON data using an AJAX HTTP GET request Syntax: $(selector).getJSON(url,data,success(data,status,xhr) Example: $.getJSON("book.json, function (result)) {$("#aaa").html(result.title);
|
append() - method to insert specified content at the end of the selected elements. Use prepend() to insert content at the beginning.
Syntax:
$(selector).append(content) |
each() - method to iterate over DOM elements, arrays and objects.
Syntax
$(selector).each(function(index, value))
$.each(collection, function(index, value)) |
serailize() - method to create a URL encoded text string by serializing form values.
Syntax
$(selector).seralize() |
ajax() - method which provides core functionality of AJAX
Syntax:
$.ajax(url)
$.ajax(url, [options]) |
Promises in JavaScript
Represents the eventual completion of an asynchronous operation and its resulting value |
Examples of 3 methods for handling promises:
-done()
-fail()
-always() |
|
|
JSON
Data Types
- Number
- String
- Boolean
- Object
- Array
- null |
Objects
- JSON objects are dictionaries.
- Enclosed with curly brackets { }
- Keys and Values can be any data type |
Arrays
- Arrays are Lists
- Enclosed with square brackets { }
- In between, a list of values separated by commas.
- Each of which ma be of any type. |
Nesting
- Nesting Involves putting arrays and objects inside each other
- Arrays can be put inside objects, objects inside arrays, and so on.
- A JSON file can be one BIG object with lots of objects and arrays inside |
Promises in JavaScript
Represents the eventual completion of an asynchronous operation and its resulting value |
Examples of 3 methods for handling promises:
-done()
-fail()
-always() |
Web API
REST APIs
- Stands for REpresentational State Transwer
- Operats on HTTP request/Response Protocol |
HTTP Status Code
- Sucessful Responses: 200, 201
- Redirection Response: 301
- Client Error: 400, 401, 403, 404
- Server Error: 500 |
Web API
REST APIs
- Stands for REpresentational State Transwer
- Operats on HTTP request/Response Protocol |
HTTP Status Code
- Sucessful Responses: 200, 201
- Redirection Response: 301
- Client Error: 400, 401, 403, 404
- Server Error: 500 |
|
