學習.net與ajax的詳細案例總結

首先了解什麼是ajax。

AJAX不是一種新的程式語言，而是一種用於創建更好更快以及更互動的 Web 應用程式的技術。
透過 AJAX，您的 JavaScript 可使用JavaScript的XMLHttpRequest物件來直接與伺服器進行通訊。透過這個對象，您的 JavaScript 可在不重載頁面的情況與Web伺服器交換資料。
AJAX 在瀏覽器與 Web 伺服器之間使用非同步資料傳輸（HTTP 請求），這樣就可使網頁從伺服器請求少量的信息，而不是整個頁面。
 
一提到javascript，大家都會想到瀏覽器的相容性問題，其實ajax也需要考慮到這個問題。因為不同瀏覽器所使用的web的javascript的類別不一樣，所以產生的效果也不會一樣的。下面不瞎說了，直接引入程式碼供大家參考。
　　　　 {
            var xmlhttp;//非IE瀏覽器創建XmlHttpRequest對象
            if(window.XMLHttpRequest){
                xmlhttp = new XMLHttpRequest();
            }
            //IE瀏覽器創建XmlHttpRequest對象
            if (window.ActiveXObject) {
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e) {
                    try {
                        xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
                    }
                    catch (ex) { }
}
            }
            if (!xmlhttp) {
               return false;
            }
         ), false); //向伺服器某頁發出請求
            xmlhttp.open("GET", "URL「, false);
    = function () {
                if (xmlhttp.readyState == 4) {
                   getElementById("Text1").value = xmlhttp.responseText;
                        xxxxx = xmlhttp.responseText;//在此處我們可以將我們傳遞的參數回傳給我們的html標籤，或其他變數處理問題
                    } //respon    
                        alert("AJAX伺服器回傳錯誤");
}
                }
            }
    只是前台的程式碼，就這些程式碼就已經足夠了，實現了局部刷新頁面的功能，剩下的後台程式碼是根據專案的不同而定，我在這裡不必引入了。

大家看到這些程式碼感覺怎麼樣，對於剛學javascript或ajax的同學，要想記住這些程式碼，真的是很難啊，還有怎麼去理解這些東西呢，我上面基本上都有註釋，大家一般可以理解。但是如果每個頁面都需要局部刷新的話，這樣就會感覺每個頁面都要寫這樣的程式碼是不是很麻煩啊，jQuery幫助我們完成了很多東西，這樣可以減輕我們開發專案的難度，以下是使用jQuery的程式碼：

$.ajax({

   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
 Data Saved: " + msg );
   }
});另一種方式

$.post("test.php", { name: "John", time: "2pm" },

   function(data){

     alert("Data Loaded: " + data);
   });是不是很簡單啊，在這裡我們這是調用他寫好的函數，我們就可以實現我們的無刷新程式碼了，現在感覺是不是無刷新頁面是不是很簡單了，但是我們這只是傳遞個小數據而已，如果從資料庫中提取資料時就會很麻煩的，以下引入我的部分程式碼，讓大家思考一下

以下是我實作無刷新評論並顯示的前台和後台代碼：

   
   
   


   

   

                    TypeName="ajax學習.DataSetCommentTableAd          
                />
            刪除參數>
                           
               
           
           
               
               
               
               
           
       
       

       
           
               
• 评论日期:<%#Eval("PostDate")%>,IP:<%#Eval("IP")%>,内容：<%#Eval("Msg")%>
  

           
       
       

   

    value="提交" />
   

   

後台程式碼（AjaxComment.ashx）

using System;
using System.Collections.Generic;

using System;
using System.Collections.Generic;
using System.Linusing;
using ajax學習.DataSetCommentTableAdapters;
using System.Web.Services;
namespace ajax學習.無刷新註解
{
    ///

 WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    public  (HttpContext context)
        {
            context.Response .ContentType = "text/plain";

            string msg = context.Request["msg"];

       String());//使用的是強型別DataSet
            context.Response.Write("ok");
        }🎠  }           get
            {
                }
    }
}大家看完前台程式碼是不是有疑問了，如果傳遞很多字段，很多屬性的數據時，該怎麼辦呢，如果每個數據都是這樣的自己split（）一下的話，那麼做大項目的話肯定會累屎了，下面jQuery有幫我們做了一件好事情，就是json的使用，下面我引入我的使用無刷新評論的json代碼

前台代碼：