AJAX含义: 即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。

  AJAX可以跨语言传递数据,所需文件类型是一般处理程序(数据接口):ashx

数据交换格式:

  xml:

    结构不清晰

    代码量比较大

    查找起来比较费事

    非面向对象结构
  json:

    结构清晰

    代码量相对较小

    面向对象的处理解析方式,查找数据很简单

json的格式:

  键值对

    {"key1":"value","key2":"value"}

  多个对象的json

    [{"key1":"value","key2":"value"},{"key1":"value","key2":"value"},{"key1":"value","key2":"value"}]

AJAX使用

  JS部分的固定格式:(需引用jquery)

$.ajax({
url: "ajax/bbb.ashx", //要将此次请求提交到哪个服务端去
data: { "zhangke": c }, //给服务端带的数据,可以没有,也可以多个
type: "post", //传递的方式
dataType: "json", //数据传递的格式
success: function (aaa) {
document.getElementById("Label1").innerHTML = aaa.lmz;
if (aaa.xc == "true") {
document.getElementById("Label1").style.color = "green";
}
else {
document.getElementById("Label1").style.color = "red";
}
}
});
后台:
public void ProcessRequest (HttpContext context) {

        string s = context.Request["zhangke"];

        string end = "{\"lmz\":\"恭喜!用户名可用!\",\"xc\":\"true\"}";

        if (s == "zhangsan" || s == "lisi")
{
end = "{\"lmz\":\"用户名已被占用!\",\"xc\":\"false\"}";
} context.Response.Write(end);
context.Response.End(); }

  注意:json的格式一定不能错,中间的许多双引号需要转义符,如果容易弄错,个人方法是可以先用个其他符号代替,比如单引号,然后对字符串进行操作把里面的所有单引号替换为双引号

AJAX扩展:(加载多行数据)

  关键部分是后台中需要给JS传递过去多个json对象,以及JS中如何把多个对象的数据加载到表格中

  首先,写好查询方法,查询出需要的数据,返回一个泛型集合,然后用循环拼接出json,特别要注意逗号的拼接

string json = "[";

        List<Users> ulist = new UsersData().Select(c, n);

        int count = 0;
foreach (Users u in ulist)
{
if (count > 0)
{
json += ",";
} json += "{\"username\":\"" + u.UserName + "\",\"password\":\"" + u.PassWord + "\",\"nickname\":\"" + u.NickName + "\",\"sex\":\"" + (u.Sex ? "男" : "女") + "\",\"birthday\":\"" + u.Birthday.ToString("yyyy年MM月dd日") + "\",\"nation\":\"" + u.Nation + "\",\"class\":\"" + u.Class + "\",\"age\":\"" + u.Age + "\"}";
count++;
} json += "]"; context.Response.Write(json);
context.Response.End();
 
然后在界面的表格中,我们需要先写一个tbody标签并给一个id,创建一个变量,把从后台接收过来的多个json对象中的数据进行拼接加工,把这个变量拼接成表格中一段完整的HTML代码,然后使用innerHTML直接添加到tbody中
$.ajax({
url: "ajax/Load.ashx",
data: { "count": count, "number": number },
type: "post",
dataType: "json",
success: function (data) {
document.getElementById("tbody").innerHTML = "";
for (i in data) {
var end = "<tr>";
end += "<td>" + data[i].username + "</td>";
end += "<td>" + data[i].password + "</td>";
end += "<td>" + data[i].nickname + "</td>";
end += "<td>" + data[i].sex + "</td>";
end += "<td>" + data[i].age + "</td>";
end += "<td>" + data[i].birthday + "</td>";
end += "<td>" + data[i].nation + "</td>";
end += "<td>" + data[i].class + "</td>";
end += "</tr>"; document.getElementById("tbody").innerHTML += end;
}
document.getElementById("sp-number").innerHTML = number;
}
});

