JQuery学习（2）之Ajax

同步传输　　　　　　正　　　　多件事情一起做　　|　　程不　　　　事情一件一件地做

　　　　　　　　　　常：　　　　　　　　　　　　|　　序是：

异步传输　　　　　　人　　　　事情一件一件地做　|　　员人　　　　多件事情可以一起做

附加（XML）

★XML作用：用来存储数据。

★XML特点（注意事项）：①XML文档有且只有一个根节点

②XML是严格区分大小写的

③XML标签成对出现

Ajax代码一分为二

Ⅰ、服务端代码（用的一般处理程序）

第一步：获取传来的数据

第二步：处理数据生成结果

第三步：Response写入XML字符串

Ⅱ、客户端代码（实现无刷新，获取数据）

①发送请求之前的代码--主调函数

②发送请求之后的代码--回调函数

第一步：判断要给谁添加事件，添加什么事件

第二步：判断是否需要传参，需要传参，就获取值（在事件之内实现获取值的代码）

第三步：调用ajax函数，，详解ajax函数步骤(JQuery实现)：

$.ajax({

　　url:"要调用服务器端的路径"，----------注意：用逗号隔开

　　data:{名（自拟）:"值"},--------------名（自拟），在一般处理程序中通过Request["名"]来获取传来的值，若要传多个参数，用逗号隔开。

　　type:"POST",--------------大写

　　dataType:"XML",----------------大写

　　success:function (data){--------------千万不要忘了加参数，data代表服务器返回来的数据，这里用的是XML

　　　　//解析XML:解析服务端返回过来的XML文件--------注解①

　　　　//显示HTML:把解析出来的XML，显示数来---------注解②

　　}

})；

注解①：如果在XML文件中要获取的内容是标签的纯文本形式如：<book>水浒传</book><price>1.0</price>，所用的解析XML文件的方法：find("标签名").text-------------JQuery获取标签文本的方法

例： var rel = $(data).find("标签名").text;

如果在XML文件中要获取的信息写入了标签的属性中如：<book name="水浒传" value="1.0" />,所用的解析XML文件的方法:attr("属性名")--------------JQuery获取标签属性的方法

例：var rel =$(data).find("标签名").attr("value");

注解②：显示HTML

调用的JQuery的html（）方法

append() 追加子节点

实战例子

Ⅰ用户注册--html代码

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="script/jquery-1.7.1.js"></script>

    <script language="javascript">

        $(document).ready(function () {

            $("#txtUser").blur(function () {

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

                $.ajax({

                    url: "login.ashx",

                    data: { u: user },

                    type: "POST",

                    dataType: "XML",

                    success: function (data) {

                        //解析

                        var rel=$(data).find("result").text();

                        //显示

                        if (rel=="True") {

                            $("#lbl").html("该用户名可以使用");

                        }

                        else {

                            $("#lbl").html("用户名已存在");

                        }

                    }//success

                })//ajax

            })//blur

        })//ready

    </script>

</head>

<body>

    <h1>用户注册界面</h1>

    <form id="form1" runat="server">

    <div>

        用户名：<asp:TextBox ID="txtUser" runat="server"></asp:TextBox>

        <asp:Label ID="lbl" runat="server" Text="Label"></asp:Label>

        <br />

        密码：<asp:TextBox ID="txtPass" runat="server"></asp:TextBox>

        <br />

        <asp:Button ID="btnLogin" runat="server" Text="注册" />

    </div>

    </form>

</body>

</html>

服务端代码：

public class login : IHttpHandler {

    private MyDBDataContext _Context = new MyDBDataContext();

    public void ProcessRequest (HttpContext context)

    {

        //获取传过来的值

        string s = context.Request["u"].ToString();

        bool isOK;

        var query = this._Context.Login.Where(r => r.UserName == s);

        if (query.Count() == )

        {

            isOK = true;

        }

        else

        {

            isOK = false;

        }

        string xmll = "<?xml version='1.0'?>";

        xmll += "<result>" + isOK + "</result>";

        context.Response.Write(xmll);

        context.Response.End();

    }

Ⅱ一边录入信息一边获取信息

html代码：

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script src="script/jquery-1.7.1.js"></script>

    <script language="javascript">

        $(document).ready(function () {

            $("#txtUser").keyup(function () {//每输入一个字符请求一次

                var s = $("#txtUser").val();//获取录入的值

                $.ajax({

                    url: "Message.ashx",

                    data: { uid: s },

                    type: "POST",

                    dataType: "XML",

                    success: function (data) {

                        //解析

                        var name = $(data).find("name").text();

                        var pass = $(data).find("pass").text();

                        var account = $(data).find("account").text();

                        //显示

                        $("#lblName").html(name);

                        $("#lblPass").html(pass);

                        $("#lblAccount").html(account);

                    }//success

                });//ajax

            });//.keyup

        });//ready

    </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:TextBox ID="txtUser" runat="server"></asp:TextBox><br />

