C# Guide - C#, Asp.Net, MVC, LINQ, jQuery and SharePoint Resources

Showing posts with label Ajax. Show all posts

Saturday, July 25, 2015

AngularJS Ajax Overview

Ajax using AngularJS

AngularJS Ajax using $http

AngularJS Ajax using $http JSONP

How JSONP enables cross-site request

$http vs JSONP for cross-site request

AngularJS $http.get Ajax calls

AngularJS $http.post Ajax calls

AngularJS $http.delete Ajax calls

Monday, July 20, 2015

How JSONP enables cross-site request

In the previous post AngularJS Ajax using$http JSONP we saw on using JSONP to make cross-site requests, i.e the AnjularJS client and the service/API are located in different domains, by default browsers do not allow cross-site Ajax requests.

JSONP stands for JSON with padding, JSONP enables cross-site requests using the <script> tag, normal $http requests are sends server request URL as plain text, hence browsers reject the requests made to different domains, JSONP pads the requests within <script> tags and sends it to the server, browsers do not enforce same-origin validation for content in the <script> tag hence JSONP requests by-pass the validations and thereby enable us to make cross-site requests from the client to the server.

AngularJS Ajax using $http JSONP

In the previous post AngularJS Ajax using $http, we saw on how to make Ajax calls in AngularJS using $http, we also saw that we cannot make cross site calls using the $http service, but in practical situations we might have to call services/APIs deployed in a different server/domain, example could be making service / API calls to 3^rd part services which are deployed in the Vendor’s server.

To overcome this, the $http service supports making Ajax calls using JSONP, the normal Ajax calls made using $http use the XMLHttpRequest object which does not support cross site referencing, however we can modify the request a bit to make JSONP calls to support cross domain.

The syntax for making JSONP Ajax calls using $http is as follows

$http({
       method: 'JSONP',
       url: 'serviceURL'?callback=JSON_CALLBACK'
}).success(function(data, status, headers, config)
{
           // Process response for Success here
}).error(function(data, status, headers, config)
{
          // Process response for Failure here
});

AngularJS Ajax using $http

In the previous post Ajax using AngularJS, we saw on what Ajax is and its need in modern web development tools, in this post we shall see on Ajax is supported in AngularJS using the $http service.

$http is an important service in AngularJS which helps in making Ajax calls to the server, $http takes the service URL to be invoked as a parameter, makes calls to the server gets the response and service and passes it back to Angular

The syntax for making Ajax calls using $http is as follows

$http.get('serviceURL').
success(function(data, status, headers, config) {
// Process response for Success here
}).
error(function(data, status, headers, config) {
// Process response for Failure here
});

The $http Ajax calls supports methods success() and error() to handle the response from the server end, the method names are self-descriptive they are used to handle success and error scenarios from the Ajax calls.

$http supports Get, Post, Put and Delete operations, all these take the service URL as parameters, the Post and Put variant in addition takes the Post data which is to be submitted to the service.

The $http service communicates with the server using XMLHttpRequest, due to this Ajax calls made using $http should be within the same domain, i.e both the client application and the service should be hosted in the same domain, calls made to a service/API in a different domain will fail.

Ajax using AngularJS

Ajax stands for Asynchronous JavaScript and XML, as the name suggests Ajax is used for asynchronous operations between the client and the server. Here by client we refer to the AngularJS layer and by server we refer to the API Server/Service.

jQuery getScript Method

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc to make an Ajax call. In this post we shall see on how to use the getScript() method to make an Ajax call.

The getScript() method is used to receive and process JavaScript data response from the server. The Syntax for the getScript() method is as follows.

$.getScript("<server URL>");

The script which is returned from the server is directly executed in the browser.

Related Post
jQuery getJSON Method
jQuery getJSON Example
jQuery getScript Method
jQuery getScript Example

jQuery getScript Example

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc to make an Ajax call. In this post we shall see on how to use the getScript() method to make an Ajax call.

The following example receives a getScript data from the server and executed it in the browser

.aspx Page (Client Side)

<title>jQuery Ajax getJSON</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get Script Response data from the Server

$('#btnGetScript').click(function(event) {

event.preventDefault();

$.getScript("AjaxData.js");

});
});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnGetScript"

runat="server"

Text="Get Script" />

</td>

</tr>

</table>

</form>

</body>

</html>

.AjaxData.js(Server Side)

alert("Hi, i am from the Server");

Related Post
jQuery getJSON Method
jQuery getJSON Example
jQuery getScript Method
jQuery getScript Example

