2.JQuery AJAX
- new ActiveXObject("Microsoft XMLHTTP")是IE中创建XMLHTTPRequest对象的方法。非IE浏览器创建方法是new XmlHttpRequest().为了兼容不同的浏览器需要编写很多代码。
- 用JQuery的回调函数($.post(data,textStatus))中data参数为服务器返回的数据，textStatus为服务器返回状态码，textStatus为"success"表示通信成功。
- JQuery中提供了简化ajax使用的方法。$.ajax()函数是jQuery中提供的ajax访问函数，$.post()是对$.ajax()的post方式提交ajax查询的封装，$.get()是对$.ajax()的get方式提交ajax查询的封装。推荐用post方式，因为post方式没有缓存的问题。
- 如果有请求参数则在第二个参数用字典方式来设置。$.post("GetDate1.ashx",{"id":"2"},function(data,textStatus){}).jQuery帮我们进行了URL编码，因此参数中有中文也不用担心。
XMLHttpRequest对象的open方法
XMLHttpRequest对象的open方法的第3个参数
xmlHttpRequest.open(method,url,true or false);
1.发送信息的方式(post,get)
2.发送的目标( url)
3.发送的布尔变量 true代表异步，为false代表同步
调用xmlHttpRequest对象的send () 把信息发送出去
异步的回调
onreadystatechange属性赋值来设置一个回调函数：
xmlHttpRequest.onreadystatechange=function() {...};
XMLHttpRequest对象的ReadyState属性值列表。
ReadyState取值 描述
0 描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1 描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3 描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态；此时，响应已经被完全接收。
当readyState=4时，
函数会检查HTTP服务器响应的状态值。
当HTTP服务器响应的值为200时，表示状态正常
- /*具体负责处理服务器返回数据的函数*/
- xmlHttpRequest.onreadystatechange = function (){
- //当服务器将数据返回给客户端时,readyState状态值为4
- if(xmlHttpRequest.readyState==4){
- //当服务器返回的数据是正常的数据时,status状态值为200
- if(xmlHttpRequest.status==200){
- //通过XMLHttpRequest对象的responseText属性获取
- //服务器返回的文本信息
- var returnMsg = xmlHttpRequest.responseText;
- //这里为具体的处理方式代码
- }
- }
- }
- 创建XMLHttpRequest用到如下函数：
function CreateXmlHttp()
{
var xmlhttp;
//非IE浏览器创建XmlHttpRequest对象
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} //IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}catch(ex)
{
alert("AJAX创建失败");
}
}
} return xmlhttp;
}
示例1：
用非jQuery的方式在客户端上显示服务器的时间，服务端源码如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace AJAX1
{
/// <summary>
/// AJAXGetTime 的摘要说明
/// </summary>
public class AJAXGetTime : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{ context.Response.ContentType = "text/plain";
//以下的这些都是清除缓存用的，因为用get的方法时，如果有缓存，则回应是从缓存中读取的。
context.Response.Buffer = true;
context.Response.Expires = ;
context.Response.ExpiresAbsolute = DateTime.Now.AddDays(-);
context.Response.AddHeader("pragma", "no-cache");
context.Response.AddHeader("cache-control", "private");
context.Response.CacheControl = "no-cache";
string id = context.Request["id"]; context.Response.Write(DateTime.Now.ToString()+"-->"+id);
} public bool IsReusable
{
get
{
return false;
}
}
}
}
客户端HTML码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function CreateXmlHttp()
{
var xmlhttp;
//非IE浏览器创建XmlHttpRequest对象
if(window.XMLHttpRequest)
{
xmlhttp = new XMLHttpRequest();
} //IE浏览器创建XmlHttpRequest对象
if(window.ActiveXObject)
{
try
{
xmlhttp=new ActiveXObject("Microsoft XMLHTTP");
}
catch(e)
{
try
{
xmlhttp=new ActiveXObject("msxml2.XMLHTTP");
}catch(ex)
{
alert("AJAX创建失败");
}
}
} return xmlhttp;
}
function getServertime()
{
var xmlhttp = CreateXmlHttp();
if (!xmlhttp) {
alert("xmlhttp对象不存在.");
return;
} xmlhttp.open("POST","AJAXGetTime.ashx?id=测试",true);
xmlhttp.onreadystatechange = function () { if(xmlhttp.readyState==4) //注意大小写
{
if(xmlhttp.status==200) { document.getElementById("text1").value = xmlhttp.responseText;
} else
{
alert("AJAX失败.");
return;
}
}
}
xmlhttp.send();
}
</script>
<style type="text/css">
#text1
{
width: 340px;
}
</style>
</head>
<body>
<input type="text" id="text1" value="aa" />
<input type="button" id="btn" value="gettime" onclick="getServertime();" />
</body>
</html>
示例2：用JQuery的方式得到如上服务器的时间，并创建一个新的服务端，用来显示汇率计算。这个操作都在同一个客户端页面上，当用户输入一定数值的人民币并选择要换算的币种（日元，美元等），点击按钮后会把这此信息提交给服务端进行计算，计算后再显示于客户端。
汇率计算服务端：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace JQueryAJAX
{
/// <summary>
/// HV 的摘要说明
/// </summary>
public class HV : IHttpHandler
{ public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string moneytype=context.Request["type"]; //目的币种类型
int amount = Convert.ToInt32(context.Request["amount"]); //人民币数额
float result = ;
if (moneytype == "") //人民币对美元
result = amount / ;
else if (moneytype == "") //人民币对日元
result = amount * ;
else if (moneytype == "") //人民币对英镑
result = amount / ;
context.Response.Write(result); } public bool IsReusable
{
get
{
return false;
}
}
}
}
客户端，记着加入jquery库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
function btnclick() {
$.post("AJAXGetTime.ashx?id="+encodeURI("中国"), function (data, textStatus) {
if (textStatus == "success")
$("#Text1").val(data);
else {
alert("从服务器端获取信息失败.");
} })
} function gethv() {
var amount = $("#txtamount").val(); var type = $("#type").val(); $.post("HV.ashx", { "type": type, "amount": amount }, function (data
, textStatus) { if (textStatus == "success")
$("#txtresult").val(data);
else
alert("服务器出错");
});
}
</script>
</head>
<body> <p>
<input id="Text1" type="text" /><input id="Button1" type="button"
value="gettime" onclick="btnclick();" /></p>
<div id="gethv">
<input type="text" id="txtamount" />
<select id="type">
<option value="1">美元</option>
<option value="2">日元</option>
<option value="3">英镑</option>
</select>
<input type="button" value="计算汇率" onclick="gethv();" />
<input type="text" id="txtresult" />
</div>
</body>
</html>
运行截图：
2.JQuery AJAX的更多相关文章
- IE8/9 JQuery.Ajax 上传文件无效
IE8/9 JQuery.Ajax 上传文件有两个限制: 使用 JQuery.Ajax 无法上传文件(因为无法使用 FormData,FormData 是 HTML5 的一个特性,IE8/9 不支持) ...
- jquery ajax解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯. 废话少说,直接进入正题,我们先来看一些简单的方法,这些方法都是对 ...
- jQuery.ajax 根据不同的Content-Type做出不同的响应
使用H5+ASP.NET General Handler开发项目,使用ajax进行前后端的通讯.有一个场景需求是根据服务器返回的不同数据类型,前端进行不同的响应,这里记录下如何使用$.ajax实现该需 ...
- jQuery.ajax(url,[settings])
概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象. ...
- jQuery Ajax 实例 ($.ajax、$.post、$.get)
jQuery Ajax 实例 ($.ajax.$.post.$.get) 转 Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. ...
- jQuery Ajax传值给Servlet,在Servlet里Get接受参数乱码的解决方法
最近在学jquery ui,在做一个小功能的时候需要将前台的值获取到,通过Ajax传递给Servlet,然后再在返回数据结果,但是在Servlet接受参数的时候,通过后台打印,发现接受乱码,代码示例如 ...
- JQuery+Ajax+Struts2+Hibernate 实现完整的登录注册
写在最前: 下午有招聘会,不想去,总觉得没有准备好,而且都是一些不对口的公司,可是又静不下心来,就来写个博客. 最近在仿造一个书城的网站:http://www.yousuu.com ,UI直接拿来用, ...
- 用.NET MVC实现长轮询，与jQuery.AJAX即时双向通信
两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...
- jQuery AJAX 网页无刷新上传示例
新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...
- 用JQuery Ajax 与一般处理程序 请求数据无刷新，以及如何调试错误
通过 ajax() 与 一般处理程序,请求数据库数据,实现界面无刷新. Jquery ajax 请求参数详细说明 http://www.w3school.com.cn/jquery/ajax_ajax ...
随机推荐
- eclipse 上安装systemgui
http://wiki.eclipse.org/Linux_Tools_Project/PluginInstallHelp http://wiki.eclipse.org/Linux_Tools_Pr ...
- Java读取WEB-INF目录下的properties配置文件
如何在Java代码中读取WEB-INF目录下的properties配置文件,下文给出了一个解决方案. 我们习惯将一些配置信息写在配置文件中,比如将数据库的配置信息URL.User和Password写在 ...
- 后端接收不到AngularJs中$http.post发送的数据的问题
1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pa ...
- svn 1.8.11 命令行提交新添加文件错误
由于公司的svn服务器版本不兼容最新的svn 1.8.11导致 提交代码报错 ➜ images svn ci arrowico.png -m"add images for png ico ...
- STL的基本使用之关联容器：map和multiMap的基本使用
STL的基本使用之关联容器:map和multiMap的基本使用 简介 map 和 multimap 内部也都是使用红黑树来实现,他们存储的是键值对,并且会自动将元素的key进行排序.两者不同在于map ...
- 每次打开VS2010都会报“ devenv.exe -Assert Failure”这个错误
把.net framework4.5中文包卸载掉,, 如果还不行就把.net framework4.5也卸载掉,,然后到微软官网下载net framework4.5安装包安装,安装完后把中文包卸载掉就 ...
- <html:text> Id属性
可能 会遇到这样 的问题,需要通过document.getElementById得到<html:text>标签的id, 可是据说ie设置property后id就是一样的了,不过具体没有去测 ...
- 将MVC中的Controllers、Model和View分别放到单独的项目中
Model: 新建-项目-Windows-类库 MVCTest.Model Controller:新建-项目-Windows-控制台应用程序 MVCTest.Bussiness Views:新建-项目 ...
- Signalr简单入门，使用注意点
注意点:1,创建proxy代理时候,继承了hub的类,方法名在js中,同名,但是默认首字母是小写,2,js中代理毁掉方法的名称和继承了hub的类的方法中的Clients.All.的对象名称要一致(名称 ...
- anjularjs slider控件替代方案
做项目需要一个slider控件,找了很久没有找到合适的指令集,无意间看到可以直接用range替代,不过样式有点丑. <label> <input type="range&q ...