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

          常:            |  序 是:

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

附加(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的更多相关文章

  1. jQuery学习笔记之Ajax用法详解

    这篇文章主要介绍了jQuery学习笔记之Ajax用法,结合实例形式较为详细的分析总结了jQuery中ajax的相关使用技巧,包括ajax请求.载入.处理.传递等,需要的朋友可以参考下 本文实例讲述了j ...

  2. jQuery学习小结3——AJAX

    一.jQuery的Ajax方法 jQuery对Ajax 做了大量的封装,使用起来也较为方便,不需要去考虑浏览器兼容性.对于封装的方式,jQuery 采用了三层封装: 最底层的封装方法为——$.ajax ...

  3. jQuery学习笔记(Ajax)

    jQuery对Ajax操作进行了封装,在jQuery中$.ajax方法属于最底层的方法,第2层是$.load().$.get().$.post()方法,第3层是$.getScript()和$.getJ ...

  4. 初步学习jquery学习笔记(六)

    jquery学习笔记六 AJAX 简介 AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. load() 方法 load() 方法从服务器加载数据,并把返回的数据 ...

  5. jQuery学习笔记之jQuery的Ajax(3)

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  6. jquery学习笔记(五):AJAX

    内容来自[汇智网]jquery学习课程 5.1 ajax AJAX 是与服务器交换数据的艺术,它在不重载全部页面的情况下,实现了对部分网页的更新. AJAX = 异步 JavaScript 和 XML ...

  7. jQuery学习之旅 Item10 ajax快餐

    1. 摘要 本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍. 本篇文章讲解如何使用jQuery方便快捷的实现A ...

  8. jQuery学习之路(1)-选择器

    ▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...

  9. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  10. jQuery 学习笔记

    jQuery 学习笔记   一.jQuery概述    宗旨: Write Less, Do More.    基础知识:        1.符号$代替document.getElementById( ...

随机推荐

  1. openPOWERLINK开源POWERLINK协议栈说明文档中文非官方翻译

    GitBook分享,翻译进行中:https://winshton.gitbooks.io/openpowerlink-stack-cn/content/

  2. NOIP2010普及组 三国游戏 -SilverN

    #include<iostream> #include<cstdio> #include<algorithm> #include<cmath> usin ...

  3. listview中OnItemClick方法各个参数的作用

    OnItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) 1.arg0,arg2 m_listview.setOnI ...

  4. Html5 Geolocation获取地理位置信息

    Html5中提供了地理位置信息的API,通过浏览器来获取用户当前位置.基于此特性可以开发基于位置的服务应用.在获取地理位置信息前,首先浏览器都会向用户询问是否愿意共享其位置信息,待用户同意后才能使用. ...

  5. AC日记——过河卒 洛谷 1002

    题目描述 棋盘上A点有一个过河卒,需要走到目标B点.卒行走的规则:可以向下.或者向右.同时在棋盘上C点有一个对方的马,该马所在的点和所有跳跃一步可达的点称为对方马的控制点.因此称之为“马拦过河卒”. ...

  6. 定制你的Unity编辑器

    Unity的编辑器可以通过写脚本进行界面定制,包括添加功能菜单,今天写游戏Demo用到了记录一下. 为Unity添加子菜单 示例程序 [AddComponentMenu("Defend Ho ...

  7. Jira-Clone与发邮件的使用

    1.克隆问题 包括两部分,先进行Clone,再进行移动 a.选择要克隆的问题,点击More Actions-Clone,在弹出框“复制问题”中,点击“创建”按钮即克隆成功 b.移动问题,点击More ...

  8. Hill密码

    希尔密码(Hill Password)是运用基本矩阵论原理的替换密码,由Lester S. Hill在1929年发明.每个字母当作26进制数字:A=, B=, C=... 一串字母当成n维向量,跟一个 ...

  9. 准备写一些读书笔记,最近在填坑 SQL学习指南 Spring in Action effective Java

    把一些读书的理解通过白板图的形式展示出来,加深自己的认识, 因为目前没有工程项目练手,暂时在学习中把这些知识深化认识一下

  10. WPF RadioButton 转换

    模型 public class people { public string name{get;set;} public bool? sex{get;set;} } 转换器 namespace Hel ...