Ajax打開三種頁面的請求

xmlhttprequest對象可以打開兩種方式的頁面請求

1，.asmx格式的webservice頁面。

2，.aspx格式的web窗體

其中web窗體可以是調用一新建的web窗體，同時調用和被調用頁面可以是同一個頁面，表達的可能不夠清楚，還是看示例吧。

 

一、調用.asmx格式的webservice頁面

 

1，新建一個ASP.NET應用程序，在該應用程序中添加一web服務頁面（webservice頁面），此時項目中有三個頁面，web窗體頁面（Default.aspx）、webservice頁面（WebSerVice.asmx)和配置頁面（Web.config)，為了能夠使用HTTP GET 方式訪問web服務，需要在Web.config文件中的<system.web></system.web>標簽對中加入如下配置

 

<webServices >
         <protocols >
           <add name ="HttpGet"/>
         </protocols>
       </webServices>

2，在WebSerVice.asmx文件中寫一個方法getResult，該方法接受兩個字符型的參數，其中的WebMethod屬性不可以漏掉。。。

 

 
           public class WebService : System.Web.Services.WebService
    {
        [WebMethod]
        public string getResult(string  str1,string  str2)
        {
            return "輸入的第一個字符串是：" + str1 + "\n輸入的第二個字符串是：" + str2;
        }
    } 
          

 

3，布局Default.aspx文件如下

 

 

4，在Default.aspx文件中寫入如下JavaScript腳本

 

 
           <script language="javascript" type ="text/javascript" >
    //以下為創建xmlHttpRequest對象
    var xmlHttpRequest=false;
    try
    {
 xmlHttpRequest=new XMLHttpRequest();//非IE瀏覽器
    }
    catch (microsoft)//IE瀏覽器
    {
        try
        {
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft)
        {
            try
            {
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed)
            {
                xmlHttpRequest=false;
            }
        }
    }
    
    if (!xmlHttpRequest)
    {
        alert("不能初始化XMLHttpRequest對象！");
    }
    
    //相應button的Click事件
    function callback()
    {
        var arg1=document.getElementById ("Text1").value;//獲取Text1文本框的值
        var arg2=document.getElementById ("Text2").value;//獲取Text2文本框的值
        var url="WebService.asmx/getResult?str1="+escape(arg1)+"&str2="+escape(arg2);//要打開的url地址，並傳遞兩個參數，這里參數名必須同webservice提供的參數名一致
        xmlHttpRequest.open("get",url,true);//以get方式打開指定的url請求，並且使用的是異步調用方式（true）
        xmlHttpRequest.onreadystatechange=updatePage;//指定回調函數updatePage
        xmlHttpRequest.send(null);//發送請求，由於是get方式，這里用null
    }
    
    //回調函數
    function updatePage()
    {
        if (xmlHttpRequest.readyState==4)
        {
            if (xmlHttpRequest.status==200)
            {
                var response=xmlHttpRequest.responseXML;//以xml格式回調內容
                var result;
                if (response.evaluate)//XML Parsing in Mozilla
                {
                    result=response.evaluate("//text()",response,null,XpathResult.STRING_TYPE,null).stringValue;//Mozilla中獲取xml中的文本內容
                }
                else
                {
                    //XML Parsing in IE
                    result=response.selectSingleNode("//text()").data;//IE中獲取xml中的文本內容
                }
                document.getElementById ("TextArea1").value=result;
            }
        }
    }
    
    </script> 
          

 

5，運行，是不是看到自己想看到的結果。這就是ajax打開webservice頁面請求的方式

 

 

二、調用.aspx格式的web窗體（新建web窗體）

 

1，在上面新建的ASP.NET應用程序中添加一名為ReturnStr的web窗體，在ReturnStr.aspx.cs文件中的Page_Load事件中添加如下代碼：

 

protected void Page_Load(object sender, EventArgs e)
        {
            string str1 = Request["argA"].ToString();
            string str2 = Request["argB"].ToString();
            Response.Write("輸入的第一個字符串是：" + str1 + "\n輸入的第二個字符串是：" + str2);
        }

 

