AJAX应用3
AJAX学习 --------------- 1.AJAX:(Asynchronous JavaScript and XML) 异步JavaScript和XML 指的是一种创建交互式网页应用的网页开发技术. 不是指一种单一的技术,而是有机的利用了一系列相关的技术. 简单理解为：JavaScript + XMLHttpRequest + CSS +服务器端 的集合.
注意:1.Ajax异步对象请求aspx页面,返回数据后 要立即End()结束之后代码的输出 否则最后会输出Render()方法遍历控件树按照顺序生成最终的HTML代码(即输出前台HTML代码) 2.在回调函数onreadystatechange()中 先判断异步对象的readyState 状态 再判断服务器发回的状态码status是否为200(成功). 然后获得服务器返回的文本字符串 xhr.responseText 最后判断服务器返回的信息 ------------------------------------- 回调函数 : 自己定义,系统调用 ------------------------------------ 异步请求的基本步骤: 1.创建对象: new ---->var xhr=new XMLHttpRequest(); //请一个助手 2.创建请求: open ----> xhr.open("请求方式 "," 请求页面 ",是否采用异步对象); //告诉他要去做的事情 3.设置回调函数: 异步使用XMLHttpRequest对象时,必须使用 onreadystatechange事件 注意: 在回调函数中检查readyState属性,看数据是否准备就绪(是否==4). readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态 0: 未初始化. new完以后 1: 已经打开. 对象已经创建并初始化, 但还未调用send方法 2. 已经发送. 已经调用send方法,但该对象正在等待状态码和头的返回 3. 正在接收. 已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整 4. 已经加载. 所有数据接收完毕 4.发送请求: send -----> xhr.send(); //去做事情 1.Ajax 应用 <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { document.getElementById("btnClick").onclick = function () { var xhr = new XMLHttpRequest();//创建一个异步对象 xhr.open("get", "AjaxFirst.ashx?id="+new Date(), true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status==200) { alert(xhr.responseText); } }; xhr.send(null); }; }; </script> </head> <body> <input type="button" value="显示" id="btnClick" /> </body> </html>
1.XMLHttpRequest异步对象(异步对象的创建方式有多种,要考虑不同浏览器的兼容问题) 可以异步从服务器端获取txt或者xml数据
2.创建浏览器兼容的XMLHttpRequest异步对象的方法 //使用浏览器兼容的方式创建 异步对象 function createXhr() { var xhobj = false; try { xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // ie msxml3.0+ } catch (e) { try { xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //ie msxml2.6 } catch (e2) { xhobj = false; } } if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari xhobj = new XMLHttpRequest(); } return xhobj; }
3.Ajax的优点: 1.Ajax技术主要目的在于 局部交换客户端及服务器之间 的数据
2.Ajax技术主角XMLHttpRequest最主要特点,在于能够不用重新载入 整个版面来更新资料, 也就是所谓的Refresh withOut Reload(轻刷新)
3.与服务器之间的沟通，完全是通过Javascript 来实行
4.使用XMLHttpRequest 本身传送的数据量很小，所以反应会更快， 也就让网络程式更像一个桌面应用程序
5.AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料， 最后再由Javascript 或DOM 来帮你呈现结果， 因为所有动作都是由Javascript 代劳，所以省去了网页重载的麻烦， 加快请求的响应速度.
二、为XMLHttpRequest对象设置请求参数 1.GET方式 1.1设置参数 xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true); 1.2GET方式请求可以设置浏览器不使用缓存 xhr.setRequestHeader("If-Modified-Since", "0"); 1.3发送: xhr.send(null);//GET方式 2.POST方式： 1.1设置参数：xhr.open("POST", "GetAreasByAjax.aspx", true); 1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 1.3发送：xhr.send("isAjax=1&name=bobo&pwd=123");//POST方式 1.4因为采用POST请求方式,所以在服务器端获取信息应用 Request.Form["参数名"];
4.为XMLHttpRequest对象设置请求参数: get与post 1.Get方式: 设置浏览器get请求不使用浏览器缓存的两个方法: 1.在请求地址的Url中添加一个不断变化的参数(比如new Date()) 每次创建异步对象处理请求的时候,都保证url地址是不同的, 就不会从缓存中取数据了 2.xhr.setRequestHeader("If-Modified-Since",0); 2.POST方式： 设置请求头: xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
5.XMLHttpRequest常用方法 方法 说明 abort 取消请求 open 需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求 send 发送请求到服务器 setRequestHeader 添加自定义HTTP头到请求 getAllResponseHeaders 获取HTTP响应头的整个列表 getResponseHeader 仅获取指定的HTTP响应头
6.XMLHttpRequest常用属性
属性 说明 onreadystatechange 返回或设置异步请求的事件处理程序 readyState 返回状态码：0：未初始化；1：打开；2：发送；3：正在接收；4：已加载 responseText 使用字符串返回HTTP响应 responseXML 使用XML DOM对象返回HTTP响应 status 返回HTTP状态码
