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

最後更新：2016-12-16 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先瞭解什麼是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) {
alert("建立xmlhttp對象異常");
return false;
}
// xmlhttp.open("POST", "GetDate.ashx?nd=" + new Date(), false); //向伺服器某個頁面發出請求
xmlhttp.open("GET", "URL“, false);

xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {//如果是狀態代碼則顯示成功
//document.getElementById("Text1").value = xmlhttp.responseText;
xxxxx = xmlhttp.responseText;//在此處我們可以將我們傳遞的參數返回給我們的html標籤，或者其他變數處理問題
} //responseText為伺服器返回的文本
else {
alert("AJAX伺服器返回錯誤");
}
}
}
xmlhttp.send();//開始發送請求
}這隻是前台的代碼，就這些代碼就已經足夠了，實現了局部重新整理頁面的功能，剩下的後台代碼是根據項目的不同而定，我在這裡不必引入了。

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

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

$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});是不是很簡單啊，在這裡我們這是調用他寫好的函數，我們就可以實現我們的無重新整理代碼了，現在感覺是不是無重新整理頁面是不是很簡單了，但是我們這隻是傳遞個小資料而已，如果從資料庫中提取資料時就會很麻煩的，以下引入我的部分代碼，讓大家思考一下

以下是我實現無重新整理評論並顯示的前台和後台代碼：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxComment.aspx.cs" Inherits="ajax學習.無重新整理評論.AjaxComment1" %>

<!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 runat="server">
<title></title>
<script src="../js/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnComment").click(function () {
var comment = $("#txtComment").val();

$.post("AjaxComment.ashx",{"msg":comment},
function (data, status) {
if (status != "success") {
alert("發表評論失敗,請重試");
return;
}
if (data == "ok") {
var newComment = $("<li>評論日期:"+new Date().toString()+",IP:,"+"本機"+"內容："+comment+"</li>");
$("#ulComment").append(newComment);
alert("評論發表成功");
}
else {
alert("評論發表有問題");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server"
DeleteMethod="Delete" InsertMethod="Insert"
OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"
TypeName="ajax學習.DataSetCommentTableAdapters.T_CommentTableAdapter"
UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_Id" Type="Int64" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="IP" Type="String" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="PostDate" Type="String" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="IP" Type="String" />
<asp:Parameter Name="Msg" Type="String" />
<asp:Parameter Name="PostDate" Type="String" />
<asp:Parameter Name="Original_Id" Type="Int64" />
</UpdateParameters>
</asp:ObjectDataSource>
<ul id="ulComment">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">
<ItemTemplate>
<li>評論日期:<%#Eval("PostDate")%>,IP:<%#Eval("IP")%>,內容：<%#Eval("Msg")%><br/></li>
</ItemTemplate>
</asp:Repeater>
</ul>
<textarea id="txtComment" cols="20" rows="10"></textarea><br/>
<input id="btnComment" type="button"
value="提交" />
</div>
</form>
</body>
</html>

後台代碼（AjaxComment.ashx）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using ajax學習.DataSetCommentTableAdapters;
using System.Web.Services;
namespace ajax學習.無重新整理評論
{
/// <summary>
/// AjaxComment 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AjaxComment : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string msg = context.Request["msg"];
new T_CommentTableAdapter().Insert(context.Request.UserHostAddress,msg,DateTime.Now.ToString());//使用的是強型別DataSet
context.Response.Write("ok");
}

public bool IsReusable
{
get
{
return false;
}
}
}
}大家看完前台代碼是不是有疑問了，如果傳遞很多欄位，很多屬性的資料時，該怎麼辦呢，如果每個資料都是這樣的自己split（）一下的話，那麼做大項目的話肯定會累屎了，下面jQuery有幫我們做了件好事情，就是json的使用，下面我引入我的使用無重新整理評論的json代碼

前台代碼：

<!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/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.post("PagedServices.ashx", { "action": "getpagecount" }, function (data, status) {
for (var i = 1; i <=data; i++) {
var td = $("<td><a href=''>" + i + "</a></td>");
$("#trPage").append(td);
}
$("#trPage td").click(function (e) {
e.preventDefault();//不要導向連結地址
$.post("PagedServices.ashx", { "action": "getpagedata", "pagenum": $(this).text()},
function (data, status) {
var comments = $.parseJSON(data);
$("#ulComments li").remove();
for (var i = 0; i < comments.length; i++) {
var comment = comments[i];
var li = $("<li>" + comment.Id + "---" + comment.IP + "---" + comment.Msg + "---" + comment.PostDate + "</li>");
$("#ulComments").append(li);
}
});
});
});
});
</script>
</head>
<body>
<ul id="ulComments"></ul>
<table><tr id="trPage"></tr></table>
</body>
</html>後台代碼：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using ajax學習.DataSetCommentTableAdapters;
using System.Web.Script.Serialization;
namespace ajax學習.無重新整理分頁
{
/// <summary>
/// PagedServices 的摘要說明
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class PagedServices : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
// context.Response.Write("Hello World");
string action=context.Request["action"];
var adapter = new T_CommentTableAdapter();
if (action == "getpagecount")
{

int count=adapter.SelectCount().Value;
int pagecount=count/10;
if(count%10!=0)
{
pagecount++;
}
context.Response.Write(pagecount);
}
else if(action=="getpagedata")
{
string pagenum=context.Request["pagenum"];
int iPageNum = Convert.ToInt32(pagenum);
var data = adapter.GetPagedData((iPageNum - 1) * 10 + 1, iPageNum * 10);
List<Comments> list=new List<Comments> ();
foreach(var row in data)
{
list.Add(new Comments() { Id = (int)row.Id, IP = row.IP, Msg = row.Msg, PostDate = row.PostDate, });
}
JavaScriptSerializer jss = new JavaScriptSerializer();
context.Response.Write(jss.Serialize(list));
}
}

public bool IsReusable
{
get
{
return false;
}
}
}

