C#-WebForm-AJAX阿贾克斯（一）基础知识

AJAX 即“ Asynchronous Javascript And XML ”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

这个术语源自描述从基于 Web 的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。

AJAX 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。

百度百科：http://baike.baidu.com/item/ajax/8425

先引用jQuery，再写代码

代码格式：（李献策lxc）

$.ajax({
    url:"",//要将此次请求发送到哪个服务端去
    data:{},//给服务端带的数据，可以没有，也可以是多个
    type:"post", //传递的方式
    dataType:"json",//数据传递的格式
    success:function(data){}//如果成功返回执行此方法，“data”为自定义名
});

1、一般数据处理程序（数据接口）：ashx文件

2、跨语言传递数据

XML 可扩展的标记语言

　　结构不清晰

　　代码量比较大

　　查找起来比较费事

　　非面向对象结构

json

　　结构清晰

　　代码量相对较小

　　面向对象的处理方式，查找数据很简单

　　基本结构：

　　　　键值对：{"":"","":‘‘,"":""}（英文状态下）

=============================================================

练习：验证用户名是否可用

一、普通方式，不用ajax

前台代码：

<body>
    <form id="form1" runat="server">
    <div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

<body>
    <form id="form1" runat="server">
    <div>
        <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
        <asp:TextBox ID="TextBox1" runat="server" AutoPostBack="true"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

后台代码：

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.TextChanged += TextBox1_TextChanged;
    }

    void TextBox1_TextChanged(object sender, EventArgs e)
    {
        if (TextBox1.Text == "zhangsan" || TextBox1.Text == "lisi")
        {
            Label1.Text = "用户名已存在！";
            Label1.ForeColor = System.Drawing.Color.Red;
        }
        else
        {
            Label1.Text = "恭喜！用户名可以使用！";
            Label1.ForeColor = System.Drawing.Color.Green;
        }
    }
}

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        TextBox1.TextChanged += TextBox1_TextChanged;
    }

    void TextBox1_TextChanged(object sender, EventArgs e)
    {
        if (TextBox1.Text == "zhangsan" || TextBox1.Text == "lisi")
        {
            Label1.Text = "用户名已存在！";
            Label1.ForeColor = System.Drawing.Color.Red;
        }
        else
        {
            Label1.Text = "恭喜！用户名可以使用！";
            Label1.ForeColor = System.Drawing.Color.Green;
        }
    }
}

焦点丢失时触发事件，会重新加载整个页面，用户体验差！

二、ajax局部刷新

前台代码：

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </div>
    </form>
</body>

后台代码：

var txt1 = document.getElementById("TextBox1");
txt1.onkeyup = function () {
    var v = txt1.value;

    $.ajax({
        url: "../ajax/Handler.ashx",
        data: { "txt1": v },
        type: "post",
        dataType: "json",
        success: function (data) {
            document.getElementById("Label1").innerHTML = data.ok;
            if (data.ok1 == "true") {
                document.getElementById("Label1").style.color = "green";
            }
            else {
                document.getElementById("Label1").style.color = "red";
            }
        }
    });
};

var txt1 = document.getElementById("TextBox1");
txt1.onkeyup = function () {
    var v = txt1.value;

    $.ajax({
        url: "../ajax/Handler.ashx",
        data: { "txt1": v },
        type: "post",
        dataType: "json",
        success: function (data) {
            document.getElementById("Label1").innerHTML = data.ok;
            if (data.ok1 == "true") {
                document.getElementById("Label1").style.color = "green";
            }
            else {
                document.getElementById("Label1").style.color = "red";
            }
        }
    });
};

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        string s=context.Request["txt1"];
        string json = "{\"ok\":\"恭喜！用户名可用！\",\"ok1\":\"true\"}";

        if (s == "zhangsan" || s == "lisi")
        {
            json = "{\"ok\":\"此用户名不可用！\",\"ok1\":\"false\"}";
        }

        context.Response.Write(json);
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler {

    public void ProcessRequest (HttpContext context) {
        string s=context.Request["txt1"];
        string json = "{\"ok\":\"恭喜！用户名可用！\",\"ok1\":\"true\"}";

        if (s == "zhangsan" || s == "lisi")
        {
            json = "{\"ok\":\"此用户名不可用！\",\"ok1\":\"false\"}";
        }

        context.Response.Write(json);
        context.Response.End();
    }

    public bool IsReusable {
        get {
            return false;
        }
    }

}

时间： 2024-11-03 21:11:18

C#-WebForm-AJAX阿贾克斯（一）基础知识的相关文章

原生ajax异步请求基础知识

