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. JAVA动态代理详解

    1.什么是代理 代理模式是常用的Java 设计模式,它的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等. 2.什么是动态代理 在程 ...

  2. php简单命令代码集锦

    if(file_exists("file.htm"))// 检查是否存在此文件 if(file_exists("chat"))//检查是否存在此文件夹 rena ...

  3. bluehost 邮箱设置问题

    问题描述: e-elitech.com域名,elitechus.com域名均在阿里云注册,en.e-elitech.com解析到bluehost虚拟主机,www.elitechus.com也解析到bl ...

  4. Redis学习笔记(二)-key相关命令【转载】

    转自 Redis学习笔记(二)-key相关命令 - 点解 - 博客园http://www.cnblogs.com/leny/p/5638764.html Redis支持的各种数据类型包括string, ...

  5. Servlet程序开发-- Servlet生命周期

    生命周期是一个程序的存在周期,受容器管理,所以容器决定生命周期. 生命周期包括 加载,初始化,服务,销毁,卸载 5个部分 加载:第一次使用的时候加载 初始化:init方法, 失败的话,直接卸载,如果成 ...

  6. XML 从基础到精通

    1.简介 XML(可扩展标记语言)语言是一种数据交换标准,用于存储数据:关键词是标记: XML具有以下优点: (1) 方便的穿过防火墙,在不同的操作系统之间通信,跨语言,跨平台.数据共享非常方便.(J ...

  7. 关于tomcat 成功运行之后内存泄露

    在window-preferences  里 搜索 tomcat-jdk 加上以下内容即可 -Xms256m -Xmx512m -XX:MaxNewSize=256m -XX:MaxPermSize= ...

  8. tcp 重组原理

    原文: http://blog.chinaunix.net/uid-21768364-id-4823449.html 1 .引言TCP/IP 协议现在已经广泛的被应用.数据在网络上应用 TCP/IP ...

  9. hrbustoj 2283 heap解题报告

    这是我们校赛的一道题,给一个字符串,判断这是字符串描绘的是不是一个堆,并不难,只是一个简单的模拟,但是也稍微有点麻烦,最起码我的方法代码量比较大,主要用栈做一个父亲与儿子的位置匹配,匹配的方法应该有很 ...

  10. Chapter 1 First Sight——6

    "You didn't need to do that, Dad. I was going to buy myself a car." 你不需要这样,父亲,我会自己买一辆车的 &q ...