代码改变世界

Ajax与WebService通讯(转载)

2010-03-31 12:32  爱研究源码的javaer  阅读(340)  评论(0编辑  收藏  举报
WebService代码:
[WebService(Namespace = "
http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
    public Service () {
    }

    [WebMethod]
    public string HelloWorld() {
        return "Hello World";
    }

    [WebMethod]
    public int AddNum(int a, int b)
    {
        return a + b;
    }
}

WebService很简单,都能看懂,现在看怎么在前台利用JAVASCRIPT调用这些方法,就举例调用AddNum方法吧,首先我写一个JS,如下:
    var xmlhttp=false;
    var objXmlDoc;
   
    function getHTTPRequestObject()
    {
        try
        {
            xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch(e)
        {
            try
            {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch(e)
            {
                xmlhttp=false;
            }
        }
       
        if(!xmlhttp && typeof XMLHttpRequest!='undefined')
        {
            xmlhttp=new XMLHttpRequest();
        }
    }

    function GetProductValue(url,action,strMain,callback)
    {
        getHTTPRequestObject();
       
        var strEnvelope="<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/\">\n"+
            " <soap:Body>\n"+
            strMain+
            " </soap:Body>"+"</soap:Envelope>";
       
        xmlhttp.open("POST",url,true);
       
        xmlhttp.onreadystatechange=function(){
            if(xmlhttp.readyState==4)
            {
                if(xmlhttp.status==200)
                {
                    objXmlDoc=new ActiveXObject("Msxml2.DOMDocument");
                    var serviceResponse=xmlhttp.responseText;
                    objXmlDoc.loadXML(serviceResponse);
                   
                    if(objXmlDoc.parseError.errorCode!=0)
                    {
                        var xmlErr=objXmlDoc.parseError;
                        alert("oops:"+xmlErr.reason);
                    }
                    else
                    {
                        callback(objXmlDoc);
                    }
                }
                else
                {
                    alert(xmlhttp.statusText);
                }
            }
           
        };
        xmlhttp.setRequestHeader("Content-Type","text/xml");
        xmlhttp.setRequestHeader("SOAPAction",action);
        xmlhttp.send(strEnvelope);
    }
    //有必要解释下,GetProductValue(url,action,strMain,callback)这个方法的几个参数的作用,
    URL,就是WebService的URL,这里是"
http://localhost:1034/WebSerive1/Service.asmx",
    ACTION,就是你要调用哪个方法,这里是"
http://tempuri.org/AddNum",http://tempuri.org是名字空间,在写WebService时在开头已经声明,
    strMain,是SOAP信封包的主体,具体见实例代码,
    callback,用过AJAX的朋友都知道,就是在结果返回后的响应函数。
好,看我如何调用吧,
HTML代码:
    <input id="Button1" type="button" value="button" onclick="getValue()" />
JAVASCRIPT代码:
    function getValue()
    {
        var url="
http://localhost:1034/WebSerive1/Service.asmx";
        var action="
http://tempuri.org/AddNum";
        var strMain="<AddNum xmlns=\"
http://tempuri.org/\"><a>1</a><b>2</b></AddNum>";
        GetProductValue(url,action,strMain,function(result){
            var items=result.getElementsByTagName("AddNumResult");
            alert(items[0].firstChild.nodeValue);
        });
    }
    //我要调用AddNum方法,参数是1和2,返回结果是个XML文挡,看截图,


    所以要进行相关处理才能得到我们想要的值。
结果如图:
    
转自 :http://hi.baidu.com/intercessor/blog/item/05358e582f9db488800a1880.html