SharePoint Journey: JQuery -Ajax 5 Method

Sunday, September 6, 2015

JQuery -Ajax 5 Method

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AllCode.aspx.cs" Inherits="AjaxApp.AllCode" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script lang="javascript" type="text/javascript">
var ajax_load = "loading...";

// load() functions Load Grid view Fromanother page on Page Loads
var loadUrl1 = "GridView.aspx";//load page
$(document).ready(function () {
$("#resultload").html(ajax_load).load(loadUrl1, function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#dvError").html(msg + xhr.status + " " + xhr.statusText);
}
}
);
return false;
});

// load() functions
//var loadUrl = "TestPage.htm";//error
//var loadUrl = "TestPage.htm #dvContainer"; //load part of page
var loadUrl = "GridView.aspx";//load page
$(document).ready(function () {
$("#load_basic").click(function () {
$("#result").html(ajax_load).load(loadUrl, function (response, status, xhr) {
if (status == "error") {
var msg = "Sorry but there was an error: ";
$("#dvError").html(msg + xhr.status + " " + xhr.statusText);
}
}
);
return false;
});

var jsonUrl = "Json.htm";
$("#btnJson").click(function () {
$("#dvJson").html(ajax_load);

$.getJSON(jsonUrl, function (json) {
var result = json.name;
$("#dvJson").html(result);
}
);
return false;
});

var getUrl = "GETAndPostRequest.aspx";
$("#btnGet").click(function () {
$("#dvGet").html(ajax_load);

$.get(getUrl, { Name: "Pranay" }, function (result) {
$("#dvGet").html(result);
}
);
return false;
});

var postUrl = "GETAndPostRequest.aspx";
$("#btnPost").click(function () {
$("#dvPost").html(ajax_load);

$.post(postUrl, { Name: "Hanika" }, function (result) {
$("#dvPost").html(result);
}
);
return false;
});

var ajaxUrl = "Json.htm";
$("#btnAjax").click(function () {
$("#dvAjax").html(ajax_load);
$.ajax({
type: "GET", //GET or POST or PUT or DELETE verb
url: ajaxUrl, // Location of the service
data: "", //Data sent to server
contentType: "", // content type sent to server
dataType: "json", //Expected data format from server
processdata: true, //True or False
success: function (json) {//On Successfull service call
var result = json.name;
$("#dvAjax").html(result);
},
error: ServiceFailed// When Service call fails
});

return false;
});

});

function ServiceFailed(xhr) {
alert(xhr.responseText);
if (xhr.responseText) {
var err = xhr.responseText;
if (err)
error(err);
else
error({ Message: "Unknown server error." })
}
return;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="resultload">
</div>

<button id="load_basic" value="Load">
Load</button>
<div id="result">
</div>
<button id="btnJson" value="Load">
Json Data</button>
<div id="dvJson">
</div>
<button id="btnGet" value="Get">
Get</button>
<div id="dvGet">
</div>
<button id="btnPost" value="Post">
Post</button>
<div id="dvPost">
</div>
<button id="btnAjax" value="Ajax">
Ajax</button>
<div id="dvAjax">
</div>
<div id="dvError">
</div>
</div>
</form>
</body>
</html>

***********************************Json.htm *************************************

{
"name": "Hemang Vyas nwoe Here you kai tdbhn swad eikmf djjf dlls dfdsk dsfkdsfs dfjdf dsfskkf",
"age" : "32",
"sex": "Male"
}

****************************** GETAndPostRequest Page **************************

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GETAndPostRequest.aspx.cs" Inherits="AjaxApp.GETAndPostRequest" %>

<!DOCTYPE html>

</head>

<body>

<div>

<asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>

<asp:Label ID="txtName" runat="server" ></asp:Label>

</div>

</form>

</body>

</html>