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等等这几种常用无刷新操作方法,下面我来给各位同学介绍介绍. 我们先从最简单的方法看起 ...
随机推荐
- Microsoft Dynamics CRM 2011 面向Internet部署 (IFD) ADFS虚拟机环境搭建的步骤(CRM与ADFS装在同一台服务器上) 摘自网络
1: 安装windows server 2008 R2 中文版 (过程略) 安装完成后设置机器名和IP地址, 本过程机器名 crm5dev,192.168.0.110 dns: 192.168.0.1 ...
- 关于学习Scala语言的一些感悟
进入话题! 我们知道哈,Spark源码采用Scala语言编写,那么阅读Spark源码之前,是否一定先学Scala呢? 我个人认为,不必,只要我们有一些java或c++编写语言的基础,就可以看Spaar ...
- 使用tomcat的jndi方式连接mysql的字符编码设置
最近新项目使用tomcat中配置jndi连接mysql的方式,在使用过程中发现查询条件为中文的时候查询不出结果,经过一通折腾,发现是jndi在连接数据库的时候忘记设置字符编码. 修改之后的完整配置如下 ...
- 程序员提高工作效率的15个技巧【Facebook】
程序员提高工作效率的15个技巧[Facebook] 作者: habadog 日期: 2015 年 02 月 13 日发表评论 (0)查看评论 程序员提高工作效率的15个技巧[Facebook] 1,D ...
- [微信小程序] 终于可以愉快的使用 async/await 啦
[小程序] 终于可以愉快的使用 async/await 啦 这篇文章主要是想说一下 怎么在微信小程序中使用async/await从而逃离回调地狱 背景 最近一直在搞微信小程序 用的语言是TypeScr ...
- [AngularJS] angular-formly: Default Options
angular-formly allows you to keep your forms as DRY as possible. TheoptionsTypes property is one way ...
- 特殊的forward_list操作
为了理解forward_list为什么有特殊版本的添加和删除操作,考虑当我们从一个单向链表中删除一个元素时会发生什么.当添加或删除一个元素时,删除或添加的元素之前的那个元素的后继会发生变化.为了添加或 ...
- 【转】开发者分享如何创造一款优秀的iOS游戏——2013-08-25 17
http://game.dapps.net/gamedev/experience/889.html 创造出<Temple Run>的夫妻团队在高峰时期每天能够获得"好几万&quo ...
- Referenced file contains errors (http://www.springframework.org/schema...错误--转载
Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-3.0.xsd). ...
- 常用工具之stunnel
The stunnel program is designed to work as an SSL encryption wrapper between remote client and local ...