后台C#代码

public void ProcessRequest(HttpContext context)

        {

            context.Response.ContentType = "text/plain";

            string name = context.Request["Name"];

            var data = new T_UsersTableAdapter().GetDataByName(name);

            JavaScriptSerializer jss = new JavaScriptSerializer();

            if (data.Count <= )

            {

                var user = jss.Serialize(new Users() { Status = "error", Age =  });

                context.Response.Write(user);

            }

            else

            {

                var user = jss.Serialize(new Users() { Status = "ok", Age = data.Single().Age });

                context.Response.Write(user);

            }

        }

        public class Users

        {

            public string Status { set; get; }

            public int Age { set; get; }

        }

html页面

<body>

    <input id="user" type="text" />

    <input id="btnSearch" onclick="search();" type="button" value="查询" />

    <input id="btnSearch1" onclick="search1();" type="button" value="Jquery查询" />

    <div id="userInfo"></div>

</body>

前台javascript和jquery分别实现ajax

<script type="text/javascript">

        function search() {

            var xmlhttp;

            var name = document.getElementById("user").value;

            if (window.XMLHttpRequest) {

                xmlhttp = new XMLHttpRequest();

            } else {

                xmlhttp = new ActiveXObject(Microsoft.XMLHTTP);

            }

            xmlhttp.open("post", "HandlerUsers.ashx?name=" + name, false);

            var div = document.getElementById("userInfo");

            xmlhttp.onreadystatechange = function () {

                if (xmlhttp.readyState == 4) {

                    if (xmlhttp.status == 200) {

                        var arr = xmlhttp.responseText;

                        arr = JSON.parse(arr);

                        if (arr.Status == "ok") {

                            div.innerHTML = arr.Age;

                        } else {

                            div.innerHTML = "查找的用户名不存在！";

                        }

                    } else {

                        div.innerHTML = "ajax错误！";

                    }

                }

            }

            xmlhttp.send();

        }

        function search1() {

            $(function () {

                var name = $("#user").val();

                var div = $("#userInfo");

                $.post("HandlerUsers.ashx", { "name": name }, function (data, status) {

                    if (status == "success") {

                        var user = $.parseJSON(data);

                        alert(user);

                        if (user.Status == "ok") {

                            div.html(user.Age);

                        } else {

                            div.html("查询的用户名不存在！");

                        }

                    } else {

                        div.html("ajax错误！");

                    }

                });

            });

        }

    </script>

原生javascript和jquery实现简单的ajax例子的更多相关文章

  1. 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现

    原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...

  2. 原生 JavaScript 代替 jQuery【转】

    目录 用原生JavaScript代替jQuery Query Selector CSS & Style DOM Manipulation Ajax Events Utilities Promi ...

  3. jQuery学习之路（7）- 用原生JavaScript实现jQuery的某些简单功能

    ▓▓▓▓▓▓ 大致介绍 学习了妙味,用原生的JavaScript实现jQuery中的某些部分功能 定义自己的函数库lQuery ▓▓▓▓▓▓ $()选择器的实现 jQuery是面向对象的,所以自己编写 ...

  4. 原生javascript与jquery 的比较

    JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...

  5. 表单美化-原生javascript和jQuery单选按钮（兼容IE6）

    最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...

  6. 常见的dom操作----原生JavaScript与jQuery

    1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...

  7. 原生JavaScript实现jQuery的hasClass,removeClass,addClass,toggleClass

    介绍: 1.hasClass:判断DOM元素是否存在类. 2.addClass:为的DOM元素添加类. 3.removeClass:删除DOM元素的类. 4.toggleClass:如果DOM元素存在 ...

  8. 原生JavaScript和jQuery的较量

    JavaScript和jQuery有很多相似知促,那么二者又是如何进行较量,我们先了解一下什么是JavaScript和jQuery,知其源头,才能知其所以然. 简介: [JavaScript] 一种直 ...

  9. [Javascript,JSON] JQuery处理json与ajax返回JSON实例

    转自:http://www.php100.com/html/program/jquery/2013/0905/5912.html [导读] json数据是一种经型的实时数据交互的数据存储方法,使用到最 ...

随机推荐

  1. JS中Float类型加减乘除 修复

    MXS&Vincene  ─╄OvЁ  &0000027─╄OvЁ  MXS&Vincene MXS&Vincene  ─╄OvЁ:今天很残酷,明天更残酷,后天很美好, ...

  2. JavaScript原型理解

    这东西我还不是很理解,但是把自己实践的过程记录下来,希望积累到一定程度,能自然而而然的理解了.很多东西我是这样慢慢理解的,明白为啥是那样子,真的很神奇哦.少说废话,开始吧. 可以先阅读这篇文章 fun ...

  3. Python之通过IP地址库获取IP地理信息

    利用第三方的IP地址库,各个公司可以根据自己的业务情况打造自己的IP地址采集分析系统.例如游戏公司可以采集玩家地区信息,进行有针对性的运营策略,还可能帮助分析玩家网络故障分布等等. #!/usr/bi ...

  4. Rmarkdown用法与R语言动态报告

    Rmarkdown用法与R语言动态报告数据分析用R语言非常便捷,因为R语言的社区强大,并且在不断更新和完善,提供了各种分析利器.Knitr和Rmarkdown包则是数据分析中的动态报告利器. 下面是一 ...

  5. 深度优先搜索（DFS）

    定义: (维基百科:https://en.wikipedia.org/wiki/Depth-first_search) 深度优先搜索算法(Depth-First-Search),是搜索算法的一种.是沿 ...

  6. 开源.NET FTP组件edtFTPnet 用法

    edtFTPnet官方网站:http://www.enterprisedt.com/products/edtftpnet/ 目前最新版本为2.2.3,下载后在bin目录中找到edtFTPnet.dll ...

  7. iOS - Mac OS X 常用快捷键

    Mac OS X 常用快捷键 1)快捷键图标: Escape 为 esc 键 无 Eject 键时用电源键代替 Space Bar 为空格键 2)基本快捷键: command + x 剪切文字 com ...

  8. 程序设计入门——C语言 第4周编程练习 2 念整数（5分）

    题目内容: 你的程序要读入一个整数,范围是[-100000,100000].然后,用汉语拼音将这个整数的每一位输出出来. 如输入1234,则输出: yi er san si 注意,每个字的拼音之间有一 ...

  9. M1卡介绍

    本文整理自网络. M1卡是指菲利浦下属子公司恩智浦出品的芯片缩写,全称为NXP Mifare1系列,常用的有S50及S70两种型号,目前都有国产芯片与其兼容,属于非接触式IC卡.最为重要的优点是可读可 ...

  10. Hibernate延迟加载机制

    延迟加载: 延迟加载机制是为了避免一些无谓的性能开销而提出来的,所谓延迟加载就是当在真正需要数据的时候,才真正执行数据加载操作.在Hibernate中提供了对实体对象的延迟加载以及对集合的延迟加载,另 ...