I hope everything is well. In this article I am trying to show a SQL Server data on the front end. I am quite sure everyone uses Facebook. Facebook data is received and sent in the database without a complete page reload. If you comment on any post then your comments are added to the database without a complete page reload. This type of technique isn't possible without Ajax and jQuery.
Ajax
AJAX stands for Asynchronous JavaScript and XML.
Ajax is a special types of technique to get data without a complete page reload, only some portion is reloaded like Facebook, Gmail, YouTube and many other sites.
![]()
JavaScript
A scripting language is a lightweight programming language. It's called a client-side script. It works only client-side, in other words it does not work on the server side. The JavaScript code can be inserted into any HTML page and it can be executed by all web browsers. JavaScript is easy to learn.
![]()
Ok that was the basic concepts of JavaScript and Ajax. If you like more information about JavaScript and Ajax then check out the link http://www.w3schools.com/js/js_intro.asp.
Getting to my main point of how to get data from the SQL Server through Ajax.
No data is in the div provided below and no make any type of design.
<form id="form1" runat="server" style="border-style: groove;">
<div id="dvContent">
<div style="float:left;">
<input id="Button1" type="button" onclick="thischeck()" value="Get Value" />
</div>
<div style="float:right; margin-right:500px; color:Red; font-size:larger;"> Welcome to My Blog....</div>
You can check the above HTML code. Here there is no design pattern and no data is available.
My data is provided at runtime without a page reload and also it creates a proper Design Pattern.
My SQL Server data is:
![]()
This data comes on my web page every time the button is clicked.
Convert the data table value in XML value. This code works on in the code behind in the C# language. Here is a snippet of code:
using (StringWriter st = new StringWriter())
{
dt.WriteXml(st);
result = st.ToString();
}
![]()
I know you have many types of questions and might be totally confused. What is dt and the result and which type of data type are they. Dt is a data table and Result is a String data type.
Dt has the following type of data:
![]()
The DataTabe name is "name". It's contains three four columns and six rows.
This table converted to XML is like this:
![]()
dt.WriteXml(st);
result = st.ToString();
After converting data into XML file show like this
[System.Web.Services.WebMethod]
public static string _testing()
{
}
Then the data is returned as a string data type.
![]()
In the picture above you can see URL is a way of getting data and the location. The picture above clearly shows why we use the URL in ajax.
Get data without a full page post-back. I think you know very well when we click the button it fires an event button click event. The full page is post back but in this condition no page is post back and the same session id and the same Request type is GET. Check in the following picture.
![]()
Test is a function for when the click gets a value then this function is fired.
JavaScript code.
function test() {
var testable = $("#dvContent");
$.ajax({
type: "post",
url: "Default.aspx/_testing",
contentType: "application/json; charset=utf-8",
dataType: 'json',
success: function (myxml) {
$(myxml.d).find('name').each(function () {
$("<li></li>").html("SrNo");
$("#dvContent");
var sTitle = $(this).find('srno').text().fontcolor("Blue");
var bookname = $(this).find('bookname').text();
var sPublisher = $(this).find('publisher').text();
var picture = $(this).find('pc').text();
var newRow = $("<tr><td>Hi</td></tr>").css("border-width", "2px").css("border-style", "groove");
$("<li></li>").html(sTitle + " | " + bookname + "|" + sPublisher).appendTo("#dvContent ").append("<img src=" + picture + " alt= '' ");
});
$("#dvContent").append("<hr/>");
},
error: function () {
alert ("An error occurred while processing XML file.");
}
});
};
Advantage
Performance is improved.
No complete page reloading again and again.
Easy to use and understand.
Lightweight technique.
Disadvantage
If JavaScript in your browser is dissabled then this won't work. Everythis is lost.
Security is very low against the code behind programming.
Conclusion
It's a lightweight technique to get data at run time.