Ajax 调用 WebService

XMLHttpRequest对象的属性:
onreadystatechange 指定当readyState属性改变时的事件处理
readystate 返回当前请求的状态
responseBody 以unsigned byte数组形式返回
responseStream 以Ado Stream对象的形式返回
responseText 作为字符串返回
responseXML 将响应的信息格式为Xml Document对象返回
status 当前请求的HTTP状态码
statusText 返回当前请求的响应行状态

XMLHttpRequest对象的方法:
abort
getAllResponseHeaders
getResponseHeader
open
send
setRequestHeader

===========================================================
下面是一个完整的实例
===========================================================
ajax_service.cs (webService文件Ajax_Service.asmx的后台)

 1 using  System;
 2 using  System.Web;
 3 using  System.Collections;
 4 using  System.Web.Services;
 5 using  System.Web.Services.Protocols;
 6
 7
 8 /**/ /// <summary>
 9/// Ajax_Service 的摘要说明
10/// </summary>
11 [WebService(Namespace  =   " http://tempuri.org/ " )]
12 [WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
13 public   class  Ajax_Service : System.Web.Services.WebService  {
14
15    public Ajax_Service () {
16
17        //如果使用设计的组件，请取消注释以下行 
18        //InitializeComponent(); 
19    }
20
21    [WebMethod]
22    public string HelloWorld() {
23        return "Hello World";
24    }
25
26
27    /**//*
28     返回a+b的和
29     */
30    [WebMethod]
31    public int Sum(int a,int b)
32    {
33        return a + b;
34    }
35    
36}
37
38

前台文件:Ajax_Service.aspx

 1 <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " Ajax_Service.aspx.cs "  Inherits = " Ajax_Service "   %>
 2
 3 <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 4
 5 < html xmlns = " http://www.w3.org/1999/xhtml "   >
 6 < head runat = " server " >
 7      < title > Ajax_WebService </ title >
 8     
 9      < script type = " text/javascript " >
10     
11         var xmlhttp;
12         
13         function createXmlhttp()
14          {
15            if(window.XMLHttpRequest)
16            {
17                xmlhttp = new XMLHttpRequest();
18            }
19            else if(window.ActiveXObject)
20            {
21                try
22                {
23                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
24                }
25                catch(e)
26                {
27                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
28                }
29            }
30            
31            if(!xmlhttp)
32            {
33                alert('您的浏览器不支持XMLHttpRequest');
34            }
35            return xmlhttp;          
36        }
37         
38         function SumIt()
39          {
40            createXmlhttp();
41            var url = "http://localhost:8051/Ajax_Service.asmx/Sum";
42            var queryString = createQueryString();
43            xmlhttp.open("POST",url,true);
44            xmlhttp.onreadystatechange = handleStateChange;
45            xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;");
46            xmlhttp.send(queryString);
47        }
48         
49         
50         function createQueryString()
51          {
52            var a = document.getElementById('txbA').value;
53            var b = document.getElementById('txbB').value;
54            var queryString = 'a='+a+'&b='+b;
55            return queryString;
56        }
57         
58         function handleStateChange()
59          {
60            if(xmlhttp.readyState == 4)
61            {
62                if(xmlhttp.status == 200)
63                {
64                    displayResult();
65                }
66            }
67        }
68         
69         function displayResult()
70          {
71            var result = document.getElementById('lblResult');
72            result.innerText = '计算结果:' + xmlhttp.responseXML.getElementsByTagName('int')[0].firstChild.data;
73            
74        }
75         
76      </ script >
77     
78 </ head >
79 < body >
80      < form id = " form1 "  runat = " server " >
81      < div >
82     
83          < input type = " text "  id = " txbA "   />
84          < input type = " text "  id = " txbB "   />
85          < input type = " button "  id = " btm "  value = " 计算 "  onclick = " SumIt(); "   />
86         
87          < label id = " lblResult " ></ label >  
88      </ div >
89      </ form >
90 </ body >
91 </ html >
92

 

 

转载：Ajax 调用 WebService 简单例子