JQuery AJAX介绍
new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法。
非IE浏览器中创建方法是new XmlHttpRequest()。
为了兼容不同的浏览器需要编写很多代码
回调函数中data参数为服务器返回的数据,textStatus为服务器返回状态码,textStatus为"success"表示成功。
JQuery中提供了简化ajax使用的方法。
$.ajax()函数是JQuery中提供的 ajax访问函数,$.post()是对$.ajax()的post方式提交ajax查询的封装,$.get()是对$.ajax()的get方式
提交ajax查询的封装。推荐用post方式,因为post方式没有缓存的问题,演示,get方式中缓存处理的处
理方法。todo:好像服务端异常404、500等回调方法并不会被调用。
如果有请求参数则在第二个参数用字典方式来设置
$.post("GetDate1.ashx", {"id":"2"},function(data, textStatus)
JQuery帮我们进行了URL编码,因此参数中有中文也不用担心。
案例1:JQuery AJAX版的汇率转换。注 status指的是通讯是否成功
function zhuanghuan() {
var amount = $("#count").val();
var type = $("#SelectType").val();
$.post("huilv.ashx",{"amount":amount,"type":type}, function(data, state) {
if (state == "success") { $("#requst").val(data);
} else {
alert("ajax失败!");
}
});
}
其中 {"amount":amount,"type":type} 是代表参数,可不加,直接写在第一个参数里面
案例2:填入商品名称,AJAX 自动带出价格填充到价格框
1.先创建数据库T_Products表,字段(Id,Name,Price),生成强类型DataSet,增加个按Name查询数据的方法
SELECT Id, Name, Price FROM T_Products where Name=@name
2.创建HTML,增加两个文本框就行
产品名<input id="CPname" type="text" />
价格<input id="Price" type="text" />
3.创建处理程序页面 GetPrice.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["name"]; //取得产品名
var data = new T_ProductsTableAdapter().GetDataByName(name); //通过产品名查询
if (data.Count > ) //如果查询到的话
{
context.Response.Write(data.Single().Price); //返回此产品的价格
}
else
{
context.Response.Write("none"); //否则返回 none
}
}
3.创建Javascript脚本,使用JQury,使用AJAX
<script type="text/javascript">
$(function() { //页面一加载完毕后,就加载此函数
$("#CPname").blur(function() { //当#CPname控件失去焦点的时候
var Name = $("#CPname").val(); //获得用户输入的产品名 $.post("GetPrice.ashx", { "name": Name }, function(data, state) {
if (state == "success") { //如果状态成功
if (data != "none") {
$("#Price").val(data); //将返回的值(价格)写入到#Price控件中
}
else {
$("#Price").val("没有找到你要的东西!");
}
}
})
})
})
</script>
//------- 下面是用纯Javascript写的
<script type="text/javascript">
function price() {
var name = document.getElementById("CPname").value;
var Cname = encodeURI(name); //注意中文的转换,在JQury中不用,好像自动转换 var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("xmlhttp创建失败!");
return false;
}
xmlhttp.open("Post", "GetPrice.ashx?name=" + Cname);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var val = xmlhttp.responseText;
if (val != "none") {
document.getElementById("Price").value = xmlhttp.responseText;
} else {
document.getElementById("Price").value = "没有找到你要的东西";
return false;
}
}
}
}
xmlhttp.send();
}
如果是这样写的话,就需要在 CPname控件中加入 onblur() 失去焦点时的事件了如:
<input id="CPname" type="text" onblur="price()" />
案例3:用 Repeater 加载用户的评论,实现用户评论无刷新,动态网页
1.HTML设置
<ul id="ulComment">
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="odsPost">
<ItemTemplate>
<li>
IP:<%#Eval("IPAddr") %><br />
日期:<%#Eval("PostDate") %> <br />
内容:<%#Eval("msg") %><br/>
</li>
<hr color="red" />
</ItemTemplate>
</asp:Repeater>
</ul>
<textarea id="txtMsg" name="S1"></textarea><br />
<input id="btnPost" type="button" value="评论" onclick="post()" />
2.处理程序页面 PostComment.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string msg = context.Request["msg"];
string ip = context.Request.UserHostAddress;
new T_PostsTableAdapter().Insert(ip, msg, DateTime.Now);
context.Response.Write("ok");
}
3.Javascript设置
<script type="text/javascript">
function post() {
var emsg = document.getElementById("txtMsg").value;
var msg = encodeURI(emsg);
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
if (!xmlhttp) {
alert("XMLHTTP创建失败");
}
xmlhttp.open("POST", "PostComment.ashx?msg=" + msg, false);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
if (xmlhttp.responseText == "ok") {
alert("发表成功!");
var newComment = "<li>日期:" + new Date().toLocaleTimeString() + "<br />
IP:自己<br />" + "内容:" + document.getElementById("txtMsg").value + "<br />
<hr color='pink' />";
document.getElementById("ulComment").innerHTML += newComment;
}
}
}
}
xmlhttp.send();
}
</script>
案例4:用静态页面 ul 加载用户的评论,静态网页
1.HTML设置
<ul id="ulComment">
2.处理程序页面设置 htmlPost.ashx
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
var comment = new T_PostsTableAdapter().GetData();
StringBuilder sb = new StringBuilder();
foreach (var items in comment)
{
sb.Append(items.IPAddr).Append("|").Append(items.PostDate).Append("|")
.Append(items.Msg).Append("$");
context.Response.Write(sb.ToString().Trim('$'));
}
}
3. Javascript设置
<script type="text/javascript">
$(function() {
$.post("htmlPost.ashx", function(data, status) {
if (status != "success") {
alert("<li>加载失败!</li>");
return;
}
var lines = data.split("$");
for (var i = 0; i < lines.length; i++) {
var line = lines[i];
var file = line.split("|");
var comment = $("<li>IP:" + file[0] + "<br />日期:" + file[1] + "<br />
内容:" + file[2] + "</li><br /><hr color='red' />");
$("#ulComment").append(comment);
}
})
})
</script>
JQuery AJAX介绍的更多相关文章
- jquery ajax局部加载方法介绍
[导读] 在jquery中实现ajax加载的方法有很多种,不像以前的js的ajax只有那一种,下面我们介绍jquery ajax实现局部加载方法总结,有需要了解的朋友可参考.例 代码如下复制代码 $ ...
- 关于Jquery中ajax介绍
jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...
- JQuery.Ajax之错误调试帮助信息介绍
下面是Jquery中AJAX参数详细列表: timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async Boolean (默认: true) 默认设置下,所有请求均为异 ...
- jQuery Ajax 实例 具体介绍$.ajax、$.post、$.get的使用
Jquery在异步提交方面封装的非常好.直接用AJAX非常麻烦须要处理浏览器之间的兼容问题,Jquery大大简化了我们的这些操作操作.不用在考虑浏览器这方面的问题,能够直接使用! $.post.$.g ...
- jquery ajax 全介绍
下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求 ...
- JavaWeb网上图书商城完整项目--12.项目所需jquery函数介绍之ajax
jquery中使用ajax发送异步请求 下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...
- jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法
最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- jQuery学习之jQuery Ajax用法详解
jQuery Ajax在web应用开发中很常用,它主要包括有ajax,get,post,load,getscript等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
随机推荐
- Casio普通计算器编程
用xelatex写了个奇怪的东西……欢乐向 PDF http://files.cnblogs.com/htfy/calc.pdf TEX http://files.cnblogs.com/htfy/ ...
- hdu 2102 A计划(优先队列+dfs)
改了好久,上午来实验室打出来了,运行就是不对,一直找啊找!还是没找到,最后突然停电了,打好的代码还没保存呢! 刚才来的时候又重新打了一遍!!!结果一个小小的错误wrong了好久!!! 在dfs值返回时 ...
- Java 随机生成中文姓名,手机号,邮编,住址
package lovo; import java.util.HashMap; import java.util.Map; /** * 随机生成中文姓名,性别,Email,手机号,住址 * @auth ...
- Hadoop-2.2.0中文文档——MapReduce 下一代 -——集群配置
目的 这份文档描写叙述了怎样安装.配置和管理从几个节点到有数千个节点的Hadoop集群. 玩的话,你可能想先在单机上安装.(看单节点配置). 准备 从Apache镜像上下载一个Hadoop的稳定版本号 ...
- mysqltuner
http://mysqltuner.com/ MySQLTuner-perl MySQLTuner is a script written in Perl that will assist you w ...
- 容器大小的改变以及容器操作可能使迭代器失效、vector对象的容量变化
1 改变容器的大小 我们可以使用resize来增加或缩小容器,与往常一样,array不支持resize.如果当前大小大于所要求的大小,容器后面的元素会被删除:如果当前大小小于新大小,会将新元素添加到容 ...
- QT:QBitArray
QbitArray类提供位操作序列. include<QBitArray> 公有函数: QBitArray () QBitArray ( int size , bool valu ...
- UNIX下的环境变量--转载
所有环境变量名都是大写小写,系统会当作shell script自定义变量,而不会当作环境变量 [root@mac-home macg]# echo $path ...
- arc项目中使用非arc文件
因为之前没有ARC机制,好多比较好的类库都是使用的非ARC,或是有些大牛还是不喜欢用ARC,封装的类也是非ARC的,想要在自己的ARC项目中使用这些非ARC类库,只需要简单的设置一下就可以了. 1.在 ...
- Linq to SQL只支持SQL Server(所选对象使用不支持的数据提供程序)