JS学习笔记——ajax
Ajax(Asynchronous JavaScript + XML)在2005年被Jesse James Garrett引入,他综合了许多当时现有技术,产生了ajax。ajax使得浏览器可以额外地向服务器请求数据而不用重新刷新页面,ajax从服务器或许到数据后,可用javascript操作DOM以改变页面。虽然ajax中的x代表XML,但目前JSON的使用要更加广泛一点。JSON更加轻量级以及是原生javascript的一部分。
实现ajax的核心是XMLHttpRequest对象,其使用主要是open()
、send()
等函数。
//1.new
//2.event
//3.open
//4.send
var xhr = new XMLHttpRequest();
//为了兼容性,事件回调需在open之前定义
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status >= 200 && xhr.status < 300 | xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was failed.");
}
}
}
//以get的方式请求example.txt,这里用相对路径,相对当前页面;最后一个参数代表是否异步。调用open之后,请求并没有发送,只是启动一个请求以备发送。
xhr.open("get", "example.txt", true);
//请求主体无数据。调用send之后,请求就会被发送出去。
xhr.send(null);
对象xhr中有一个readyState属性,这个属性表示目前ajax处于哪个状态,一般我们多使用4:已经接收到全部响应数据
。当readyState状态改变时,会触发readystatechange事件
。我们将该事件以DOM0级的方式添加到xhr对象上。在这个事件中,我们要检测readyState是否等于4,还要检测status。
还有一个在使用上比readystatechange事件要简单一点的是load事件
,该事件就是在响应接收完毕后触发的,也就没有必要去检测readyState了。
xhr.onload = function() {
if(xhr.status >= 200 && xhr.status < 300 | xhr.status == 304) {
alert(xhr.responseText);
} else {
alert("Request was failed.");
}
}