首页 > 代码库 > ajax
ajax
http://www.cnblogs.com/Garden-blog/archive/2011/03/11/1981778.html
http://blog.csdn.net/liujiahan629629/article/details/22229669
ajax(Asynchronous JavaScript and XML)是实现web页面实现异步刷新,避免将整个页面提交给服务器,造成的数据交互性差用户等待时间长的问题。ajax可以实现将很少的数据提交给服务器并且得到服务器的相应 返回到页面,实现页面部分刷新,达到快速更新部分页面。
ajax是web开发必不可少的一门技术。XMLHttprequest是ajax的核心。
用js创建XMLHttprequest对象:(由于一些浏览器的内核不同,其中的js技术版本也不同,所以创建XMLHttprequest对象的方式也不同)
IE浏览器:
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); 或
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
非IE的浏览器:
xmlHttp = new XMLHttpRequest();
发出 Ajax 请求:
function callServer() {
// Get the city and state from the web form
var city = document.getElementById("city").value;
var state = document.getElementById("state").value;
// Build the URL to connect to
var url = "/scripts/getZipCode.php?city=" + escape(city) + "&state=" + escape(state);
// Open a connection to the server
//第三个参数:false:同步,代码发出请求后将等待服务器返回的响应。true:异步,服务器在后台处理请求的时候用户仍可以使用表单(甚至调用其他 JavaScript 方法)。
xmlHttp.open("GET", url, true);
// Setup a function for the server to run when it‘s done
xmlHttp.onreadystatechange = updatePage;
// Send the request
xmlHttp.send(null);
}
处理服务器响应
function updatePage() { if (xmlHttp.readyState == 4) { var response = xmlHttp.responseText; document.getElementById("zipCode").value =http://www.mamicode.com/ response; } }
启动一个 Ajax 过程
<form> <p>City: <input type="text" name="city" id="city" size="25" onChange="callServer();" /></p> <p>State: <input type="text" name="state" id="state" size="25" onChange="callServer();" /></p> <p>Zip Code: <input type="text" name="zipCode" id="city" size="5" /></p> </form>
以上是一个非常简单的例子:用户填入city和state,然后出发callServer()方法,发送ajax请求,然后通过updatePage监听响应,然后更新局部页面。
web 2.0的时代:web2.0配合ajax技术,使得页面的ajax请求和响应转到后台,用户在页面几乎看不带,而且页面也不会有闪烁和异动。
XMLHttpRequest的部分属性和方法:
·open():建立到服务器的新请求。
·send():向服务器发送请求。 (一般用url发送请求之后,就不用send发送了,这时可以传参null:例:send(null))
·abort():退出当前请求。
·readyState:提供当前 HTML 的就绪状态。
·responseText:服务器返回的请求响应文本。
·responseXML:服务器返回的请求响应XML。
readyState相应的5中状态:
·0:请求没有发出(在调用 open() 之前)。
·1:请求已经建立但还没有发出(调用 send() 之前)。
·2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
·3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
·4:响应已完成,可以访问服务器响应并使用它
可以根据服务器响应返回的就绪状态码设置 数据相应的进度,1=25%。。。4=100%,这样会使得界面更加的友好。
Http的状态码(request.status):
当ajax发送请求,也得到了相应,而且相应完成这时 HTNL的就绪状态readyState=4,但是可能在服务器响应的时候出现错误。例如:常见的404,这是访问的页面不存在,可能是由于url写错了得原因。这种状态码就是HTTP的状态码。HTTP的状态码有很多比较常见的:
404:访问的页面不存在
401:禁止访问
200:正确返回,顺利访问
open(method,url,boolean):
open()方法的请求方式:get,post,head
head请求:head请求可以用来查看内容的长度和类型
想要获取请求内容的长度可以用:request.getResponseHearder("Content-Length");
想要获取请求内容的类型可以用:request.getResponseHearder("Content-Type");
用getAllRespoonseHearders()的方法可以获取返回的header(响应头)的全部内容。
DOM(document object model) DOM树,对象树,节点对象树
ajax