        详细信息：<br />

        姓名：<asp:Label ID="lblName" runat="server" Text="Label"></asp:Label><br />

        密码：<asp:Label ID="lblPass" runat="server" Text="Label"></asp:Label><br />

        账户余额：<asp:Label ID="lblAccount" runat="server" Text="Label"></asp:Label>

    </div>

    </form>

</body>

</html>

服务端代码：

public class Message : IHttpHandler {

    private MyDBDataContext _Context = new MyDBDataContext();

    public void ProcessRequest (HttpContext context) {

        string uid = context.Request["uid"].ToString();//获取请求的值

        Login data=new Login();

        //根据请求的值查询数据库

        var query = this._Context.Login.Where(r => r.UserName == uid);

        if (query.Count()>)

        {

            data = query.First();

        }

        //写入xml文件

        string s = "<?xml version='1.0'?><root><name>" + data.Name + "</name><pass>" + data.Password + "</pass><account>" + data.Account + "</account></root>";

        //回复

        context.Response.Write(s);

    }

JQuery学习（2）之Ajax的更多相关文章

jQuery学习笔记之Ajax用法详解
这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下本文实例讲述了j ...
jQuery学习小结3——AJAX
一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...
jQuery学习笔记（Ajax）
jQuery对Ajax操作进行了封装,在jQuery中$.ajax方法属于最底层的方法,第2层是$.load().$.get().$.post()方法,第3层是$.getScript()和$.getJ ...
初步学习jquery学习笔记（六）
jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...
jQuery学习笔记之jQuery的Ajax（3）
jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...
jquery学习笔记(五)：AJAX
内容来自[汇智网]jquery学习课程 5.1 ajax AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. AJAX = 异步 JavaScript 和 XML ...
jQuery学习之旅 Item10 ajax快餐
1. 摘要本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...
jQuery学习之路（1）-选择器
▓▓▓▓▓▓ 大致介绍终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
jQuery学习笔记(一)jQuery选择器
目录 jQuery选择器的优点基本选择器层次选择器过滤选择器表单选择器第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...
jQuery 学习笔记
jQuery 学习笔记一.jQuery概述宗旨: Write Less, Do More. 基础知识: 1.符号$代替document.getElementById( ...

随机推荐

【读书笔记《Android游戏编程之从零开始》】5.Android 游戏开发常用的系统控件（ProgressBar、Seekbar）
3.7 ProgressBar ProgressBar类官方文档地址:http://developer.android.com/reference/android/widget/ProgressBar ...
NGUI3.x Button事件
代码调用事件 UI搭建 1.首先创建一个Button,和一个的GameObeject命名为GUIClikEvent 2.方法一:创建一个NGUIClickTest.cs,绑定在Button上 Clic ...
java 15-10 List的三个子类的特点
List:(面试题List的子类特点) ArrayList: 底层数据结构是数组,查询快,增删慢. 线程不安全,效率高. Vector: 底层数据结构是数组,查询快,增删慢. 线程安全,效率低. Li ...
Spring addFlashAttribute
redirectAttributes.addFlashAttribute("result",accountModel); 用这个可以绑定session 但是只能用一次,可以避免最后 ...
Ember模板中的操作指向
模板中的链接操作指向有三个地方,该模板对应的控制器和路由以及视图,默认是先跳转到控制器,如果控制器里没有定义模板中动作的方法,就去该模板对应的路由里找,如果还没找到,就去父级路由找,直到顶级路由,如果 ...
Nginx反向代理+负载均衡简单实现（http方式）
1)nginx的反向代理:proxy_pass2)nginx的负载均衡:upstream 下面是nginx的反向代理和负载均衡的实例: 负载机:A机器:103.110.186.8/192.168.1. ...
Mac快捷键、命令行
睡眠:option + command + 电源键立即关机:Cmd-Opt-Ctrl-Eject 立即重启:Cmd-Ctrl-Eject 弹出关机提示 :Ctrl + 关机正常关机快捷键 : C ...
【转】【SSE】基于SSE指令集的程序设计简介
基于SSE指令集的程序设计简介作者:Alex Farber 出处:http://www.codeproject.com/cpp/sseintro.asp SSE技术简介 Intel公司的单指令多数据 ...
在windows下python,pip,numpy,scipy,matplotlib的安装
系统:win7(64bit) 如果只需要安装python,执行步骤一就可以了,不用管后面.如果还需要其它的库,则只需要执行第二步,第一步可省略(因为在安装anaconda的时间,python就自动装好 ...
关于多个EditText的OnTextChange事件陷入死循环的处理
需求:ListView的Item上面有三个EditText控件,分别为数量 ,单价,总价,要求输入数量跟单价时候总价跟着计算变化,当输入总价时候数量不变,改变单价. 实现:首先肯定想到的是对Ed ...

JQuery学习（2）之Ajax

JQuery学习（2）之Ajax的更多相关文章

随机推荐

热门专题