2，修改Default.aspx文件中的JavaScript腳本如下

 

 
           <script language="javascript" type ="text/javascript" >
    //以下為創建xmlHttpRequest對象
    var xmlHttpRequest=false;
    try
    {
 xmlHttpRequest=new XMLHttpRequest();//非IE瀏覽器
    }
    catch (microsoft)//IE瀏覽器
    {
        try
        {
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft)
        {
            try
            {
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed)
            {
                xmlHttpRequest=false;
            }
        }
    }
    
    if (!xmlHttpRequest)
    {
        alert("不能初始化XMLHttpRequest對象！");
    }
    
    //相應button的Click事件
    function callback()
    {
        var arg1=document.getElementById ("Text1").value;//獲取Text1文本框的值
        var arg2=document.getElementById ("Text2").value;//獲取Text2文本框的值
        var url="ReturnStr.aspx?argA="+escape(arg1)+"&argB="+escape(arg2);//要打開的url地址
        xmlHttpRequest.open("get",url,true);//以get方式打開指定的url請求，並且使用的是異步調用方式（true）
        xmlHttpRequest.onreadystatechange=updatePage;//指定回調函數updatePage
        xmlHttpRequest.send(null);//發送請求，由於是get方式，這里用null
    }
    
    //回調函數
    function updatePage()
    {
        if (xmlHttpRequest.readyState==4)
        {
            if (xmlHttpRequest.status==200)
            {
                var response=xmlHttpRequest.responsetext;//回調的內容，以文本的方式返回，當然也可以以xml方式返回(寫法為xmlHttpRequest.responseXML)
//                alert(response);//這里返回的不僅有文本，還有諸如.aspx文件中的各種標簽
//                var result=response.split('<')[0];//所以這里要使用split來取文本內容
                var res=response.split('<');
                var result=res[0];
                document.getElementById ("TextArea1").value=result;
            }
        }
    }
    
    </script> 
          

 

3，運行結果，同上。。。

 

三、調用.aspx格式的web窗體（名為Default的web窗體，無需另外創建）

 

1，點擊上面新建的ASP.NET應用程序中Default窗體，在Default.aspx.cs文件中的Page_Load事件中添加如下代碼：

 

 
           protected void Page_Load(object sender, EventArgs e)
        {
            if (Request["argA"]!=null && Request["argB"]!=null)//這個判斷一定要加上
            {
                string str1 = Request["argA"].ToString();//獲取客戶端發送過來的參數的值
                string str2 = Request["argB"].ToString();
                Response.Write("輸入的第一個字符串是：" + str1 + "\n輸入的第二個字符串是：" + str2);
            }
        } 
          

 

2，修改Default.aspx文件中的JavaScript腳本如下，這里其實這是對二中的url進行了修改，改變指定的url地址。下面的代碼包含了這篇文章中所涉及到的所有的代碼，只是這個部分沒用到的代碼注釋起來了，這樣也是為了自己方便查看這三個不同的打開方式之間，它們的代碼的異同，同時也方便他人。

 

   <script language="javascript" type ="text/javascript" >
    //以下為創建xmlHttpRequest對象
    var xmlHttpRequest=false;
    try
    {
xmlHttpRequest=new XMLHttpRequest();//非IE瀏覽器
    }
    catch (microsoft)//IE瀏覽器
    {
        try
        {
            xmlHttpRequest=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (othermicrosoft)
        {
            try
            {
                xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (failed)
            {
                xmlHttpRequest=false;
            }
        }
    }
   
    if (!xmlHttpRequest)
    {
        alert("不能初始化XMLHttpRequest對象！");
    }
   
    //相應button的Click事件
    function callback()
    {
        var arg1=document.getElementById ("Text1").value;//獲取Text1文本框的值
        var arg2=document.getElementById ("Text2").value;//獲取Text2文本框的值
        var url="Default.aspx?argA="+escape(arg1)+"&argB="+escape(arg2);//要打開的url地址，並傳遞兩個參數
//        var url="ReturnStr.aspx?argA="+escape(arg1)+"&argB="+escape(arg2);
//        var url="WebService.asmx/getResult?str1="+escape(arg1)+"&str2="+escape(arg2);//要打開的url地址，並傳遞兩個參數，這里參數名必須同webservice提供的參數名一致
        xmlHttpRequest.open("get",url,true);//以get方式打開指定的url請求，並且使用的是異步調用方式（true）
        xmlHttpRequest.onreadystatechange=updatePage;//指定回調函數updatePage
        xmlHttpRequest.send(null);//發送請求，由於是get方式，這里用null
    }
   
    //回調函數
    function updatePage()
    {
        if (xmlHttpRequest.readyState==4)
        {
            if (xmlHttpRequest.status==200)
            {
                var response=xmlHttpRequest.responsetext;//回調的內容，以文本的方式返回，當然也可以以xml方式返回(寫法為xmlHttpRequest.responseXML)
//                alert(response);//這里返回的不僅有文本，還有諸如.aspx文件中的各種標簽
//                var result=response.split('<')[0];//所以這里要使用split來取文本內容
                var res=response.split('<');
                var result=res[0];
                document.getElementById ("TextArea1").value=result;

//                var response=xmlHttpRequest.responseXML;//以xml格式回調內容
//                var result;
//                if (response.evaluate)//XML Parsing in Mozilla
//                {
//                    result=response.evaluate("//text()",response,null,XpathResult.STRING_TYPE,null).stringValue;//Mozilla中獲取xml中的文本內容
//                }
//                else
//                {
//                    //XML Parsing in IE
//                    result=response.selectSingleNode("//text()").data;//IE中獲取xml中的文本內容
//                }
//                document.getElementById ("TextArea1").value=result;
            }
        }
    }
   
    </script>

 

3，運行，結果可靠。。。