AJAX = Asynchronous javascript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
可将AJAX封装成库,方便调用,大致分四步:
- 创建Ajax对象
- 连接服务器
- 发送请求
- 接受返回值
具体代码如下:
function ajax(url,fnSucc,fnFaild){ // 创建Ajax对象 if(window.XMLHttpRequest){ var oAjax = new XMLHttpRequest(); } else { var oAjax = new ActiveXobject("Microsoft.XMLHTTP"); } // 连接服务器 oAjax.open(‘GET‘,url,true); // true表示要通过异步传输 // 发送请求 oAjax.send(); // 接收返回 oAjax.onreadystatechange = function(){ if(oAjax.readyState == 4){ // 读取完成 if(oAjax.status == 200){ // 成功 fnSucc(oAjax.responseText); } else { if(fnFaild){ fnFaild(); } } } } }
通过检测window
对象是否有XMLHttpRequest
属性来确定浏览器是否支持标准的XMLHttpRequest
。这里,不能根据浏览器的navigator.userAgent
来检测浏览器是否支持某个JavaScript特性,一是因为这个字符串本身可以伪造,二是通过IE版本判断JavaScript特性将非常复杂。
当创建了XMLHttpRequest
对象后,要先设置onreadystatechange
的回调函数。在回调函数中,通常我们只需通过readyState === 4
判断请求是否完成,如果已完成,再根据status === 200
判断是否是一个成功的响应。
readyState有五个值,如下:
0 --> (未初始化)还没有调用open方法
1 --> (载入)已调用send()方法,正在发送请求
2 --> (载入完成)send()方法完成,已收到全部响应内容
3 --> (解析)正在解析响应内容
4 --> (完成)响应内容解析全部完成,可以在客户端调用了
封装的库取名为 ajax.js,将它引入代码中,就可以直接调用,下面先创建一个数据库 data.txt:
[{name: 张三, password: 123},{name: 李四, password: 321},{name: 王五, password: 456},{name: 小明, password: 654},{name: 小红, password: 789}]
通过点击按钮获取数据:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <script src="ajax.js"></script> <script> window.onload = function() { var oBtn = document.getElementById(‘btn‘); oBtn.onclick = function() { ajax(‘data.txt‘, function(str) { alert(str); }); }; }; </script> </head> <body> <input type="button" id="btn" value="读取数据"> </body> </html>
over!