一.同步交互与异步交互的概念: * 同步交互:客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户不能做任何其他事情(只能等待响应完才能继续其他请求). * 异步交互:客户端向服务器端发送请求,直到服务器端进行响应,这个过程中,用户可以做其他任何事情(不等): 同步与异步的区别: * 同步交互 1.执行速度相对比较慢 2.响应的是完整的HTML页面 * 异步交互 1. 执行速度相对比较快 2. 响应的是部分数据 二.AJAX的概念:(Asynchronous JavaScript an

web基础知识（一）关于ajax传值最基础东西

HTTP方法之 GET对比POST GET:从指定的资源请求数据, POST:向指定的资源提交要被处理的数据 GET方法: 请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的: /test/demo_form.asp?name1=value1&name2=value2 有关 GET 请求的其他一些注释: GET 请求可被缓存 GET 请求保留在浏览器历史记录中 GET 请求可被收藏为书签 GET 请求不应在处理敏感数据时使用 GET 请求有长度限制 GET 请求只应当用于取回

原生ajax基础知识笔记

原生ajax基础知识笔记 1.创建 XMLHttpRequest 对象 所有现代浏览器(IE7+.Firefox.Chrome.Safari 以及 Opera)均内建 XMLHttpRequest 对象. 老版本的 Internet Explorer (IE5 和 IE6)使用 ActiveXObject. 代码示例: // Creates a XMLHttpRequest object. var xhr = new XMLHttpRequest(); 兼容浏览器代码示例: var xhr; /

AJAX 基础知识

AJAX 基础知识 一.AJAX综述 1.AJAX的概念 A:异步asynchronousJ:JavaScriptA:andX:XML 异步的JavaScript和XML. 2.AJAX的优点(好处) 1),提高用户体验度  2),JS与服务端的交互  3),页面局部刷新--提高浏览器的效率 2.AJAX的缺点(弊端)    加大服务器的负担 注:新思想,老技术. 二.实现AJAX功能 (一).JS实现AJAX功能 1.获得XMLHttpRequest(浏览器的兼容) (二).JQuery实现A

web基础知识（二）关于ajax，Jquery传值最基础东西

这次还是一些关于jQuery,ajax前后台传值情况, 是自己在做点小东西过程中遇到的,记录下来为自己也方便别人 列表很多,点击编辑和删除无刷新的进行操作的话,肯定是ajax了,因为无刷新嘛,可能有的朋友会说直接传值,传ID到Action删除不就OK了,用得着写js么,纯粹自己找麻烦嘛. 其实这里重点是无刷新的啦, 这个上传后到这里来,有个预览功能,把本次的全部预览,如果全部刷新的话,那么刚才上传的就不会在这个页面了,so,还是采用无刷新的比较好. 点击编辑跳到一个新的页面的时候有两种方法可以选

Ajax基础知识 浅析（含php基础语法知识）

1.php基础语法    后缀名为.php的文件 (1) echo   向页面中输入字符串  <?php    所有php相关代码都要写在<?php ?>这个标签之中 echo "<div>Hello World!</div>"; ?> (2) $  变量声明  如果只声明不赋值,会报错 <?php $num=123; echo $num; echo "<div>编号为:".$num."&l

web基础知识（三）关于ajax，Jquery传值最基础东西

今天补充一下两个小功能,一个是关于radio单选框的情况,如何在前面选了后,传到后台,编辑修改的时候再次传回来,并且在当时选的那个上:再一个就是关于添加小标签的时候添加接着弹出在下面,并点击出现删除. 一:radio 1 <div class="newlylist"> 2 <div class="newlyhead">图示商品:</div> 3 <div class="newlycontent">&

11月10日上午ajax基础知识、用ajax做登录页面、用ajax验证用户名是否可用、ajax动态调用数据库

1.ajax的基础知识 ajax是结合了jquery.php等几种技术延伸出来的综合运用的技术,不是新的内容.ajax也是写在<script>标签里面的. 如果使用ajax一定是要有1个处理页面的,处理页面只是操作数据库并且返回值,页面都是ajax处理的. ajax的写法: test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

MVC基础知识

1.ASP.NET MVC请求过程 1 2.Controller (1) 控制器在ASP.NET MVC中扮演着处理客户端请求的角色 1)必须实现System.Web.Mvc.IController接口 ->通常直接继承System.Web.MVC.Controller类 2)必须要以Controller结尾 3)通过不同的Action来处理具体的客户端请求 3.Action (1) 是指在继承了System.Web.Mvc.Controller类中所定义的返回值的类型可以兼容 (2)Actio

XML基础知识

1.XML基础2.XML语法3.XML DOM4.Javascript解析XML文档 1.XML基础eXtensible Markup Language 可扩展标记语言XML是一种平台无关的用于携带和传送数据的方法. ~~~~xml主要是描述数据是什么,一般没有数据如何呈现的信息,有别于HTML,HTML可以说是xml的一种实现.(注:xhtml才是xml的一种实现) xml文档可以用IE 文本编辑器或者专门的XML编辑器浏览 ~~~xml不同平台的数据交换,但不适合大批量数据的存储与处理(有别