AJAX异步加载的更多相关文章

  1. 淘宝购物车页面 智能搜索框Ajax异步加载数据

    如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...

  2. Scrapy爬虫框架教程(四)-- 抓取AJAX异步加载网页

    欢迎关注博主主页,学习python视频资源,还有大量免费python经典文章 sklearn实战-乳腺癌细胞数据挖掘 https://study.163.com/course/introduction ...

  3. jQuery的AJax异步加载

    主要用到load()方法以及getScript()方法,具体以一个例子说明: 在现有html文件中加载一个拟好的片段,以及在片段加载完成之前阻止用户进一步操作的弹出框. 首先是现有html代码,无任何 ...

  4. ajax异步加载问题

    使用ajax异步加载数据,在之后需要用到这个数据时,应该将之后的js一并写入ajax函数中,否则后面的js不能找到动态拼接的dom节点. 或者将其封装成方法,在ajax动态加载数据的最后调用该方法.

  5. Ajax 异步加载

    AJAX (Asynchronous JavaScript and XML,异步的 JavaScript 和 XML).它不是新的编程语言,而是一种使用现有标准的新方法,是在不重新加载整个页面的情况下 ...

  6. 使用Ajax异步加载页面时,怎样调试该页面的Js

    前言-本人不是干前端的,所以有的名词不专业 在前端中,有时候会遇到这样的框架,http://172.17.11.151:8060/frontend/backend.html#1.html (通过解析U ...

  7. ajax异步加载回跳定位

    1)首先,问题是这样的:page1在一个滚动到页面底部加载更新的函数(功能),当页面滚动了第二页(或更多页)时,点击链接跳转到了其他页面(page2),在page2有返回按钮,当从page2返回pag ...

  8. ajax 异步加载显示等待效果

    css: #loading { width:170px; height:25px; border:3px solid #C3DAF9; position:absolute; top:300px; le ...

  9. ajax异步加载遮罩层特效

    <!doctype html> <html> <head> <title>遮罩层(正在加载中)</title> <meta chars ...

随机推荐

  1. IDL 实现PCA算法

    在多元统计分析中,主成分分析(Principal components analysis,PCA)是一种分析.简化数据集的技术.主成分分析经常用于减少数据集的维数,同时保持数据集中的对方差贡献最大的特 ...

  2. “找回” Envi 快捷方式

      Envi+IDL文件夹挪到别的电脑,不用安装,直接可以使用.但是桌面和开始菜单没有了Envi,IDL,envi+idl的快捷方式,很不方便.   记录一下快捷方式命令行,备用: envi快捷方式 ...

  3. 优化viewHolder

  4. codeforces div2 677 D

    http://codeforces.com/problemset/problem/677/D 题目大意: 给你一个n*m的图,上面有p种钥匙(p<=n*m),每种钥匙至少有一个,期初所有为1的钥 ...

  5. 【转载】区间DP

    http://www.cnblogs.com/zsboy/archive/2013/03/08/2950261.html 博客园 首页 新随笔 联系 订阅 管理 定义区间DP   区间动态规划问题一般 ...

  6. Android MediaScanner 详尽分析

    [Innost]: http://blog.csdn.net/Innost/article/details/6083467 ====================================== ...

  7. filters

    http://www.cloudera.com/content/cloudera/en/documentation/core/latest/topics/admin_hbase_filtering.h ...

  8. <a href="#" onclick="history.back();"></a>这样写为什么是对的? -(转)

    为什么不用这样写?<a href="#" onclick="javascript:history.back();"></a> 正解是: ...

  9. 服务器遭受 ssh 攻击

    查看auth.log日志,差点吓一跳,好多攻击记录. vim  /var/log/auth.log 才两天的功夫,900多万条记录, 一些解决应对的办法: 43down voteaccepted It ...

  10. CentOS6.5 常用命令

    卸载 rpm -e XXX yum -y remove XXX 查看内核版本 cat /proc/version