核心提示:Ajax技术:允许浏览器与服务器通信而无需刷新当前页面的技术①在Web传统模型中,客户端向服务器发送一个请求,服务器返回整个页面,如此反复;②在Ajax模型中,数据在客户端与服务器之间独立传输,服务器...
Ajax技术:允许浏览器与服务器通信而无需刷新当前页面的技术
①在Web传统模型中,客户端向服务器发送一个请求,服务器返回整个页面,如此反复;
②在Ajax模型中,数据在客户端与服务器之间独立传输,服务器不再返回整个页面。
(将请求与页面分离)
Ajax并不是一种新的技术,而是一些传统技术的组合
服务器端语言:服务器需要向浏览器发送特定信息的能力 XML(可拓展标记语言): 是一种描述数据的格式,Ajax程序需要某种格式化的格式来在服务器和客户端之间传递信息,XML是其中一种选择 XHML(可拓展标记语言)和CSS(级联样式表) : 标准化呈现 DOM 文档对象模型 :动态显示与交互 XMLHttpRequest :异步数据读取 JavaScript:绑定和处理所有数据简单的helloworld—-ajax
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<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 url = this.href + "?time=" + new Date();
var method = "GET";
//5.调用XMLHttpRequest对象的open()方法
request.open(method, url);
//6.调用XMLHttpRequest对象的send()方法
request.send(null);
//7.为XMLHttpRequest对象添加onreadystatechange响应函数
request.onreadystatechange = function(){
alert(request.readyState);
//8.判断响应是否完成:XMLHttpRequest对象的readyState属性值为4的时候
if(request.readyState == 4){
//9.再判断响应是否可用:XMLHttpRequest对象status属性值为200
if(request.status == 200 || request.status == 304){
//10.打印响应结果:responseText
alert(request.responseText);
}
}
}
//2.取消a节点的默认行为
return false;
/*
* 小结:利用XMLHttpRequest实例与服务器进行通信,
* 有以下三个关键部分:
* 1).onreadystatechange() 事件处理函数
* 2).open()
* 3).send()
* ------------------
* onreadystatechange方法
* 该事件处理函数由服务器触发,而不是用户
* XMLHttpRequest对象的readystate属性可以作为服务器与客户端之间通信状态的标志
* readystate属性值的每次改变都会触发readystatechange事件
*
* open方法
* 建立请求但是没有发送请求
* open(method,url) method:请求的方式 url:请求发送的地方
* 可以添加一个时间戳在URL参数后面,就能确保URL的唯一性,避免出现浏览器缓存结果
*
* ---------------------
* readyState表示ajax请求的当前状况
* 值: 0代表还未初始化,没有调用open方法
* 1代表正在加载,open方法已被调用,但是send方法还未被调用
* 2代表加载完毕,send方法已被调用,请求已经开始
* 3代表交互中,服务器正在发送响应
* 4代表完成,响应发送完毕
*
* -------------------
* 在XMLHttpRequest中,服务器发送的状态码都保存在status属性中
* 通过将其值与200或304比较,以确保服务器是否发送了一个 成功的响应
* 常用状态码及其含义:404---->>>没有找到页面 403------>>>禁止访问
* 500---->>>内部服务器出错
* 200---->>>一切正常 304----->>>没有被修改
*
* ----------------------
* respondseText
* XMLHttpRequest的responseText属性包含了从服务器发过来的数据
* (只有当readystate的值为4时才能使用)
*
*/
}
}
</script>
</head>
<body>
<a href="helloAjax.txt">helloAjax</a>
</body>
</html>


