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种不同的状态。 ：未初始化。new完后; ：已打开。对象已经创建并初始化，但还未调用send方法 ：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回； ：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整； ：已加载。所有数据接收完毕

 

 

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="data: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）