一,得到XMLHTTPRequest对象
- Ajax只需要学习一个对象:XMLHttpRequest,如果掌握了它,就掌握了Ajax!
- Ajax是JS技术,所以也就是多掌握一个JS的对象而已.
- 得到XMlHttpRequest的流程
- 大多数浏览器都支持的: var xmlHttp = new XMLHttpRequest();
- IE6.0: var xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
- IE5.5及更早版本的IE: var xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
- 编写创建XMLHttpRequest对象的函数
function createXMLHttpRequest() {
try {
return new XMLHttpRequest();
} catch (e) {
try {
return new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("这仨不行,就尴尬了小伙伴");
throw e;
}
}
}
}
二,打开与服务器的连接
- xmlHttp.open():用来打开与服务器的连接,需要三个参数
- 请求方式:可以是GET或POST
- 请求的URL:指定服务器的资源,eg:/HelloAjax/index.jsp
- 请求是否为异步:如果为true表示发送异步请求,否则为同步请求.
- xmlHttp.open(“GET”,”/HelloAjax/index.jsp”,true);
三,若是POST请求
如果发送请求时需要带有参数,一般都用POST请求.
设置Content-Type请求头:
- xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);
四,发送请求
- xmlHttp.send(null):null必须传入,如果不传,可能会造成部分浏览器无法发送!
- 参数:
- 就是请求体内容,如果是get请求,必须给出null.
- 如果是post请求,()中传入的就是请求体:xmlHttp.send(“username=zhangSan&password=123”);
五,获取响应的内容
- 在xmlHttp对象的一个事件上,注册监听器:onreadystatechange(当状态发生改变事件)
- xmlHttp对象一同有五个状态:
- 0状态:刚创建完,还没有调用open()方法.
- 1状态:请求开始,调用了open()方法,但还没有调用send()方法.
- 2状态:请求发送完成,也就是调用了send()方法了.
- 3状态:服务器已经开始响应,但是不表示已经响应结束,也不保证数据发送给了客户端.
- 4状态:服务器响应结束.(基本上我们只关心这个状态4)
- 得到xmlHttp对象的状态:
- var state = xmlHttp.readyState;获取这个属性值,得到的可能是0,1,2,3,4
- 得到服务器的响应的状态码:
- var status = xmlHttp.status;//200,404,500,302等
- 得到服务器响应的内容:
- var content = xmlHttp.responseText;//得到服务器的响应的文本格式的内容
- var content = xmlHttp.responseXml;//得到服务器的响应的xml响应的内容,这是一个Document对象!!
xmlHttp.onreadystatechange = function functionName() {
//xmlHttp的五种状态,都会调用本方法
//双重判断:判断是否为null:判断状态是否为4状态,嗨哟奥判断是否大于300
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
//响应的字符串
var text = xmlHttp.responseText;
}
}
state与readyState的区别
state值的含义
0:请求未初始化(还没有调用 open())。
1:请求已经建立,但是还没有发送(还没有调用 send())。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)
3:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
4:响应已完成;您可以获取并使用服务器的响应了。
readyState值的含义
等于1:说明请求已经准备好可以发送
等于2:服务器正在处理请求时会作出响应,响应首部提供了有关响应的信息,并提供一个状态码。
等于3:数据下载到请求对象,但是响应数据还没有完全准备好,还不能使用
等于4:服务器处理完请求,数据可以使用了
六,响应内容为xml数据的情况
- 服务器端:
- 设置响应头:Content-Type,其值为:text/xml;charset=utf-8;
- 客户端:
- var document = xmlHttp.responseXml;//得到的是一个Document对象
<html>
<head>
<title>ajax示例</title>
<script type="text/javascript">
function createXMLHttpRequest() {
try {
//适合大多数浏览器
return new XMLHttpRequest();
} catch (e) {
try {
//适合ie6.0
return new ActiveXObject("Msxml2.HTTP");
} catch (e) {
try {
//适合ie5.5
return new ActiveXObject("Microsoft.HTTP");
} catch (e) {
alert("那你很棒棒呦");
}
}
}
}
window.onload = function () {
//当浏览器加载完当前页面时执行这个函数
var btn = document.getElementById("btn");
btn.onclick = function () {
//当btn被点击时,会调用这个函数
//1,获得XMLHttpRequest对象
var xmlHttp = createXMLHttpRequest();
//2,打开与服务器的连接
//参1:是GET请求还是POST请求
//参2:要访问的服务器资源的路径
//参3:是否为异步请求,true表示异步请求
xmlHttp.open("GET","/bs",true);
//3,发送请求体
//GET请求:无请求体,传null
//POST请求:传请求体.
xmlHttp.send(null);
//4,给XMLHttpRequest对象的onreadystatechange
//事件注册一个监听器
xmlHttp.onreadystatechange = function () {
if(xmlHttp.readyState == 4
&& xmlHttp.status == 200){
//如果服务器响应结束
//并且响应码为200
//则说明响应成功,数据已经传递过来了
//访问BServlet,BServlet响应的数据为xml格式的
//所以这里接收的时候,也是接收responseXML
//responseXML这个属性,浏览器会帮我们改变格式
var doc = xmlHttp.responseXML;
//通过doc对象的getElementsByTagName方法
//可以获得从服务器传过来的xml数据中
//所有的clazz标签组成的数组
//因为我们只写了一个clazz标签,所以[0]表示第一个标签
var clazz =
doc.getElementsByTagName("clazz")[0];
//获得clazz中的所有的student标签(数组),取角标为0的
var student =
clazz.getElementsByTagName("student")[0];
//获取student标签中的id属性
var studentId = student.getAttribute("id");
//获取student标签中的name标签的标签体
//<name>这里的内容</name>
var nameStr =
student.getElementsByTagName("name")[0]
.textContent;
var show = document.getElementById("show");
show.innerHTML = "姓名:"+nameStr+"--id:"+studentId;
}
};
}
};
</script>
</head>
<body>
<button id="btn" >点我</button>
<h1 id="show"></h1>
<input type="text">
<br/>
<input type="text">
</body>
</html>