传统的web页面对用户的每次请求都会返回一个完整的新的页面,导致用户等待时间过长。AJAX的使用会使页面只修改需要修改的部分,甚至浏览器可以不必与服务器通信,这样更新少,用户等待时间更短。
XMLHttpRequest是大多数浏览器对请求对象的叫法,可以把它发送到服务器得到响应而无需加载整个页面。
建立AJAX请求的基本过程:
1.XMLHttpRequest
XMLHttpRequest实例与服务器通信时包含三个关键步骤:
1.onreadystatechange事件处理函数---由服务器触发
2.open(method ,url)方法---建立请求。URL后面可以加时间戳,即url = *** + "?time" + new Date()@H_403_16@;@H_403_16@为保证每次的都与服务器交互,要传递一个参数每次都不一样,就用了时间戳。@H_403_16@有的浏览器上js认为链接不一样就会再次取新的内容。
3.send方法
接收 readyState 属性表示AJAX当前请求的状态,有1-4数字代表。4代表响应发送完成。
responseText 属性包含了从服务器发送的数据。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <Meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function(){ //1.获取a节点,并为其添加onclick响应函数 document.getElementsByTagName("a")[0].onclick = function(){ //3.创建一个XMLHttpRequest对象 var request =new XMLHttpRequest(); //4.准备发送请求的数据:URL var url = this.href; var method = "GET"; //5.调用XMLHttpReques的open方法 request.open(method,url); //6.调用send方法 request.send(null); //7.为XMLHttpReques对象添加onreadystatestate响应函数 request.onreadystatechange=function(){ alert(request.readyState); //8.判断响应是否完成:XMLHttpReques对象readystate属性值为4的时候 if(request.readyState==4){ //9.判断响应是否可用:XMLHttpReques对象state属性值为200 if (request.status ==200 || request.status== 304) //10.打印相应结果:responseText alert(request.responseText); } } //2.取消节点默认行为 return false; } } </script> </head> <body> <a href = "ajax.txt">hello ajax </a> </body> </html>
2.AJAX数据格式
服务器端的编程语言只能以:
1 XML
2 JSON
3HTML
这三种格式返回数据,这样浏览器才能理解这些格式。这三种数据格式各有优缺点。