ASP.NET知识总结(8.AJAX异步)

AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML指一种创建交互式网页应用的网页开发技术。
 
不是指一种单一的技术,而是有机地利用了一系列相关的技术: 简单理解为:JavaScript + XMLHttpRequest + CSS +服务器端 的集合
 
 
 
AJAX特点
Ajax在本质上是一个浏览器端的技术 Ajax技术之主要目的在于局部交换客户端及服务器间之数据
这个技术的主角XMLHttpRequest 的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新) 与服务器之间的沟通,完全是透过Javascript 来实行 使用XMLHttpRequest 本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序 AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript 代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦 注:JavaScript是一门单线程语言。无法将指定的一段js开启一个新的线程来执行。 
 
 
XMLHttpRequest对象
简而言之:它可以异步从服务器端获取txt或者xml数据 老版本IE:             new ActiveXObject("Microsoft.XMLHTTP"); 新版本浏览器:             new XMLHttpRequest();
 
 
异步请求基本步骤
使用XMLHttpRequest对象  按照下面模式,可以同步地XMLHttpRequest对象:
 
创建对象; - new  (叫助手过来) 创建请求; - open (告诉他要去做的事情) 发送请求; - send (去吧)
 
主要方法及操作步骤:  <1>获取对象:构造方法  <2>建立连接:方法open(method(采用HTTP协议请求方式GET  POST),url(网址地址),isAsync(是否异步  true---同意异步))  <3>配置获取反馈:属性onreadystatechange(状态变化的监听)  <4>发送消息:方法send
 
 
创建XMLHttpRequest对象
先来创建XMLHttpRequest对象 在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为:  var xhr = new XMLHttpRequest(); 在IE5/6中代码为:  var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);   注意,JavaScript区分大小写。
 
 
编写回调函数
1.在xhr.send之前添加设置回调函数代码: xhr.onreadystatechange = watching;
2.回调函数 function watching() {        if (xhr.readyState == 4) {//请求状态            if (xhr.status == 200) {//服务器返回的状态码                var msg = xhr.responseText; //服务器返回的字符串            } else alert("服务器错误!" + ajaxH.status);        } } 判断时注意,要:xhr.readyState == 4&&xhr.status == 200,不要xhr.status == 200&&xhr.readyState == 4
 
 
异步对象readyState属性
readyState属性   readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。 0:未初始化。new完后; 1:已打开。对象已经创建并初始化,但还未调用send方法 2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回; 3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整; 4:已加载。所有数据接收完毕
 
 
XMLHttpRequest对象属性
一、onreadystatechange属性,设置回调函数。 二、readyState属性,获取当前XMLHttpRequest对象执行的状态:  1> 0表示以创建XMLHttpRequest对象,但是还没有初始化,即没有调用open()方法设置XMLHttpRequest对象。  2>1表示创建了XMLHttpRequest对象,并且调用了open()方法进行初始化,但是还没有调用send()方法。  3>3表示浏览器正在接受服务器的响应数据。  4>所有数据已经被接受完毕。 三、status属性,服务器返回的http状态码。(>=200 and <300、304未修改,读取缓存。都表示成功) 四、statusText属性,服务器返回的状态码对应的友好的文字说明,比如200对应的OK. 五、responseText属性,以字符串方式获取服务器对客户端的响应。 六、responseXml属性,当请求的是一个xml文件时,或者响应头中Content-Type为:text/xml或application/xml时,返回一个XmlDocument对象(Dom节点对象),支持标准的dom的成员,比如:childNodes、documentElement、firstChild、lastChild、nextSibling、nodeName、nodeType、nodeValue、parentNode、doctype等。
 
 
XMLHttpRequest对象常用方法
一、open("get","url",true)初始化,如果第三个参数为false,则js等待请求完毕后才会继续执行。 二、setRequestHeader("","")增加http请求头信息。在open()之后,send()之前调用。 三、send(null);发送请求。send()方法的参数表示为在请求报文体中发送的数据内容。为了最大化的浏览器兼容问题,如果没有请求报文体就传递null。get请求没有请求报文体,所以一般为null。使用post请求时才需要设置报文体。 四、getResponseHeader("Content-Type"),根据响应的报文头获得报文内容。 五、getAllResponseHeaders();获取所有的响应报文头内容。 六、abort();取消当前的http请求,取消之后如果要重新发起请求,建议重新创建一个XMLHttpRequest对象。
 
 
 
XMLHttpRequest常用方法
           方法                                                           说明 abort                                     取消请求 open                                     需要使用多个参数,第一个设置方法属性,第二个设置目标URL,第三个指定是同步(false)还是异步(true)发送请求 send                                      发送请求到服务器 setRequestHeader()                添加自定义HTTP头到请求 getAllResponseHeaders()         获取HTTP响应头的整个列表 getResponseHeader(‘key‘)       仅获取指定的HTTP响应头
 
 
XMLHttpRequest常用属性
        属性                                                         说明 onreadystatechange                           返回或设置异步请求的事件处理程序 readyState                                        返回状态码:0:未初始化;1:打开;2:发送;3:正在接收;4:已加载 responseText                                    使用字符串返回HTTP响应 responseXML                                     使用XML DOM对象返回HTTP响应,返回的是一个对象,不是xml字符串。 status                                                返回HTTP状态码
 
Ajax使用注意
xhr只能向同一个域中的相同端口号、相同协议的url发起请求,不能跨域,否则会引起错误。 为了浏览器兼容,get请求时最好为send()传递null参数。 在创建了xhr对象后立刻设置onreadystatechange事件,这样就能监视到所有的状态。如果不需要监视其他状态只监视readyState==4的状态则可以在send()之后设置。 get请求时,请求中的QueryString的参数名称与参数值最好使用encodeURIComponent()进行编码。否则在某些浏览器下无法获取该值,比如IE. post请求时,为了像表单那样提交数据需要设置请求的Content-Type为:application/x-www-form-urlencoded。send("键=值&键=值") 解析json格式时eval("("+json+")")。但有安全性问题。
 
 
-》使用注意 -》示例2:使用post方式提交  需要设置头信息:xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); -》如果中文乱码的解决:在客户端使用window.encodeURIComponent()进行编码   在服务器端使用Server.UrlDecode()进行解码
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <title></title>
 
    <script type="text/javascript">         window.onload = function () {             var btnGettime = document.getElementById("btnGetTime");             btnGettime.onclick = function () {
 
                //--------GET-------------                 ////1.创建对象                 //var xhr = new XMLHttpRequest();                 ////2.打开连接                 //xhr.open(‘get‘, ‘GetTime.ashx?title=xlb‘, true);                 ////3.配置                 //xhr.onreadystatechange = function () {                 //    //如果成功返回则展示                 //    if (xhr.readyState==4) {//通信成功                 //        if (xhr.status == 200)//成功返回信息                 //        {                 //            var showTime = document.getElementById(‘showTime‘);                 //            showTime.innerHTML = xhr.responseText;                 //        }                 //    }                 //};                 ////4.发送                 //xhr.send(null);//当使用GET请求时,最好设置为null
 
 
 
                //-----------POST--------------
 
                var showTime = document.getElementById(‘showTime‘);                 showTime.innerHTML = ‘<img src="images/loading.gif" />‘;
 
                //1.创建对象                 var xhr = new XMLHttpRequest();                 //2.打开连接                 xhr.open(‘post‘, ‘GetTime.ashx‘, true);                 //3.配置                 xhr.onreadystatechange = function () {                     //如果成功返回则展示                     if (xhr.readyState == 4) {//通信成功                         if (xhr.status == 200)//成功返回信息                         {                             var showTime = document.getElementById(‘showTime‘);                             showTime.innerHTML = xhr.responseText;                         }                     }                 };                 //4.发送                 //以post请求发送请求                 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");                 xhr.send(‘title=yg‘);
 
            }
 
        }     </script>
 
</head> <body>     <input type="button" id="btnGetTime" value="获取当前时间" />     <div id="showTime">
 
    </div> </body> </html>
 
--------GetTime.ashx----------
using System; using System.Collections.Generic; using System.Linq; using System.Threading; using System.Web;
 
namespace t1_HelloWorld {     /// <summary>     /// GetTime 的摘要说明     /// </summary>     public class GetTime : IHttpHandler     {
 
        public void ProcessRequest(HttpContext context)         {
 
            Thread.Sleep(5000);
 
            string title = context.Request["title"];             context.Response.ContentType = "text/plain";             context.Response.Write(DateTime.Now.ToString()+"---"+title);         }
 
        public bool IsReusable         {             get             {                 return false;             }         }     } }
 
=======================================================
使用jquery完成异步操作 -》参考文档介绍提供的异步api  url:请求地址  type:请求方式,主要是get、post  data:{}:请求的数据  dataType:返回值的类型,主要有xml、text、json、script、html  success:function(data){...}成功的回调函数(4,200)
 
 
 
 
 
 
 
 
 
 
 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。