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( ...

随机推荐

selenium如何识别验证码
一:前面的文章写了如何右键另存为图片,把验证码存为图片后,接下来就是要做,怎么把图片上的内容获取到,借住tesseract工具 1.下载tesseract:http://sourceforge.net ...
java 空指针异常(java.lang.NullPointerException)
在Java中对值为null的指针调用任何方法,就会引发空指针异常(java.lang.NullPointerException).空指针异常绝对是Java中最难查找和调试的一种异常,你永远无法得到任 ...
内网穿透利器 Ngrok 使用教程
ngrok 服务可以分配给你一个域名让你本地的web项目提供给外网访问,特别适合向别人展示你本机的web demo 以及调试一些远程的API (比如微信公众号,企业号的开发) 下面开始教程 Step ...
uGUI练习(五) Draggable Object
练习目标学习制作一个可拖动的UI 一.步骤监听UI的Drag事件,需要我们写一点点的代码. 1.创建一个Panel ,设置size为(100,100) 2.创建DraggableObjectSce ...
Adobe Scout 使用参考说明
Adobe Scout 用于优化 Flash 内容,是一款极为强大的工具,因为它能让您看到 Flash Player 幕后正在发生的事情.但是若明白 Flash Player 为什么做这些事情,您看到 ...
转: Github访问慢解决办法
from: https://yq.aliyun.com/articles/36744 Github访问慢解决办法 zxiaofan 2016-04-20 17:25:00 浏览2156 评论0 摘 ...
LSB最低有效位隐写入门
LSB也就是最低有效位 (Least Significant Bit) 被替换成传递的信息字节.对原图影响很小. 这题可以算是隐写工具[wbStego]的使用入门练习题吧. 第一步,告诉你工具是支持在 ...
Android优化——UI优化（四）使用stytle
使用style替换背景,防止Activity黑色背景闪过 1.原来的布局 <LinearLayout xmlns:android="http://schemas.android.com ...
[资源]PHP使用消息队列
利用PHP操作Linux消息队列完成进程间通信基于HTTP协议的轻量级开源简单队列服务:HTTPSQS[原创] Redis队列——PHP操作简单示例入队操作 <?php $redis = n ...
Eclipse里面启用genymotion
E:/Users/zhuxuekui/AppData/Local/Android/sdk as里面的SDK目录 1.打开eclipse并从云仓库里面下载genymotion插件注意:这里面有一个坑, ...

JQuery学习（2）之Ajax

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

随机推荐

热门专题