学习.net与ajax的详细案例总结_H5之家 - 中国HTML5教程资源分享第一站

学习.net与ajax的详细案例总结

来源：中国IT实验室作者：佚名发表于：2013-06-19 15:07　点击：

首先了解什么是ajax。 AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。通过 AJAX，您的 JavaScript 可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，您的 JavaScript 可在不重载页面

首先了解什么是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" ".w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　<html xmlns=".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 = "")]
　　[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
　　{

有帮助

(0)

没帮助

(1)

100%

上一篇：.NET 委托

下一篇：ASP.NET总结