Before you begin with the client-side code, you should have a server code that will respond to all the requests coming from your client-server code. In this case, I've created a web service to handle the requests. Notice the green comments.
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.Script.Serialization;
- using System.Web.Script.Services;
- using System.Web.Services;
- using System.Xml.Linq;
-
- namespace DataReaderService
- {
-
-
-
- [WebService]
-
- [System.ComponentModel.ToolboxItem(false)]
-
- [System.Web.Script.Services.ScriptService]
- public class EmpReader : System.Web.Services.WebService
- {
- [WebMethod]
- [ScriptMethod(ResponseFormat = ResponseFormat.Json) ]
- public string getEmpData(string id)
- {
-
- List<employee> emps = new List<employee>();
-
-
- var employee = XElement.Load( Server.MapPath("Employees.xml") );
-
-
- var emp = from q in employee.Elements("Employee")
- where q.Element("EmpId").Value == id
- select q;
-
-
- if (emp.Count()==0) { return "no data"; }
-
-
- foreach (var element in emp)
- {
-
- var e = from j in element.Elements("Phone")
- select j;
-
- object[] phones = e.ToArray();
-
- emps.Add(new employee { Name = element.Element("Name").Value, gender = element.Element("Sex").Value, Address = element.Element("Address").Value, HomePhone = ((XElement)phones[0]).Value , WorkPhone=((XElement)phones[1]).Value });
- }
-
-
- return new JavaScriptSerializer().Serialize(emps);
- }
- }
-
- public class employee
- {
- public string Name { get; set; }
- public string gender { get; set; }
- public string HomePhone { get; set; }
- public string WorkPhone { get; set; }
- public string Address { get; set; }
- }
- }
You may change how the server handles the requests to add more functionality. Now it's time to write our client-side code, and here are some different ways:
Classic JavaScript
- var xhttp = new XMLHttpRequest();
- xhttp.onreadystatechange = function () {
- if (xhttp.readyState == 4 && xhttp.status == 200) {
- var server_data = xhttp.responseXML;
-
-
- var XMLData = server_data.getElementsByTagName("string")[0].childNodes[0].nodeValue;
-
-
- if (XMLData != "no data") {
- $("#txtResult").val(XMLData);
-
-
- var Result = JSON.parse(XMLData);
-
-
- $("#table_results").append("<tr><th>Name</th><th>Gender</th><th>Address</th><th>Home Phone</th><th>Work Phone</th></tr>");
-
-
- $("#txtResult").val(Result[0].Name);
- $("#table_results").append("<tr><td>" + Result[0].Name + "</td><td>" + Result[0].gender + "</td><td>" + Result[0].Address + "</td><td>" + Result[0].HomePhone + "</td><td>" + Result[0].WorkPhone + "</td></tr>");
-
-
- } else { $("#txtResult").val("No Data found"); }
- }
- };
- xhttp.open("POST", "http://localhost:56998/EmpReader.asmx/getEmpData", true);
- xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
- xhttp.send("id=" + $("#txtEmpId").val() );
Using $.post method
- $.post("http://localhost:56998/EmpReader.asmx/getEmpData",
- { id: $("#txtEmpId").val() },
- function (data) {
-
- var data_packet = data.getElementsByTagName("string")[0].childNodes[0].nodeValue;
-
-
- if (data_packet == "no data") $("#txtResult").val("No Data Found");
- else
- {
-
- var json_data = JSON.parse(data_packet);
-
- $("#txtResult").val(json_data[0].Name);
-
-
-
- $("#table_results").append("<tr><th>Name</th><th>Gender</th><th>Address</th><th>Home Phone</th><th>Work Phone</th></tr>");
-
-
- $("#table_results").append("<tr><td>" + json_data[0].Name + "</td><td>" + json_data[0].gender + "</td><td>" + json_data[0].Address + "</td><td>" + json_data[0].HomePhone + "</td><td>" + json_data[0].WorkPhone + "</td></tr>");
- }
-
- });
Using $.ajax method
- $.ajax({
- type: "POST",
- contentType: "application/json; charset=utf-8",
- url: "http://localhost:56998/EmpReader.asmx/getEmpData",
- data: '{id:"' + $("#txtEmpId").val() + '"}',
- dataType: "json",
- success: function (data) {
-
-
- if (data.d != "no data") {
-
-
- var Result = JSON.parse(data.d);
-
-
- $("#table_results").append("<tr><th>Name</th><th>Gender</th><th>Address</th><th>Home Phone</th><th>Work Phone</th></tr>");
-
- $("#txtResult").val(Result[0].Name);
- $("#table_results").append("<tr><td>" + Result[0].Name + "</td><td>" + Result[0].gender + "</td><td>" + Result[0].Address + "</td><td>" + Result[0].HomePhone + "</td><td>" + Result[0].WorkPhone + "</td></tr>");
- } else { $("#txtResult").val("No data found"); }
- },
- error: function (result) {
- alert("Error reading data");
- }
- });
Using AngularJS
- var app = angular.module("NGMainApp", []);
-
-
- app.controller("MainController", function ($scope, $http) {
-
-
-
- $scope.LoadEmpData = function (variable) {
- document.getElementById("span1").innerText = variable;
-
-
- var sentPacket = {
- method: 'POST',
- url: 'http://localhost:56998/EmpReader.asmx/getEmpData',
- headers: {
- 'Content-Type': 'application/json'
- },
- data: { "id": $scope.NGEmpID }
- }
-
- $http(sentPacket).then(function (response) {
-
-
- if (response.data.d != "no data") {
- $scope.IsVisible = true;
- $scope.contents = JSON.parse(response.data.d);
- } else { $scope.IsVisible = false; }
-
- });
- }
-
- });
Notice: In methods 1 and 2, we get the response from the server as XML node and parse it as JSON data.
Due to the size limit, I uploaded the project
here.
Decryption code: !1GKQNhG3V4OT3EstM14ayPYd6-j4VOz7ry_c_UKUpIw