编写一个例子:从服务器取回一个Hello Ajax字符串。
HTML: <input type="button" value="ajax提交" onclick="Ajax();" /> <div id="result"> </div>
js:定义Ajax函数,异步获取数据
1、声明一个XMLHttpRequest对象
2、对XMLHttpRequest对象实例化
3、调用XMLHttpRequest对象的open(),设置服务器的URL和请求的方式,以及是否异步。
4、注册异步回调事件,服务器相应会有事件通知,注册这个事件,就等于设置回调函数。
5、发送请求,调用send()方法,使用Get方式请求可以不用设置send的参数。
1 <script type="text/javascript"> 2 var XmlHttpReq = null;//声明一个XMLHttpRequest对象 3 if (window.ActiveXObject) {//对XMLHttpRequest对象实例化 4 XmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); 5 } else if (window.XMLHttpRequest) { 6 XmlHttpReq = new XMLHttpRequest(); 7 } 8 function Ajax() { //定义Ajax函数,异步获取数据,在Button中的onclick事件中调用 9 XmlHttpReq.open("Get", "Default.aspx", true);//设置服务器的URL和请求的方式,以及是否异步 10 XmlHttpReq.onreadystatechange = RequestCallBack;//注册异步回调事件,服务器相应会有事件通知,注册这个事件,就等于设置回调函数 11 XmlHttpReq.send();发送请求,调用send()方法,使用Get方式请求可以不用设置send的参数或者null 12 } 13 function RequestCallBack() {//回调函数,注册在onreadystatechange事件之上 14 if (XmlHttpReq.readyState == 4) { 15 if (XmlHttpReq.Status == 200) { 16 document.getElementById("result").innerHTML = XmlHttpReq.responseText; 17 } 18 } 19 } 20 </script>