AJAX是什么?
AJAX 是Asynchronous JavaScript and XML(异步的javascript和XML),在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术优点:在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页的技术缺点:不需要任何插件,但是需要用户允许javascript脚本在浏览器上执行
AJAX怎么使用
AJAX的使用必须依赖XMLHttpRequest对象
主流浏览器(IE7以上,Firefox,Chrome,Opera,....)都支持XMLHttpRequest,可以在直接通过new XMLHttpRequest直接获取;
IE5和IE6不支持XMLHttpRequest对象,需要通过ActiveXObject()方法获取;
下面是XMLHttpRequest的两种不同创建方式
function createXHR() { if(window.XMLHttpRequest)//判断浏览器是否XMLHttpRequest对象 return XHR = new XMLHttpRequest(); else return XHR = new ActiveXObject(); }
在XMLHttpRequest对象(我定义的变量名为XML)创建完成之后,调用此对象的open方法,open方法有五个参数,分别是String method,String URL,async,username,password
method :指定HTTP方法,如“GET”,“POST”
URL:指定目标的相对或绝对路径
async:是否异步,默认为true;(AJAX中的第一个A就是在这里体现,你要是设置为false就很尴尬了)
username:验证用户名;(一般用不到)
password:验证用户密码;(用不到+1)
open之后需要调用XML的send方法(若是使用open中使用的是POST方法,需要在send方法调用之前设置HTTEP的请求头部)
如下
xmlhttp.open("POST","XXXXXX",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("name = kuye");
当open方法的method设置为GET时,XML请求所需要的一些参数通过拼接在URL后面来传递给服务器;当使用POST时,所需要的参数需要封装成一个对象,这个对象作为send()的参数传递给服务器。(使用GET时,send参数为空)
此时,对服务器的请求已经发送出去,然后需要监听服务器的状态,和设置回调函数获取服务器响应的数据
XML的onreadystatechange方法封装了对服务器的监听功能,每当 readyState 改变时,就会触发 onreadystatechange 事件,一般监听readyState==4&&status ==200时,此时请求已完成且响应就绪,如下
XHR.onreadystatechange = function() { if(XHR.readyState ==4&&XHR.status ==200) //readyState == 4时,说明服务器响应完毕 { var data = XHR.responseText //XHR.responseText方法获取服务器返回的字符串型文本,XHR.responseXML方法获取服务器返回的XML型数据 //接下来通过服务器返回的数据去做一些数据解析和HTML操作,就可以不加载整个页面,局部刷新网页了 } }