后台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. :nth-child

    匹配其父元素下的第N个子或奇偶元素 :eq(index) 匹配选择器指定序列的元素,而这个将为每一个父元素匹配子元素. :nth-child从1开始的,而:eq()是从0算起的!可以使用:<br ...

  2. 虚拟主机无法使用fsockopen操作处理方法

    一.如何禁用fsockopen()下面是两种常用的禁用fsockopen的方法.1.修改php.ini,将 disable_functions = 后加入 fsockopen2.修改php.ini,将 ...

  3. POJ 2876 Cantoring Along

    Description The Cantor set was discovered by Georg Cantor. It is one of the simpler fractals. It is ...

  4. TTL

    TTL(Time To Live )是IP协议包中的一个值,它告诉网络,数据包在网络中的时间是否太长而应被丢弃.有很多原因使包在一定时间内不能被传递到目的地.解决方法就是在一段时 间后丢弃这个包,然后 ...

  5. 【UML】如何记忆UML类图的画法

    前言 UML类图形象反映系统类之间的关系,大家非常常用.小弟不才,偶尔使用,往往每次使用都得查询各种关系的表示方式.终于,这次认真看了几遍,打算记起来. 注意 记忆方法只是本人联想,用于加强记忆.与该 ...

  6. 【Session】Tomcat中Session的外置

    > 参考的优秀文章 Tomcat Session 持久化 Package org.apache.catalina.session 最近同事在做Session外置的功能,我对Session持久化. ...

  7. hadoop2.0初识1.1

    1.伪分布式hdfs文件系统的搭建(单节点文件系统) 1.1.根据上节的讲解,配置主机映射.jdk和解压hadoop压缩包 1.2.配置namenode 在/opt/modules/hadoop-2. ...

  8. Codeforces Round #356 (Div. 2)

    A. Bear and Five Cards time limit per test 2 seconds memory limit per test 256 megabytes input stand ...

  9. iOS开发数据库篇—SQLite简单介绍

    iOS开发数据库篇—SQLite简单介绍 一.离线缓存 在项目开发中,通常都需要对数据进行离线缓存的处理,如新闻数据的离线缓存等. 说明:离线缓存一般都是把数据保存到项目的沙盒中.有以下几种方式 (1 ...

  10. 如何设置WIN10任务栏

    1.鼠标右键点击任务栏 然后点击锁定任务栏,去掉前面的钩 2.然后鼠标右击任务栏 选择工具栏 点击新建工具栏 3.打开后点击新建文件夹,可以重命名,然后选择刚才新建的文件夹 4.此时任务栏就有了 5. ...