How to Use JS Calling A WebService By Post Both SOAP And JSON

• Download source - 30.48 KB

Introduction

Here is a full example of how to use JS to call a webservice by both SOAP and JSON.

Background

Now almost everybody talks about Ajax and webservices. I tried too and I wrote a JS to do the work! After reading my article, you will find things are really simple!

There is something different about my sample. It really works in Internet Explorer 6, Internet Explorer 7, Opera, and also Netscape. You will find that in Firefox3, it doesn't support the synchronism function to call a webservice. I also find that we can't create more than one instance of xmlhttprequest object in Internet Explorer 6. I fixed the problem. It really works well, but is not supported in Internet Explorer 5, because it does not support the push() function. I haven't tried to test it in Internet Explorer 5.

You might want to know that xmlhttprequest does not support the cross-domain webservice.

Using the Code

Here is the file of kuuy.SoapRequest.js:

   (function() {
    //If you read the oriented Ajax JS, it's used to register a namespace
    var Namespace = {
        Register: function(_Name) {
            var o = window;
            var x = false;
            for (var a = _Name.split("."); a.length > 0; ) {
                //remove the top element
                var s = a.shift();
                if (a.length == 0) { if (o[s]) { x = true; } }
                if (!o[s]) { o[s] = {}; }
                o = o[s];
            }
            if (x) { return 1; }
        }
    }
    Namespace.Register("kuuy");
    var xmlPId = null;
    //XMLparser,we call it ajax activeobject
    var xmlHttp = (function() {
        if (window.XMLHttpRequest) {
            return new XMLHttpRequest();
        }
        else {
            if (xmlPId) {
                return new ActiveXObject(xmlPId);
            }
            else {
                var parserIds = ["Msxml2.XMLHTTP.6.0", 
		"MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
                for (var pid in parserIds) {
                    try {
                        xmlPId = pid;
                        return new ActiveXObject(parserIds[pid]);
                    } catch (e) { }
                }
                throw new Error("don't support the xmlrequest object~!");
            }
        }
    })();
    //Parameter
    kuuy.Parameter = function() {
        return {
            Name: null,
            Value: null,
            Init: function() {
                if (arguments[0].length == 2) 
		{ this.Name = arguments[0][0]; this.Value = arguments[0][1]; }
                return this;
            }
}.Init(arguments);
        }
        //SOAPRequest,We Instanced it,and then call the method Open
        kuuy.SOAPRequest = function() {
            return {
                URL: null, //url
                Method: null, //the method we calling
                Params: null, //parameters
                Callback: null, //callback a function
                WSDLS: null, //webservice descriptions
                Init: function() {
                    switch (arguments[0].length) {
                        case 2:
                            this.URL = arguments[0][0];
                            this.Callback = arguments[0][1];
                            break;
                        case 3:
                            this.URL = arguments[0][0];
                            this.Method = arguments[0][1];
                            this.Callback = arguments[0][2];
                            this.WSDLS = new Array();
                            break;
                    }
                    this.Params = new Array();
                    return this;
                },
                AddParam: function()//add a parameter
                {
                    switch (arguments.length) {
                        case 1: this.Params.push(arguments[0]); break;
                        case 2: this.Params.push
			(new kuuy.Parameter(arguments[0], arguments[1])); break;
                    }
                },
              //Open the request
                Open: function() {
                    var obj = this;
                    if (this.WSDLS) {
                        var wsdl = this.WSDLS[this.URL];
                        if (!wsdl) {
                            xmlHttp.open
				("GET", this.URL + "?wsdl", true); //async request
                            xmlHttp.onreadystatechange = function() {
                                if (xmlHttp.readyState == 4) {
                                    if (xmlHttp.status == 200 || xmlHttp.status == 0) {
                                       //the soap request
                (function() { obj.Post.call(obj, xmlHttp.responseXML); })();
                                    }
                                }
                            };
                            xmlHttp.send(null);
                        }
                        else
                            (function() { obj.Post.call(this); })();
                    }
                    else {
                        var data = "";
                        for (var par in this.Params) {
                            data += this.Params[par].Name + 
					"=" + this.Params[par].Value;
                        }
                        xmlHttp.open("POST", this.URL, true); //asnyc request
                        xmlHttp.setRequestHeader("Content-type", 
				"application/x-www-form-urlencoded");
                        xmlHttp.setRequestHeader("Content-Length", data.length);
                        xmlHttp.onreadystatechange = function() {
                            if (xmlHttp.readyState == 4) {
                                if (xmlHttp.status == 200 || xmlHttp.status == 0) {
                                    obj.Callback(xmlHttp.responseText);
                                }
                            }
                        }
                        xmlHttp.send(data);
                    }
                },
                Post: function() {
                    if (!this.WSDLS[this.URL])
                        this.WSDLS[this.URL] = arguments[0];
                    var wsdl = this.WSDLS[this.URL];
                    var ns = (wsdl.documentElement.attributes["targetNamespace"] + 
				"" == "undefined") ? 
                    wsdl.documentElement.attributes.getNamedItem
				("targetNamespace").nodeValue : 
			wsdl.documentElement.attributes["targetNamespace"].value;
                    //method we calling
                    var soapaction = ((ns.lastIndexOf("/") 
			!= ns.length - 1) ? ns + "/" : ns) + this.Method;
                    var parsXml = "";
                    for (var par in this.Params) {
                        parsXml += "<" + this.Params[par].Name + ">" + 
			this.Params[par].Value + "</" + 
					this.Params[par].Name + ">"; ;
                    }
                    var data = "<?xml version=\"1.0\" encoding=\"utf-8\"?>" +
                        "<soap:Envelope " +
                        "xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" " +
                        "xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" " +
                        "xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\">" +
                        "<soap:Body>" +
                        "<" + this.Method + " xmlns=\"" + ns + "\">" +
                        parsXml +
                        "</" + this.Method + "></soap:Body></soap:Envelope>";
                    xmlHttp.open("POST", this.URL, true); //asyc request
                    xmlHttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
                    xmlHttp.setRequestHeader("SOAPAction", soapaction);
                    xmlHttp.setRequestHeader("Content-Length", data.length);
                    var obj = this;
                    xmlHttp.onreadystatechange = function() {
                        if (xmlHttp.readyState == 4) {
                            if (xmlHttp.status == 200 || xmlHttp.status == 0) {
                                obj.Callback(xmlHttp.responseText);
                            }
                        }
                    }
                    xmlHttp.send(data);
                }
}.Init(arguments);
            }
        })();

Then we need a class which we call EnhancedWebService in .NET 3.5. DataContractJsonSerializer makes the use of JSON easier. We also need a class we call if JSONHelper has to Serialise and DeSerialise the JSON Object.

Here is the class of JSONHelper.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Runtime.Serialization.Json;
using System.IO;
namespace kuuy.Components
{
    public class JSONHelper
    {
        //Serialize
        public static string Serialize<T>(T obj)
        {
            string reVal = string.Empty;
            using (MemoryStream m = new MemoryStream())
            {
                DataContractJsonSerializer serializer = 
			new DataContractJsonSerializer(obj.GetType());
                serializer.WriteObject(m, obj);
                reVal = Encoding.UTF8.GetString(m.ToArray());
                m.Flush();
            }
            return reVal;
        }
        //Deserialize
        public static T Deserialize<T>(string json)
        {
            return Deserialize<T>(json, Activator.CreateInstance<T>().GetType());
        }
        //Deserialize(Dynamic Type)
        public static T Deserialize<T>(string json, Type type)
        {
            T obj = Activator.CreateInstance<T>();//Instance
            using (MemoryStream m = new MemoryStream(Encoding.UTF8.GetBytes(json)))
            {
                DataContractJsonSerializer serializer = 
			new DataContractJsonSerializer(type);
                obj = (T)serializer.ReadObject(m);
                m.Flush();
            }
            return obj;
        }
    }
}

Don't forget to add the reference of System.ServiceModel.Web.

Here is the code of EnhancedWebService.cs:

using System;
using System.Collections.Generic;
using System.Text;
using System.Reflection;
using System.Runtime.Serialization;
using System.IO;
using System.Web;
namespace kuuy.Components.Services
{
    //WebService Extension
    public class EnhancedWebService : System.Web.Services.WebService
    {
        public EnhancedWebService()
            : base()	//Base Construct
        {
            string ServiceMethodName = GetMethodName();
            bool IsJSON = Context.Request.QueryString["out"] == "json";
            if (IsJSON) InterceptJSONMethodRequest(ServiceMethodName);
        }
        private string GetMethodName()//Get the method we are calling
        {
            return Context.Request.Url.Segments
		[Context.Request.Url.Segments.Length - 1];//URL Segment('\')
        } 
        private void InterceptJSONMethodRequest(string ServiceMethodName)
        {
            JSONMethodAttribute JMA = GetMethodJSONMethodAttribute
			(ServiceMethodName);//Description Class
            if (JMA == null)
            {
                Context.Response.Write("throw new Exception('The Web Service method " +
                                       ServiceMethodName + " is not available " +
                                       "as a JSON function. For more " +
                                       "information contact " +
                                       "the Web Service Administrators.');");
            }
            else
            {
                //ToDo: deserialize parameters, call target method, 
                //      deserialize and write return value
                Type Service = this.GetType();
                MethodInfo JSONMethod = 
		Service.GetMethod(ServiceMethodName);//Get Parameters
                if (JSONMethod == null) return;
                //Parameters
                ParameterInfo[] JSONMethodParameters = JSONMethod.GetParameters();
                object[] CallParameters = new object[JSONMethodParameters.Length];
              
                for (int i = 0; i < JSONMethodParameters.Length; i++)
                {
                    //Parameter
                    ParameterInfo TargetParameter = JSONMethodParameters[i];
                    string RawParameter = HttpUtility.UrlDecode
			(Context.Request.Form[TargetParameter.Name]);//Get Value
                    if (RawParameter == null || RawParameter == "")
                        throw new Exception("Missing parameter " + 
				TargetParameter.Name + ".");
                    CallParameters[i] = JSONHelper.Deserialize<object>
				(RawParameter, TargetParameter.ParameterType);
                }
                object JSONMethodReturnValue = JSONMethod.Invoke(this, CallParameters);
                string SerializedReturnValue = 
			JSONHelper.Serialize<object>
			(JSONMethodReturnValue);//Return JSON Object
                Context.Response.Write(SerializedReturnValue);
            }
            Context.Response.Flush();
            Context.Response.End();
        }
        private JSONMethodAttribute GetMethodJSONMethodAttribute
			(string WebServiceMethodName)
        {
            MethodInfo ActiveMethod = this.GetType().GetMethod(WebServiceMethodName);
            JSONMethodAttribute JMA = null;
            if (ActiveMethod != null)
            {
                object[] Attributes = ActiveMethod.GetCustomAttributes(true);
                foreach (object Attribute in Attributes)
                {
                    if (Attribute.GetType() == typeof(JSONMethodAttribute))
                    {
                        JMA = (JSONMethodAttribute)Attribute;
                    }
                }
            }
            return JMA;
        }
    }
    //WebService Description
    public class JSONMethodAttribute : System.Attribute
    {
        public JSONMethodAttribute()
        {
        }
    }
}

Now all the code is shown above. We need to make it work now. Here is my example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" >
<head>
    <title></title>
    <script src="js/kuuy.SOAPRequest.js" type="text/javascript"></script>
    <script type="text/javascript">
        var pattern = /webservice\.htm/gi;
        var callback = function(o) {
            alert(o);
        }
        function JSONRequest() {
            var url = document.location.href.replace
		(pattern, "WebService1.asmx/JSONService?out=json");
            var request = new kuuy.SOAPRequest(url, callback);
            request.AddParam("input", "88.88.88.88");
            request.Open(); 	//Send SOAP Request
        }
        function SOAPRequest() {
            var url = document.location.href.replace(pattern, "WebService1.asmx");
            var method = "JSONService";
            var request = new kuuy.SOAPRequest(url, method, callback);
            request.AddParam("input", "88.88.88.88");
            request.Open(); 	//Send SOAP Request
        }
    </script>
</head>
<body>
    <input type="button" onclick="JSONRequest()" value="JOSN"/>
    <input type="button" onclick="SOAPRequest()" value="SOAP"/>
</body>
</html>

You can download my full example. It's really simple and effective. Good luck!

Though I have no job and nobody will hire me, I never stop learning. I wish this will help you! Thanks for reading!

If you have any questions, you can email me at kuuy@hotmail.com.

History

• 2009-04-07 Initial post