public class Comments
{
public int Id { get; set; }
public string IP{get;set;}
public string Msg{get;set;}
public string PostDate{get;set;}
}
}這樣我們真的是省了很多力氣啊，是不是jQuery很強大啊。。。。。。。。。。。。。

然後吧，微軟感覺我必須封裝自己的ajax，這樣使得開發人員做項目變得容易一些，微軟真的是幫我們封裝好了一個，但是對於高手來說，大家都不想用，感覺這樣的代碼太呆板，一點不靈活，我再下面引入代碼，供新手參考：（不瞭解ajax運行原理的新手一樣可以使用ajax快速開發新的項目）

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpdatPanel.aspx.cs" Inherits="ajax學習.UpdatePanel.UpdatPanel" %>

<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>

<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="普通重新整理頁面顯示目前時間"
onclick="Button1_Click" />
</div>
<div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Button ID="Button2" runat="server" onclick="Button2_Click"
Text="Ajax無重新整理顯示目前時間" />
<br />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>但是微軟後來真的是開發一個很好地工具，那就是ajax與WCF的結合，廢話少說，引入代碼，供大家思考

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WCF_Ajax.aspx.cs" Inherits="ajax學習.WCF之Ajax.WCF_Ajax" %>

<!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 runat="server">
<title></title>

<script language="javascript" type="text/javascript">
// <![CDATA[

function Button1_onclick() {
PersonService.GetPerson(1, function (data) {
alert(data.Name);
},
function () {
alert("失敗");
});
}

// ]]>
</script>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="./PersonService.svc" /> //注意路徑處理問題，
</Services>
</asp:ScriptManager>
<input id="Text1" type="text" />
<input id="Button1" type="button" value="button" onclick="return Button1_onclick()" />
<br />

</div>
</form>
</body>
</html>後台代碼：（PersonService.svc）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.ServiceModel.Activation;
using System.ServiceModel.Web;
using System.Text;

namespace ajax學習.WCF之Ajax
{
[ServiceContract(Namespace = "")]
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class PersonService
{
// 要使用 HTTP GET，請添加 [WebGet] 特性。(預設 ResponseFormat 為 WebMessageFormat.Json)
// 要建立返回 XML 的操作，
// 請添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
// 並在操作本文中包括以下行:
// WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
[OperationContract]
public void DoWork()
{
// 在此處添加操作實現
return;
}

[OperationContract]
public Person GetPerson(int id)
{
return new Person(){Name="Tom",Age=30};
}

// 在此處添加更多操作並使用 [OperationContract] 標記它們
}

public class Person
{
public string Name { get; set; }
public int Age{get;set;}

}
}

更多學習.net與ajax的詳細案例總結相關文章請關注topic.alibabacloud.com！



本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More