ajax

  • 简介
  1. AJAX(Asynchronous JavaScript and XML/异步JavaScript和XML): 是一种进行页面局部异步刷新的技术

①用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中 不是整个页面刷新而是在HTML页面中使用JavaScript创建Microsoft.XMLHTTP对象来向服务器发出请求以及获得返回的数据 就像JavaScript版的WebClient一样 在页面中由Microsoft.XMLHTTP来发出http请求和获得服务器返回的数据 这样页面就不会刷新了
② Microsoft.XMLHTTP是AJAX的核心对象

  • Microsoft.XMLHTTP
  1. 开发一个AJAX功能需要开发浏览器端和服务器端两块程序

①显示服务器端时间实例: 首先开发一个GetDate1.ashx用于输出当前时间 在HTML页面中方一个按钮 onclick中创建Microsoft.XMLHTTP向GetDate1.ashx发送请求 获得返回的数据并且显示到界面上

　　var xmlhttp = new ActiveXObject(“Microsoft.XNLHTTP”); //创建XMLHTTP对象 相当于WebClient
　　If(!xmlhttp){
　　　　alert(“创建xmlhttp对象异常”);
　　　　return false;
　　}
　　xmlhttp.open(“POST”,”GetDate1.ashx”,false); //准备向GetDate1.ashx发送Post请求
　　　　//XMLHTTP默认(也推荐)不是同步请求 也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回 是异步的 因此需要监听onreadystatechange事件
　　Xmlhttp.onreadystatechange = function(){
　　　　if(xmlhttp.readyState == 4){ //服务器返回了
　　　　　　if(xmlhttp.status == 200){ //状态码为200表示成功
　　　　　　　　document.getElementById(“Button1”).value = xmlhttp.responseText; responseText属性为服务器端返回的文本
　　　　　　}
　　　　　　else{
　　　　　　　　alert(“AJAX服务器返回错误！”);
　　　　　　}
　　　　}
　　}
　　xmlhttp.send(); //这时才开始发送请求

②面试常考: 不使用UpdatePanel JQuery等AJAX库编写一个AJAX程序

  1. 页可以再xmlhttp.open()中向服务器端传递参数:

xmlhttp.open(“POST”,”GetDate1.ashx?id=1”,false) //如所传递请求中含有中文 可使用JavaScript函数encodeURI来进行URL编码

  1. 案例: AJAX实现汇率转换

①页面中放一个文本框(输入人民币) 一个下拉列表(美元 日元 港币) 一个按钮 点击按钮在一个span显示转换后的金额 汇率计算在服务器端完成 假设汇率(人民币/外币): 7 0.1 0.9

  • JQuery AJAX
  1. new ActiveXObject(“Microsoft.XMLHTTP”)是IE中XmlHttpRequest对象的创建方法/非IE浏览器中创建方法为new XmlHttpRequest()/为了兼容不同浏览器需编写更多的代码
  2. JQuery中的AJAX简化:

$.post(“CurrentDate.ashx”, {“id”:”2”}, function(data, textStatus){ … });

　　//data参数为请求返回的数据
　　//textStatus为服务器返回状态码
　　//参数在第二个参数以字典方式设置
$.get(…); //因为缓存原因更推荐$.post()
$.ajax(…); //底层函数

  1. 案例: 商品名称带出价格
  •  Json
  1. AJAX传递复杂数据如果自己进行格式定义的话会经历组装 解析的过程 因此AJAX中由一个事实上的数据传输标准Json Json在服务器端将复杂对象序列化为一个字符串 在浏览器端再将字符串反序列化为JavaScript可以读取的对象
  2. Json几乎被所有语言支持
  3. C#中将.NET对象序列化为Json字符串的方法:

JavaScriptSerializer.Serialize(p);

　　//JavaScriptSerializer在System.Web.Extensions.dll中 是.NET3.x中新增的类

  1. JQuery AJAX得到的data是Json格式的数据 通过$.parseJSON(data)方法将Json格式数据转换为JavaScript对象
  2. 案例: 无刷新分页
  3. 案例: 无刷新删除行(配合JQuery中的Effect)
  • (微软AJAX方案)AJAX Extensions
  1. ASP.NET中内置的简化AJAX开发的控件UpdatePanel

①放入ScriptManager UpdatePanel控件 将要实现AJAX的控件放入UpdatePanel控件
②用于实现对性能要求不高的需求

  1. Timer实现定时AJAX效果
  2. UpdateProgress显示"正在加载数据"
  3. AJAXToolkit简介
  •  WCF简化AJAX开发
  1. 开发步骤:

①添加一个Web项目 在Web项目中新建”新建项”→”Web”→”启用了AJAX的WCF服务”
②页面上拖放ScriptManager控件 Services属性中新增一项 Path属性设置为服务路径
③调用服务端方法时
Service1.DoWork(OnDoWorkSuccess, OnDoWorkFailed)

　　//Service1为服务类名 DoWork为方法名 OnDoWorkSuccess为成功时回调函数 OnDoWorkFailed为失败时回调函数 两个函数都有一个参数result 成功时参数作为返回值 失败时参数作为错误消息

  1. 服务器端还可以返回复杂对象 浏览器端可以直接从result读取复杂对象的字段值
  • 全局文件
  1. 添加”Web”→全局应用程序类(注意文件名不要改)

①全局文件是对Web应用生命周期的一个事件响应的地方
②将Web应用启动时初始化的一些代码写到Application_Start中(如Log4Net等)
③Web应用关闭时Application_End调用
④Session启动时Session_Start调用
⑤Session结束(用户主动退出或者超时结束)时Session_End调用
⑥当一个用户请求来的时候Application_BeginRequest调用
⑦当应用程序中出现未捕获异常时Application_Error调用(通过HttpContext.Current.Server.GetLastError()获得异常信息 然后用Log4Net记录到日志中)

  1. 案例: 实现的防盗链
  2. 案例: 屏蔽指定的IP地址
  •  URL重写
  1. SEO(Search Engine Optimization): 搜索引擎优化
  2. URL重写(URLRewrite 伪静态)

①原理: 在Global.asax的Application_BeginRequest中读取请求的URL并使用HttpContext.Current.Rewrite()进行重写
　　Regex reg = new Regex(“.+View-(\d+).aspx”);
　　var m1 = reg.Match(HttpContext.Current.Request.Url.AbsolutePath);
　　if(macth.Success)
　　{
　　　　string id = match.Groups[1].Value;
　　　　HttpContext.Current.RewitePath(“View.aspx?id=” + id);
　　}

  • 问题
  1. 缓存问题: Get请求默认设置从缓存中取

①解决方法一: 传一个每次都变化的参数(如”&ts=“ + new Date())
②使用Post

  1. 中文问题: 请求中含有中文时应使用encodeURI函数进行编码

posted on 2011-09-20 19:17  les_vies  阅读(263)  评论(0)  编辑  收藏  举报

导航