嘿嘿。今天学习了AJAX的几个方法
今天学习了AJAX的几个方法，其实我很早在公司实习的时间就认识了它，但是对它一无所知，也并没有去学习它，今天学习它让我感到很兴奋因为重新了解了它，嘿嘿，下面就来总结一下今天学习的吧。
一.在javascript中写AJAX
<script>
window.onload = function () {
document.getElementById("txtName").onblur = function () {
var xml = new XMLHttpRequest(); //1 首先要创建异步对象
xml.open("get", "JSAjax.ashx", true);//2 以get方式打开要发送的地址
xml.onreadystatechange = function () {
if (xml.statusText == ) {
alert(xml.responseText);//当接受状态等于4的时候，已经接受到了服务器传递过来的值。
}
}
xml.send(null);//发送邮件，当为get方式时间发送的请求为空
}
} //window.onload = function () {
// document.getElementById("txtName").onblur = function () {
// var xml = new XMLHttpRequest();
// xml.open("post", "JSAjax.ashx", true);
// xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// xml.onreadystatechange = function () {
// if (xml.statusText == 4) {
// alert(xml.responseText);
// }
// }
// xml.send("txtname="+this.value)
// }
//}
</script>
</head>
<body>
<input type="text" name="txtname" id="txtName"/>
</body>
</html>
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string name = context.Request.QueryString["txtname"];
//string name = context.Request.Form["txtname"];
if (!string.IsNullOrEmpty(name))
{
context.Response.Write("您的用户名"+name + "可用");
}
else
{
context.Response.Write("您的用户名不可用");
}
}
上面是在javascript中写的ajax，Ajax在本质上是一个浏览器端的技术，Ajax技术之主要目的在于局部交换客户端及服务器间之数据，这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入整个版面来更新资料，也就是所谓的Refresh without Reload(轻刷新)与服务器之间的沟通，完全是透过Javascript来实行，使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序，AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或DOM 来帮你呈现结果，因为所有动作都是由Javascript代劳，所以省去了网页重载的麻烦，使用者也感受不到等待的痛苦。使用XMLHttpRequest对象 按照下面模式，可以同步地XMLHttpRequest对象：创建对象；-new创建请求； -open（）发送请求；-send（），但是使用javascript比较麻烦，于是就改变为了jquery的使用方法。
二.JQuery中写AJAX
1.AJAX的$.Load事件( url,[,data][.callback])
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script>
$(function () {
$("#Send").click(function () {
$("#resText").load("Ajax.ashx", { txtemail: "123@qq.com" }, function (msg) {
alert(msg);
});
});
});
</script>
<body>
<input type="button" value="AjaxLoad " id="Send"/>
<div class="comment">
已有评论
</div>
<div id="resText"> </div>
</body>
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string email = context.Request.Form["txtemail"];
if (!string.IsNullOrEmpty(email))
{
context.Response.Write("<span>您的邮箱地址为"+email+"可用</span>");
}
else
{
context.Response.Write("<span>您的邮箱地址为" + email + "不可用</span>");
}
}
url：发送的地址，data：发送给服务器的键值对，callback：回调函数。
2.$.Get和$.Post方法
<script>
$(function () {
//$("#send").click(function () {
// $.get("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {
// $("#resText").html(msg);
// });
//});
$("#send").click(function () {
$.post("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {
$("#resText").html(msg);
});
});
});
</script>
<body>
<form id="form1" action="#">
<p>评论:</p>
<p>姓名:<input type="text" name="username" id="username" /></p>
<p>内容:<textarea name="content" id="content" rows="" cols=""></textarea></p>
<p><input type="button" name="name" value="提交 " id="send" /></p>
</form>
<div class="comment">
已有评论
</div>
<div id="resText">
</div>
</body>
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
//string name = context.Request.QueryString["username"];
//string content = context.Request.QueryString["content"];
string name = context.Request.Form["username"];
string content = context.Request.Form["content"];
if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(content))
{
context.Response.Write("<span>"+name+"评论:"+content+"</span>");
}
}
url：发送的地址，data：发送给服务器的键值对，callback：回调函数。
3.$.ajax方法
<script>
$(function () {
$("#send").click(function () {
$.ajax({
type: "post",
url: "1.js",
dataType: "script",
success: function (msg)
{
alert(msg);
}
});
});
})
</script>
url：发送的地址，type:请求的类型，timeout：请求时间，beforesend是在请求之前，complete：回调函数，success:成功后的回调函数。
今天就简单的总结到这里啦，已经很晚啦，嘿嘿，休息。加油加油！！！
嘿嘿。今天学习了AJAX的几个方法的更多相关文章
- 前端学习——使用Ajax方式POST JSON数据包
0.前言 本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...
- jquery学习之AJAX
1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...
- java_web学习(16)Ajax
Ajax Ajax(Asynchronous JavaScript and XML的缩写),允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax. Ajax:一种不用 ...
- jQuery 学习05——AJAX：定义、load()方法、get()/post()方法
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). load() 方法:从服务器加载数据,并把返回的数据放入被选元素中. 语法:$ ...
- 关于我们ajax异步请求的方法与知识
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...
- 小菜学习设计模式（三）—工厂方法（Factory Method）模式
前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...
- jQuery中的Ajax几种请求方法
在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我 ...
- jquery实现AJAX的4种方法
当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和 HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码 ...
- Jquery Ajax调用aspx页面方法
Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...
随机推荐
- Google Maps Android API v2 (2)- 地图对象
地图对象 Android的谷歌地图API允许你在你的Android应用程序中显示谷歌地图.在谷歌地图移动(GMM)的应用程序,你看到的地图,这些地图具有相同的外观和API暴露出许多相同的功能.GM ...
- 手机APP有三类：原生APP，WebAPP，HybridApp
搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo 目前的手机APP有三类:原生APP,WebAPP,HybridApp:HybridApp结合了前两类APP各自的优点, ...
- POJ1274 The Perfect Stall【二部图最大匹配】
主题链接: id=1274">http://poj.org/problem? id=1274 题目大意: 有N头奶牛(编号1~N)和M个牛棚(编号1~M). 每头牛仅仅可产一次奶.每一 ...
- linux下一个oracle11G DG建立（一个）：准备环境
linux下一个oracle11G DG建立(一个):准备环境 周围环境 名称 主库 备库 主机名 bjsrv shsrv 软件版本号 RedHat Enterprise5.5.Oracle 11g ...
- WPF技术触屏上的应用系列（一）: 3D 图片（照片）墙、柱面墙（凹面墙或者叫远景墙、凸面墙或者叫近景墙）实现
原文:WPF技术触屏上的应用系列(一): 3D 图片(照片)墙.柱面墙(凹面墙或者叫远景墙.凸面墙或者叫近景墙)实现 去年某客户单位要做个大屏触屏应用,要对档案资源进行展示之用.客户端是Window7 ...
- memset功能的具体说明
1.void *memset(void *s,int c,size_t n)总的效果:内存空间开辟了 s 第一 n 字节的值设置为一个值 c. 2.样本#include void main(){cha ...
- Redis时延问题
单线程你别阻塞,Redis时延问题分析及应对 内容目录: 耗时长的命令造成阻塞 fork产生的阻塞 持久化造成的阻塞 单线程你别阻塞,Redis时延问题分析及应对 Redis的事件循环在一个线程中处理 ...
- EL与JSTL注意事项汇总
EL使用表达式(5一个 问题) JSTL使用标签(5问题) 什么是EL.它可以用做? EL全名Expression Language在JSP使用页面 格公式${表达式} 样例${requestScop ...
- uploadify控制 上传图片到百度云存储
最近使用uploadify 控制图片上传到百度网盘....总的想法是 招待会uploadify获取文件传入后台,调用百度云存储api上传到百度网盘,返回url 联系.送存储在数据库中的链接.因此,我们 ...
- cocos2d-html5
cocos2d-html5 简单的混乱 在正常情况下,build设置完毕后 跑ant编 变更后cocos2d.js 简单直观so easy 只需要上传cocos2d.js/game.js/index文 ...