Ajax(Asynchronous JavaScript + XML)不是语音,不是框架,也不能算是一种技术,而是一种模式。通过这种模式实现不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。
Ajax的核心是XMLHttpRequest。XMLHttpRequest是浏览器内置对象,用于在不更新网页的情况下和服务器通信,获取数据。
以下是来自菜鸟教程的示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script> function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp=new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> <button type="button" onclick="loadXMLDoc()">修改内容</button> </body> </html>
XMLHttpRequest.readyState属性存储请求的4个状态:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
readyState变化时,会触发XMLHttpRequest.onreadystatechange事件。在该事件中处理服务器返回的数据并更新网页。
XMLHttpRequest.open(method,url,async)方法的三个参数分别表示:
method:请求的类型;GET 或 POST
url:文件在服务器上的位置
async:true(异步)或 false(同步)
通常async传true。如果传false,就没有必要定义onreadystatechange事件,因为程序会在send()处阻塞,可以直接在send()返回后处理response。
XMLHttpRequest有两个属性用来获取服务器的响应:
responseText:获得字符串形式的响应数据。
responseXML:获得 XML 形式的响应数据。
本文主要是了解下Ajax的基本原理,暂不涉及其他高级用法。