ajax学习二：GET和POST请求

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>

ajax学习二：GET和POST请求

1、ajax相关属性：

2、GET请求：

3、POST请求：

猜你喜欢