1、ajax相关属性:
1)onreadystatechange :当Ajax状态码改变时所触发的回调函数
2)readyState :Ajax状态码
0:表示对象已建立,但未初始化(调用了createXhr方法,但未执行open方法)0
1:表示对象已初始化,但未发送(调用了open方法,但未执行send方法)1
2:已调用send方法进行请求 (调用了send方法)2
3:正在接收数据(接收到一部分)状态码变为3
4:接收完成(所有数据都完全返回值)4
3)status :响应状态码,200正常响应,404没有找到页面
4)statusText :(了解)响应状态文本
5)reponseText :响应文本,如果服务器端返回字符串就使用responseText进行接收
6)responseXML:响应文本,如果服务器端返回xml就使用responseXML进行接收
7)responseURL:响应文本,请求地址
2、GET请求:
ajax.js:
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();//ie外的其他浏览器
} else {
xhr = new ActiveXObject('MicroSoft.XmlHttp');//ie浏览器
}
return xhr;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function $F(id) {
return $(id).value;
}
function check() {
//step1.获得ajax对象
var xhr = getXhr();
var uri = 'check.do?uname=' + $F('uname');
//encodeURI(uri):处理编码问题
//step2.发送请求
xhr.open('get', encodeURI(uri), true);
xhr.onreadystatechange = function() {
//step4.处理服务器返回的数据
if (xhr.readyState == 4 && xhr.status == 200) {
//要等到已经收到了服务器返回的所有数据,并且服务器处理成功。
var txt = xhr.responseText;
$('msg').innerHTML = txt;
}
};
xhr.send(null);//请求体
}
</script>
</head>
<body>
<form action="" method="get">
<fieldset>
<legend>注册</legend>
<p>
用户名: <input id="uname" name="uname" onblur="check();"/><span id="msg" style="color:red"></span><br/>
</p>
<p>
密码: <input type="password" name="pwd"/><br/>
</p>
<p>
<input type="submit" value="确定"/>
</p>
</fieldset>
</form>
</body>
</html>
3、POST请求:
function getXhr() {
var xhr = null;
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();//ie外的其他浏览器
} else {
xhr = new ActiveXObject('MicroSoft.XmlHttp');//ie浏览器
}
return xhr;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function $(id) {
return document.getElementById(id);
}
function $F(id) {
return $(id).value;
}
function check() {
//step1.获得ajax对象
var xhr = getXhr();
//step2.发送请求
xhr.open('post', 'check.do', true);
/* 设置content-type消息头,告诉服务器浏览器对发送过去的数据如何编码(这儿采用的key=value的形式进行编码) */
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
//step4.处理服务器返回的数据
if (xhr.readyState == 4 && xhr.status == 200) {
var txt = xhr.responseText;
$('msg').innerHTML = txt;
}
}
xhr.send('uname=' + $F('uname'));
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>注册</legend>
<p>
用户名: <input id="uname" name="uname" onblur="check();"/><span id="msg" style="color:red"></span><br/>
</p>
<p>
密码: <input type="password" name="pwd"/><br/>
</p>
<p>
<input type="submit" value="确定"/>
</p>
</fieldset>
</form>
</body>
</html>