Ajax使用概述

来源：互联网发布：线路设计软件编辑：程序博客网时间：2024/06/05 03:50

Ajax使用概述

Ajax的优势在于不刷新页面的情况下，更新页面数据，提升用户体验。
1.核心对象

Ajax核心对象XMLHTTPRequest，创建该对象分IE浏览器和非IE：

IE:var xhr = new ActiveXObject('Microsoft.XMLHTTP');  //最原始var xhr = new ActiveXObject('Msxml2.XMLHTTP');  //升级非IE：var xhr = new XMLHttpRequest();

2.核心属性

核心属性readyState，Ajax的整个过程有5个状态，对应readyState的0-4的值。

0：创建了ajax对象
1：已调用open方法
2：已调用send方法
3：服务器端返回部分数据
4：服务器数据返回完毕，ajax请求完毕

3.核心方法

（1）open：准备ajax请求

open(var1,var2,var3);var1:请求方式 post/getvar2:请求的后台程序的地址var3:同步方式（可选） 异步（true默认值）/同步（false）

（2）send：发送ajax请求

send(var);var:get方式，传入null即可    post方式，是一个XML对象

4.其他属性和事件

（1） responseText：以字符串形式接收服务器端返回的数据

（2）responseXML：以xml格式接收服务器端返回的数据

（3）onreadystatechange事件：readyState的值每次发生变化都会触发该事件

5.简单实例

目标：前台HTML页面上设置一个按钮，获取后台程序的返回值。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>获取</title></head><body>    <!-- 按钮上绑定点击事件 -->    <button onclick="getContent()">获取</button>    <div id="d"></div>    <script>        function getXmlHttp(){            var xhr = null;            try{                // 创建标准浏览器对象                xhr = new XMLHttpRequest();            }catch(e){                // 创建低版本ie浏览器对象                try{                xhr = new ActiveXObject('Microsoft.XMLHTTP');                }catch(ex){                xhr = new ActiveXObject('Msxml2.XMLHTTP');                }            }            return xhr;        }        function getContent(){            // 获取XMLHTTPRequest对象            var xhr = getXmlHttp();            // 调用open方法准备ajax请求            xhr.open('get','sim.html');            // 使用onreadystatechange方法检测readyState状态            xhr.onreadystatechange =function(){                // 判断已正常接收到后台返回数据后，显示到页面div中                if(xhr.readyState == 4){                    document.getElementById('d').innerHTML = xhr.responseText;                }            }            // 调用send方法发送ajax请求            xhr.send(null);        }    </script></body></html>

阅读全文

0 0