当前所有的主流浏览器都支持XMLHttpRequest对象。
此对象可以用来在后台与服务器进行数据交换。于是也就使异步更新网页内容成为可能,不用刷新整个页面。
特别说明:IE5和IE6使用ActiveXObject。
创建XMLHttpRequest对象方式如下:
var xmlhttp; //IE7和IE7以上或者其他标准浏览器 if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } //如果是IE5和IE6浏览器 else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
AJAX的post或者get服务器请求:
XMLHttpRequest对象用于和服务器交换数据。
如果想要将请求发送给服务器,需要使用XMLHttpRequest对象的open()和send()方法。
属性 | 描述 |
open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。 (1).method:请求的类型;GET或POST。 (2).url:文件在服务器上的位置。 (3).async:true(异步)或 false(同步)。 |
send(string) | 将请求发送到服务器。 string:仅用于 POST 请求 |
一、get和post区别
get方法可能速度比较快,并且适用性也很强,但是很多时候还是需要用post。
推荐使用post方式的场景如下:
(1)不期望使用缓存文件(更新服务器上的文件或数据库)。
(2)向服务器发送大量的数据(POST没有数据量限制)。
(3)发送包含未知字符的用户输入时,POST比GET更稳定也更可靠。
二、get方式
function loadXMLDoc(){ var xmlhttp; //IE7和IE7以上或者其他标准浏览器 if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } //如果是IE5和IE6浏览器 else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("show").innerHTML=xmlhttp.responseText; } } xmlhttp.open("get","welcome.php",true); xmlhttp.send(); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ loadXMLDoc(); }; }
特别说明:上面的方式在IE浏览器可能会从浏览器中读取数据,也就是说当第一次点击按钮正常获取时间日期后,以后的点击会没有任何效果,在谷歌或者火狐等浏览器中并没有此问题,解决方法是在url后面添加一个随机数就可以了,这样每次请求都被认为是一个新的url,于是就不会缓存了
三、POST请求
function loadXMLDoc(){ var xmlhttp; //IE7和IE7以上或者其他标准浏览器 if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } //如果是IE5和IE6浏览器 else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("show").innerHTML=xmlhttp.responseText; } } xmlhttp.open("post","welcome.php",true); xmlhttp.send(); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ loadXMLDoc(); }; }
上面的代码利用post方式获取服务器的当前时间日期,不存在使用get方式的缓存问题。
如果需要像HTML表单那样POST数据,可以使用setRequestHeader()来添加HTTP头,然后在send()方法中规定发送的数据:
function loadXMLDoc(){ var xmlhttp; //IE7和IE7以上或者其他标准浏览器 if (window.XMLHttpRequest) { xmlhttp=new XMLHttpRequest(); } //如果是IE5和IE6浏览器 else{ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if(xmlhttp.readyState==4&&xmlhttp.status==200){ document.getElementById("show").innerHTML=xmlhttp.responseText; } } xmlhttp.open("post","welcome.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("webName=php中文网&age=3"); } window.onload=function(){ var obt=document.getElementById("bt"); obt.onclick=function(){ loadXMLDoc(); }; }
AJAX的true异步或者false同步
AJAX指的是异步 javascript 和 XML(Asynchronous JavaScript and XML)。
这对于web开发来说是一个非常大的进步,可以有效的提高网站的人性化程度,在此之前,如果有比较费时的请求操作,必然会引起程序挂起和停止的现象,那么使用ajax的异步操作就无需等待服务器的响应,而是进行如下的操作:
(1)在等待服务器响应时执行其他脚本。
(2)当响应就绪后对响应进行处理。