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)