1,为什么需要使用Ajax
互联网的前世今生
Web 2.0的特点
1) 用户贡献内容
2) 内容聚合RSS
3) 更丰富的“用户体验”
所有操作都是在不刷新窗口的情况下完成的
无刷新:不刷新整个页面,只刷新局部
无刷新的好处
1)只更新部分页面,有效利用带宽
2)提供连续的用户体验(播放视频)
3) 提供类似C/S的交互效果,操作更方面
2,什么是Ajax
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。
AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
ajax几个核心:
JavaScript:更新局部的网页
XML:一般用于请求数据和响应数据的封装
XMLHttpRequest对象:发送请求到服务器并获得返回结果(核心对象)
CSS:美化页面样式
异步:发送请求后不等返回结果,由回调函数处理结果
常用方法
常用的属性
- onreadystatechange:指定回调函数
-
readyState: XMLHttpRequest的状态信息
-
status:HTTP的状态码
- responseText:获得响应的文本内容
- responseXML:获得响应的XML文档对象
注意:就绪状态是4而且状态码是200,才可以处理服务器数据
3,怎么样使用Ajax
- 创建XMLHTTPRequest对象
<script type="text/javascript">
var xmlHttp;
function createXML(){
//这里是为了适应不同的浏览器
if(window.XMLHTTPRequest){
//使用本地XMLHTTPRequest
xmlHttp = new XMLHTTPRequest();
}else if(window.ActiveXObject){
//使用微软XMLHTTPRequest
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2 . 发送异步请求
function validate(){
createXML();
//拿到表单中的文档框
var un = document.getElementById("un");
//请求的url地址
var url = "validate.jsp?un="+un.value;
//初始化XMLHTTPRequest对象,即调用open()
//确定访问的方式是get还是post
//确定访问的地址
//true,表示异步发送
xmlHttp.open("get",url,true);
//当XMLHTTPRequest对象得状态发生改变时,调用callback
// 0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
// 1 (初始化) 对象已建立,尚未调用send方法
// 2 (发送数据) send方法已调用,但是当前的状态及http头未知
// 3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过
// responseBody和responseText获取部分数据会出现错误,
// 4 (完成) 数据接收完毕,此时可以通过responseXML和responseText获
// 取完整的回应数据
xmlHttp.onreadystatechange=callback;
//XMLHTTPRequest对象正式发送请求
xmlHttp.send(null);
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
3 . 回调函数处理文本内容
function callback(){
//为4的时候,证明已经收到了所有服务器端给的东西
if(xmlHttp.readyState==4){
//证明页面访问正确
if(xmlHttp.status==200){
var msg = document.getElementById("msg");
msg.innerHTML="<fontcolor='red'>"+xmlHttp.responseText+"</font>"
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
注意:xmlHttp.responseText可以拿到服务端的文本信息
4 . 回掉函数处理xml内容
//解析xml文件
function parseXML(){
//拿到xml文件所有的元素
var xmlc = xmlHttp.responseXML.documentElement;
//拿到城市的下拉列表
var ct = document.getElementById("city");
//拿到所有的city节点
var cities = xmlc.getElementsByTagName("city");
//一开始让城市的下拉列表的option为0
ct.options.length=0;
//遍历所有的city节点
for(var i=0;i<cities.length;i++){
//city节点下面id节点的值
var id = cities[i].childNodes[0].childNodes[0].nodeValue;
//city节点下面name节点的值
var name = cities[i].childNodes[1].childNodes[0].nodeValue;
//new一个Option
var o = new Option(name,id);
//添加到下拉列表中
ct.add(o);
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
注意:xmlHttp.responseXML可以拿到服务端的xml文件信息