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( ...
随机推荐
- Notepad++中NppExec的使用之一：基本用法
一直用NPP,很长时间了,最近才学习它的各种插件,这篇文章是根据NppExec的用户指南写的.很多地方是翻译的,但不全是翻译,同时也有些东西没有翻译. 一.何为NppExec 简单的说,这个插件可以让 ...
- C#代码创建3D模型
Demo 1:创建三角形 示例代码 构建一个只包含单个三角形及纹理坐标的网格 using UnityEngine; using System.Collections; public class Mes ...
- Sprite Editor 图集切片精灵
切图需求 假设有一张大的UI的图集,我们想把它里面的小图一张一张地切割出来,如果有plist文件,请查阅我的另一篇文章<还原TexturePacker plist 文件 切开各小图片> 今 ...
- Unity3D面试题汇总
1.请描述游戏动画有哪几种,以及其原理. 2.alpha blend 工作原理 3.写光照计算中的diffuse的计算公式 4.lod是什么,优缺点是什么 5.两种阴影判断的方法工作原理 6.MipM ...
- HUDSON（Java开发的一种持续集成工具）
Hudson是Jenkins的前身,是基于Java开发的一种持续集成工具,用于监控程序重复的工作,包括: 1.持续的软件版本发布/测试项目. 2.监控外部调用执行的工作. Hudson的特性 1.易于 ...
- java 8-8 接口的练习
/* 老师和学生案例,加入抽烟的额外功能 分析: 老师和学生都具有共同的变量:名字,年龄 共同的方法:吃饭,睡觉 老师有额外的功能:抽烟(设定个接口),部分抽烟 有共同的变量和方法,设一个父类:per ...
- 承香墨影 Android--Matrix图片变换处理
承香墨影 Android--Matrix图片变换处理 前言 本篇博客主要讲解一下如何处理对一个Bitmap对象进行处理,包括:缩放.旋转.位移.倾斜等.在最后将以一个简单的Demo来演示图片特效的变换 ...
- Java中是否可以继承String类，为什么
Java中,是否可以继承String类?为什么? 答案: 不可以,因为String类有final修饰符,而final修饰的类是不能被继承的,实现细节不允许改变. public final class ...
- 【转】【C#】C#性能优化总结
1. C#语言方面 1.1 垃圾回收 垃圾回收解放了手工管理对象的工作,提高了程序的健壮性,但副作用就是程序代码可能对于对象创建变得随意. 1.1.1 避免不必要的对象创 ...
- heartbeat初探
1,概念及原理 http://www.mingxiao.info/tag/heartbeat/