jQuery getJSON Example

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc to make an Ajax call. In this post we shall see on how to use the getJSON () method to make an Ajax call.

The following example receives a JSON format data from the server and displays the data in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax getJSON</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Get JSON Response data from the Server

$('#btnGetJSON').click(function(event) {

event.preventDefault();

var jsonContent = "";

var jsonObj;

$.getJSON("AjaxData.json", function(result) {

for (var x = 0; x < result.length; x++) {

jsonContent += result[x].Name;

jsonContent += "-";

jsonContent += result[x].Age;

jsonContent += "</br>";

}

$("#divJSON").html(jsonContent);

}

);

});
});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<td>

<asp:Button

ID="btnGetJSON"

runat="server"

Text="Get JSON" />

</td>

</td>

</tr>

</table>

</form>

</body>

</html>

.AjaxData.json(Server Side)

[{"Name": "John", "Age": "34"}, {"Name": "David", "Age":"24"}]

jQuery getJSON Method

jQuery provides various methods like ajax, load, get, post, getJSON, getJSON etc to make an Ajax call. In this post we shall see on how to use the getJSON () method to make an Ajax call.

The getJSON() method is used to process JSON data response from the server.

The Syntax for the getJSON() method is as follows.

jQuery HTTP POST Request Example

The jQuery post() ajax method supports HTTP POST requests. In this post we shall see on how to send a HTTP POST request to the server.

The syntax for sending a HTTP POST request using the post() method is as follows.

$.post("<Server URL>",<POST parameters>, successHandlerFunction(…));

The following example sends a HTTP POST request to the server using the post() method and displays the data returned by the server in a DIV tag in the browser.

.aspx Page (Client Side)

<title>jQuery Ajax Post</title>

<script

type="text/javascript"

language="javascript">

$(document).ready(function() {

// Send HTTP Get Request

$('#btnHttpPOSTRequest').click(function(event) {

event.preventDefault();

$.post("AjaxData.aspx", { ID: "1" }, function(result) {

$("#divPOSTRequest").html(result);

}

);

});
});

</script>

</head>

<body>

<tr>

<td><b>Action</b></td>

<td><b>Response</b></td>

</tr>

<tr>

<td>

<asp:Button

ID="btnHttpPOSTRequest"

runat="server"

Text="HTTP POST Request" />

</td>

<td>

</td>

</tr>

</table>

</form>

</body>

</html>

AjaxData.aspx.cs (Server Side)

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Xml.Linq;

namespace jQuery

{

public partial class AjaxData : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if ((Request.Form != null)&&(Request.Form.Count > 0))

{

// Process HTTP POST Request

string strFilterID = Request.Form["ID"].ToString();

List<clsContacts> lstContacts = getContactByID(strFilterID);

Response.Write(buildHTML(lstContacts));

}

private List<clsContacts> getContactList()

{

List<clsContacts> lstContacts = new List<clsContacts>();

lstContacts.Add(new clsContacts("1","John", "34"));

lstContacts.Add(new clsContacts("2", "David", "24"));

return lstContacts;

}

private List<clsContacts> getContactByID(string filterKey)

{

List<clsContacts> lstContacts = new List<clsContacts>();

lstContacts.Add(new clsContacts("1", "John", "34"));

lstContacts.Add(new clsContacts("2", "David", "24"));

var filteredContacts = from c in lstContacts

where c.ID.Equals(filterKey)

select c;

return filteredContacts.ToList();

}

private string buildXML(List<clsContacts> lstContacts)

{

XElement contactsXML = new XElement("Contacts");

foreach (clsContacts objContact in lstContacts)

{

contactsXML.Add(

new XElement("Contact",

new XElement("Name", objContact.Name),

new XElement("Age", objContact.Age)

)

);

}

return contactsXML.ToString();

}

private string buildHTML(List<clsContacts> lstContacts)

{

string strHTML = ""

;

strHTML += "
Name
Age
";

XElement contactsXML = new XElement("Contacts");

foreach (clsContacts objContact in lstContacts)

{

strHTML += "
"
+ objContact.Name + "

" + objContact.Age + "";

}

return strHTML;

}

public class clsContacts

{

public string _id;

public string _name;

public string _age;

public clsContacts(string strID, string strname, string strAge)

{

this._id = strID;

this._name = strname;

this._age = strAge;

}

public string ID

{

get { return _id; }

set { _id = value; }

}

public string Name

{

get { return _name; }

set { _name = value; }

}

public string Age

{

get { return _age; }

set { _age = value; }

}