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

yibin 2015-02-09 建站源码 499

首先了解什么是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 = "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
  {

扫码添加微信

13013082126 扫描微信 建站咨询 优化咨询