Ajax学习笔记---3种Ajax的实现方法【推荐】
ajax: asynchronous javascript and xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. xml在多语言时较有优势, 但ajax技术实际上较多采用json对象而不是xml来处理数据.
(一) ajax历史....了解性知识
ajax归属于web前端开发技术, 与javascript有着异常紧密的联系. ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(netscape)公司最早发明了livescript脚本语言, 用来丰富网页元素的表现形式, 使网页能够呈现出动态效果. 随后的历次改版升级后就诞生了javascript语言, 与此同期微软(microsoft)公司也看到互联网的前景, 开始涉足并发力于互联网行业, 推出了jscript语言, 可惜没有javascript成熟, 发展迟滞. 最终微软公司对互联网的决心促成了ms对ns的漫长曲折的收购历程.
这里提一下, 动态html语言(dynamic hyper text markup language)就是将javascript放在dom树的元素节点中, 为元素提供动态展示行为.
(二)web前端开发的两个思路： a. javascript + xhr + css b. flash ---> 浏览器插件 ---> flex(adobe); silverlight4.0(ms)
1. ajax: 以ms的xhr(xmlhttprequest)为核心 ---> ajax
2. flash: micromedia ---> 被adobe收购 ---> flex (涵盖了actionscript和rich internet application等技术的组合)
3. silverlight: 微软为了抗衡flex而推出的silverlight
备注:
为了能够在后台异步与服务器进行通讯, 微软在ie中添加了两个组件: 负责与服务器通讯的组件(xmlhttprequest)和xml的处理组件. 采用xml作为数据交换的载体, 在多语言处理时具有优势, 但xml的处理成本较高, 实际上ajax中通常采用json对象在客户端浏览器和服务器之间传递数据.
网页的生成过程其实是由服务器上的一组程序来完成的, 这样为了在客户端的js语言和服务器端的c#语言传递数据, .net提供了json序列化和反序列化器, 来提供服务器端c#对象和json对象之间的转换. 而在浏览器端可以使用eval()函数获取服务器传递过来的json串转化为json对象.
(三)ajax解决什么问题
我们都知道, 在客户端向服务器请求一个页面时, 服务器首先动态的计算并生成出页面, 然后再发给客户端. 客户端浏览器顺序编译并呈现页面.
在没有ajax时: 假如说页面有个用户验证控件, 那么在客户端浏览器呈现用户验证控件时, 会等待服务器的验证结果, 收到结果后才能继续呈现页面元素. 而这个验证过程通常要进行读取数据库等操作, 这就是所谓的同步方式. 而这种方式, 会造成网页呈现的假死状态.
在使用ajax后: 同样是验证控件, 客户端提交了验证请求后, 便继续顺序呈现其他元素. 当取得验证结果后, 由javascript在客户端修改内存中的dom对象后并呈献给用户(注意: 这里修改的只是内存中的dom对象, 而客户端接收的页面文件并没有修改). 这样, 使用异步的方式, 就不会出现假死状态, 同时客户端也节省了等待服务器返回结果时的时间开销.
(四)ajax的实现(3中ajax的实现, 需要说明的是: ajax能够实现的效果, 通过webservice都能实现.)
1. js中的ajax异步调用: a.new b.onreadystatechange(处理responsetext) c.open(get方式和post方式) d.send (同步调用: a.new b.open(get方式和post方式) c.send d.responsetext)
//ajax.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>ajax of javascript & jquery</title>
</head>
<body>
<a href="javascript:getdata();">javascript-ajax: click me</a><br />
<br />
<br />
<input id="btn" type="button" value="jquery-ajax: clike me"/>
<hr />
<div id="show">
</div>
<script type="text/javascript">
function getdata() {
//创建xmlhttprequest通信对象
var xhr;
if (window.activexobject) { //标准情况下, 只能有两个activexobject对象处理通信过程
xhr =new activexobject("microsoft.xmlhttp");
}
elseif (window.xmlhttprequest) {
xhr =new xmlhttprequest();
}
else {
thrownew error("ajax is not supported by this browser");
}
var elem = document.getelementbyid("show"); //用来显示处理结果
//使用onreadystatechange事件处理结果
xhr.onreadystatechange =function() {
if (xhr.readystate ==4) { // readystate表示服务器响应状态. 4: 响应接收完毕
if (xhr.status ==200) { // status 表示 http 请求的状态
var json = xhr.responsetext; //从请求中回应中获得json串
var obj = eval("("+ json +")"); // 借助 eval 将 json 串转化为对象, 在客户端浏览器必须解析为js对象
elem.innerhtml ="<span>"+ obj.name +"</span>";
}
}
}
//通过open设置请求方式
xhr.open("get", "json.ashx", true); //默认为ture, false表示同步方式
//发送请求
xhr.send(null);
/* 同步方式, false表示不适用异步方式
xhr.open("get", "json.ashx", false);
xhr.send(null);
//处理结果
alert(xhr.responsetext);
*/
}
</script>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() { //ready函数, 脚本加载完即执行, 也可以用$(...$("#btn").click...)();加载
$("#btn").click(function showdata() { //按钮上添加onclick事件, 事件处理方法为showdata()
$("#show").load("jquery.ashx"); //从jquery.ashx中获取数据元素(innerhtml的内容), 并显示在div中
});
});
</script>
</body>
</html>
然后还需要在项目中, 添加类似于json.ashx一般处理程序, 用于提供相关数据(如: 表格日历的绘制, 去数据库验证等操作)
//json.ashx
<%@ webhandler language="c#" class="json"%>
using system;
using system.web;
publicclass json : ihttphandler {
publicvoid processrequest (httpcontext context) {
context.response.contenttype ="text/plain";
//对于静态内容, 需要禁用浏览器的缓存, 否则老是旧结果
context.response.cache.setcacheability(httpcacheability.nocache);
string name ="mike";
string jsonformat ="{{ \"name\": \"{0}\" }}"; //{{、}}是为了避免和json中的{冲突而采用的特殊转义符
string json =string.format(jsonformat, name);
context.response.output.write(json);
}
publicbool isreusable {
get {
returnfalse;
}
}
}
//jquery.ashx
<%@ webhandler language="c#" class="jquery"%>
using system;
using system.web;
publicclass jquery : ihttphandler {
publicvoid processrequest (httpcontext context) {
context.response.contenttype ="text/plain";
context.response.cache.setcacheability(httpcacheability.nocache);
datetime now = datetime.now;
string jqueryformat ="<span>{0}</span>";
string jquery =string.format(jqueryformat, now);
context.response.write(jquery);
}
publicbool isreusable {
get {
returnfalse;
}
}
}
2.1 使用ajaxpro2:
a.添加ajaxpro2类库(ajaxpro2.dll) b.webconfig中添加配置文件 c.在app_code中创建类库文件(cs文件)提供ajax服务, 并在页面对应的后台cs文件中注册ajax(page_load事件中) d.在app_code中的类库文件(cs文件中)编写带有ajax标签的处理方法 e.在前台的aspx文件中使用脚本处理结果(修改内存中的dom对象)并显示在页面上
//b.webconfig中添加配置文件
<location path="ajaxpro"> <system.web> <httphandlers> <add verb="*" path="*.ashx" type="ajaxpro.ajaxhandlerfactory,ajaxpro.2"/> </httphandlers> <!-- if you need to have ajax.net professional methods running on the login page you may have to enable your own authorization configuration here. --> <!-- <authorization> <deny users="?"/> </authorization> --> </system.web> </location>
//c.在app_code中创建类库文件(cs文件)提供ajax服务, 并在页面对应的后台cs文件中注册ajax(page_load事件中)
//default.aspx.cs文件
protectedvoid page_load(object sender, eventargs e)
{
ajaxpro.utility.registertypeforajax(typeof(calendarservices)); //ajaxpro会根据注册的类型自动生成脚本
}
//d.在app_code中的类库文件(cs文件中)编写带有ajax标签的处理方法
//calendarservices.cs
using system;
using system.collections.generic;
using system.linq;
using system.web;
publicclass calendarservices
{
[ajaxpro.ajaxmethod]
publicbool save(string date, string tile, string detail)
{
system.threading.thread.sleep(5000); //用来测试异步
returntrue; //这里为简单, 直接返回true
}
}
//e.在前台的aspx文件中使用脚本处理结果(修改内存中的dom对象)并显示在页面上
//default.aspx文件
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default"%>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
日期:<input id="date" type="text"/><br />
标题:<input id="title" type="text"/><br />
详情:<textarea id="detail" cols="80" rows="5"></textarea>
<hr />
<input id="btn" type="button" value="确定"/>
</div>
<div>
<script src="jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("#btn").click(function() {
var date = $("#date").val();
var title = $("#title").val();
var detail = $("#detail").val();
//由ajaxpro生成的js代理, 很像c#中类库的使用, 其中function(result)是异步的结果处理方法
calendarservices.save(date, title, detail, function(result) {
if (result.error !=null) { //服务器上出现异常
alert(result.error.message);
}
if (result.value) { //服务器cs文件中的方法返回永真
alert("服务器返回true! ");
}
});
});
});
</script>
</div>
</form>
</body>
</html>
2.2. 以前使用的老板ajax(维护老项目可能用到, 其实与第2种很类似): a.引用ajax框架类库 b. webconfig中添加配置 c.在app_code中添加ajax服务类, 并在cs文件中注册ajax(page_load事件中) d.在app_code中的cs文件中带ajax标签的处理方法 e.按钮绑定触发js的方法 f.js处理方法
//a. 引用ajax框架的类库ajax.dll
//b. webconfig添加配置
<httphandlers> <add verb="post,get" path="ajax/*.ashx" type="ajax.pagehandlerfactory, ajax"/> </httphandlers>
//c. 在cs文件中注册ajax(page_load事件中)
ajax.utility.registertypeforajax(typeof(sysbase_useredit)); //sysbase_useredit是页面文件名称
//d. 在app_code中的cs文件中带ajax标签的处理方法
[ajax.ajaxmethod]
public dataset getroledata(int roleid)
{
dataset ds =new dataset();
ds = r.selectroledata(string.format(" and id={0}", roleid));
return ds;
}
//e. 按钮绑定触发js的方法
this.ddlrole.attributes.add("onpropertychange", "oncommandinputpropertychange();"); //在page_load事件中基于attribute为按钮绑定方法, 在aspx文件中手动添加也可以
//f. js处理方法
<script>
function oncommandinputpropertychange(){
if (event.propertyname == "value"){
var cmdinput = event.srcelement;
if (cmdinput.value != 0){
//alert(cmdinput.value);
bindrolename(cmdinput.value);
}
}
}
//绑定角色名
function bindrolename(roleid){
//sysbase_useredit是aspx页面的名称
sysbase_useredit.getroledata(roleid,get_allname);
}
function get_allname(response){
var allname = document.getelementbyid("ddlajax");
allname.length = 0;
if (response.value != null){
var ds = response.value;
if(ds != null && typeof(ds) == "object"){
var name = ds.tables[0].rows[0].rolename;
var id = ds.tables[0].rows[0].id;
allname.options.add(new option(name,id));
}
}
}
</script>
3. vs2008集成的ajax:
a.vs2005的话需要安装插件(microsoft asp.net 2.0 ajax extensions) b.紧挨着form元素放置scriptmanager控件 c.在要刷新的table元素首位处, 使用updatepanel和contenttemplate包起来 d.在table元素结尾处的contentemplate和updatepanel之间放置trigger元素, 注册ajax触发按钮 e.引用类库ajax2 f.vs2005需要配置webconfig
//d. 在table元素结尾处的contentemplate和updatepanel之间放置trigger元素, 注册ajax触发按钮(btn_search, btn_delete均为按钮)
<triggers> <asp:asyncpostbacktrigger controlid="aspnetpager1"/> <asp:asyncpostbacktrigger controlid="btn_search"/> <asp:asyncpostbacktrigger controlid="btn_delete"/> </triggers>
//f. vs2005需要配置webconfig
<httphandlers> <!-- 调用ajaxpro.2--> <add verb="post,get" path="ajaxpro/*.ashx" type="ajaxpro.ajaxhandlerfactory, ajaxpro.2"/> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="system.web.script.services.scripthandlerfactory, system.web.extensions, version=1.0.61025.0, culture=neutral, publickeytoken=31bf3856ad364e35"/> <add verb="*" path="*_appservice.axd" validate="false" type="system.web.script.services.scripthandlerfactory, system.web.extensions, version=1.0.61025.0, culture=neutral, publickeytoken=31bf3856ad364e35"/> <add verb="get,head" path="scriptresource.axd" type="system.web.handlers.scriptresourcehandler, system.web.extensions, version=1.0.61025.0, culture=neutral, publickeytoken=31bf3856ad364e35" validate="false"/> </httphandlers>
============================分割线============================
关于第一种: js中的ajax异步调用, 补充点东东, 不单独开篇了
关于参数传递 :
1.
get方式传参, 参数保存在url中, 例如:
xhr.open("get", "json.ashx?name=xxx", true);
xhr.send(null);
在服务端(json.ashx后台代码), 可以用httpcontext类型的参数对象context来获取, 获取方式context.request.querystring["name"]....等等(自己在调试状态下看)
2.
post方式传参, 参数保存在请求包的包体(body)中, 例如:
xhr.open("post","json.ashx",true);
xhr.send("xxx");
或者
xhr.send("name=xxx");
相应的服务器端(json.ashx后台代码), 针对2中"非键值对"、"键值对"有两种获取方法:
非键值对: 用context.request.inputstream获取, 如:
system.io.stream stream = context.request.inputstream;
system.io.streamreader sr = new system.io.streamreader(stream);
string strparam = sr.readtoend();
其中涉及编码转换的, 自己在调整下.
键值对: 用context.request.form["name"]...获取
以上这篇ajax学习笔记---3种ajax的实现方法【推荐】就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。