JSFiddle - React, Tailwind, and code Playground

by Abid Shaik

HTML

<!-- jQuery Demo -->
<h2>jQuery Demo</h2>
<div class="container">
  <div class='row'>
    <div id="ajaxResult" class='col-md-12'>12 column in this row</div>
  </div>
</div>

CSS

h2 {
  color: blue;
  text-align: center;
}

JavaScript

$(document).ready(function() {

  var params = '{ "securityInfo" : {"ClientId":"1","CenterId":"1","Username":"dropbox","Password":"gonoles"}, "contactId":"1"}';

  $.ajax({
    url: 'http://doradobeach.brightdoor.com/wcfws/WS.svc/GetAllProducts',
    type: "POST",
    dataType: "json",
    data: params,
    processData: false,
    contentType: "application/json;",
    success: function(a, b, c) {
      $("#ajaxResult").html(c.responseText);
    },
    error: function(x, e) {
      console.log(x);
      console.log(e);
    }


  });

});

/*
$.ajax options 
html -> for HTML to insert into doc 
xml -> for XML documents 
json-> parsed using Browsers native JSON parse 
jsonp-> for remote resources Gets around same origin policy 
Response acts like a function with a JSON string as its argument. Jquery calls it and Parses the JSON 

like instead of sending {"foo": "bar"} it sends like jqueryTIMESTAMP({"foo"; "bar"}); like a javascript function.  


*/
/*
traditional way of calling WS 
var url = "http://doradobeach.brightdoor.com/wcfws/WS.svc/GetAllProducts";
var params = '{ "securityInfo" : {"ClientId":"1","CenterId":"1","Username":"UNAME","Password":"PASS"}, "contactId":"1"}'; 
var ajaxRequest = null;

		if (typeof XMLHttpRequest != "undefined") {
			ajaxRequest = new XMLHttpRequest();
		} else if (window.ActiveXObject) {
			ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}

		ajaxRequest.open("POST", url, true);
		ajaxRequest.onreadystatechange = callback;
	ajaxRequest.setRequestHeader("Content-Type", "application/json;");
		//ajaxRequest.setRequestHeader("Connection", "close");
		
		ajaxRequest.send(params); 

		function callback(obj) {
			 if(ajaxRequest.readyState == 4) {
          console.log(ajaxRequest.responseText);
        }
    } 
*/