一、简介
AJAX=Anchronous JavaScript and XML(异步的JavaScript和XML),是一种用于创建快速动态网页的技术。
AJAX通过在后台与服务器进行少量数据交换,在无需重新加载整个页面的情况下,能够更新部分网页的技术。
与传统网页对比:传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页。
二、XmlHttpRequest对象
AJAX的核心是JavaScript对象XmlHttpRequest。所有现代浏览器均支持XMLHttpReques对象(IE5和IE6使用ActiveXObject)。
XMLHttpRequest用于在后台与服务器交换数据。
1.建XMLHttpRequest对象:
//创建XMLHttpReques对象的语法 variable = new XMLHttpRequest(); //老版本的Internet Explorer(IE5和IE6)使用ActiveX对象 variable = new ActiveXObject("Micriosoft.XMLHTTP"); //为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。 //如果支持,则创建XMLHttpRequest对象。如果不支持,则创建ActiveXObject; var xmlhttp; if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }
2.XMLHttpRequest对象和服务器交换数据:
//将请求发送到服务器,使用XMLHttpRequest对象open()和send()方法。 //GET方式 xmlhttp.open("GET","test1.txt",true); xmlhttp.send(); //POST方式 xmlhttp.open("POST","test.asp",true); xmlhttp.send();
说明:
open(method,url,async):规定请求的类型、URL以及是否异步处理请求
method:请求的类型:GET或POST
1.与POST相比,GET更简单也更快,并且在大部分情况下都能用。
2.在以下情况中,使用POST请求:
向服务器发送大量数据(POST没有数据量限制)
发送包含未知字符的用户是,POST比GET更稳定也更可靠
url:文件在服务器上的位置。该文件可以使任何类型的文件,比如.txt和.xml,或者服务器脚本文件,比如.asp和.PHP(在传回响应之前,能够在服务器上执行该任务)
为避免得到的是缓存的结果,向URL添加一个唯一的ID,如下:
xmlhttp.open("get","test1.asp?t="+Math.random(),true); xmlhttp.send();
async:true(异步)或false(同步)
当使用async=true时,请规定在响应出于onreadystatechange事件中的就绪状态时执行的函数;
xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getelementById("myDIV").innerHTML = xmlhttp.responseText; } } xmlhttp.open("GET","test.txt",true); xmlhttp.send();
三、响应
如需获得来自服务器的响应,请使用XMLHttpRequest对象的responsText或responseXML属性 。
responseText:获得字符串形式的响应数据。
responseXML:获得XML形式的响应数据。
//responseText属性返回字符串形式的响应 document.getElementById("myDiv").innerHTML = xmlhttp.responseText; //responseXML属性返回XML,需要解析 xmlDoc = xmlhttp.responseXML; txt = ""; x = xmlDoc.getElementsByTagName("ARTIST"); for (i = 0; i < x.length; i++) { txt = txt + x[i].childNodes[0].nodeValue + "<br/>"; } document.getElementById("myDiv").innerHTML = TXT;原文链接:https://www.f2er.com/ajax/164865.html