一、什么是Ajax技术?
异步的JavaScript和XML.使用Javascript语言与服务器进行异步交互,传输的数据为XML(更多的使用json数据).Ajax不是一门新的编程语言,而是一种使用现有标准的一套方法.
- XMLHttpRequest 对象 (异步的与服务器交换数据)
- JavaScript/DOM (信息显示/交互)
- CSS (给数据定义样式)
- XML (作为转换数据的格式)
优点:
在不重新加载真个页面的情况下,可以与服务器交换数据并且更新部分网页内容.(这个特点让用户在不知不觉中完成请求和响应).并且Ajax不需要任何插件,但是需要用户允许JavaScript在浏览器上执行.
(1)同步交互:客户端发送一个请求后,需要等待服务器响应结束后,才能发出第二个请求,是串行的.
(2)异步交互:客户发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求.
二、基本格式
使用Ajax的请求是基于onclick事件的(post)
当按钮被点击时,它负责调用名为 loadXMLDoc() 的函数:
1 <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div> 2 <button type="button" onclick="loadXMLDoc()">修改内容</button>
Ajax请求格式:
1 <head> 2 <script> 3 function loadXMLDoc() 4 { 5 .... AJAX 脚本执行 ... 6 } 7 </script> 8 </head>
一套完整代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <script> 6 function loadXMLDoc() 7 { 8 var xmlhttp; 9 if (window.XMLHttpRequest) 10 { 11 // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 12 xmlhttp=new XMLHttpRequest(); 13 } 14 else 15 { 16 // IE6, IE5 浏览器执行代码 17 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 18 } 19 xmlhttp.onreadystatechange=function() 20 { 21 if (xmlhttp.readyState==4 && xmlhttp.status==200) 22 { 23 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 24 } 25 } 26 xmlhttp.open("GET","/try/ajax/demo_get.php",true); 27 xmlhttp.send(); 28 } 29 </script> 30 </head> 31 <body> 32 33 <h2>AJAX</h2> 34 <button type="button" onclick="loadXMLDoc()">请求数据</button> 35 <div id="myDiv"></div> 36 37 </body> 38 </html>
三、创建XMLHTTP Response对象
XMLHTTP Response是Ajax的基础,用于在后台与服务器进行交换数据。意味着可以不加载真个页面的情况下,对页面的某部分进行更新。
创建语句:
variable=new XMLHttpRequest();
为了应对所有的现代浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。
如果支持,则创建 XMLHttpRequest 对象。如果不支持,则创建 ActiveXObject :
var xmlhttp;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest(); }
else {
// IE6, IE5 浏览器执行代码 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
四、向服务器发送请求
XMLHttpResponse 对象用于和服务器交换数据。
向服务器发送请求会使用两个方法open()和send()
1 xmlhttp.open('GET',"ajax_info.text",true); #open(method,url,async)
method : 请求的类型: POST或GET
url : 文件在服务器上的位置
async : true(异步)或者 false(同步)
2 xmlhttp.send(); #send(string)
string: 仅用于POST请求
服务器上的文件是任何类型的文件,可以是文本.txt和.xml或者脚本文件如.asp和.php(在传回响应值前,能够在服务器上执行任务)
XMLHttpResponse对象如果要用于AJAX的话,其open()方法的async参数必须设置为teue:
xmlhttp.open("GET","ajax_test.html",true);
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
(1)在等待服务器响应时执行其他脚本
(2)当响应就绪后对响应进行处理
当使用 async=true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数.
如需使用 async=false,请将 open() 方法中的第三个参数改为 false,如果对一些小型请求也是可以的,但是JavaScript会等到服务器响应就绪后才继续执行.如果服务器繁忙或者缓慢,应用程序会挂起或者停止. 当async=false 时,不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可
1 xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); 2 xmlhttp.send(); 3 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
五、来自服务器的响应
如果需要获取来自服务器的响应,请使用XMLHTTP Response对象的responseText或者responseXML属性。
1 属性:responseText 描述:获取字符串形式的响应数据 2 属性:responseXML 描述:获取XML形式的响应数据