使用XMLHttpRequest发送Ajax请求

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<script type="text/javascript" src="AjaxUtil.js"></script>
</head>
 <body>
  <script type="text/javascript">
	var url = 'http://192.168.4.1:8082/Person/Detail';
	//AjaxUtil.addURLParam(url, 'id', 920);
	//AjaxUtil.addURLParam(url, 't', Math.random());
	var xhr = AjaxUtil.createXHR();
	xhr.onreadystatechange = function () {
		if(xhr.readyState == 4) {
			if((xhr.status >=200 && xhr.status< 300) || xhr.status == 304) {
				alert(xhr.responseText);
			} else {
				alert('请求失败!' + xhr.status);
			}
		}
	}
	
	xhr.open('post', url, true);
	
	//设置请求头必须在open()方法之后,send()方法之前
	
	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	//xhr.open('get', url, true);
	xhr.send("id=920");
  </script>
 </body>
</html>

XMLHttpRequest的readyState属性标识请求/响应过程的状态变化,有以下取值

0:未初始化,尚未调用open()方法

1:启动 已调用open() 方法,尚未调用send() 方法

2:发送 已调用send() 方法

3:接收:已接收到部分数据

4:完成:已接收到全部数据

每次readyState变化都会触发readystatechange事件,我们需要关注的是状态4

var AjaxUtil = {

	//创建XMLHttpRequest对象,兼容IE7以下版本
	
	createXHR: function () {
		if (typeof XMLHttpRequest != 'undefined') {
			return new XMLHttpRequest();
		} else if ( typeof ActiveObject != 'undefined') {
			if (typeof arguments.callee.activeString != 'string') {
				var versions = ['MSXML.XMLHttp.6.0','MSXML.XMLHttp.3.0','MSXML.XMLHttp'];
				var i,len;
				for (i=0,len=versions.length; i<len; i++) {
					try {
						new ActiveObject(versions[i]);
						arguments.callee.activeString = versions[i];
						break;
					} catch (ex) {
					}
				}
				return new ActiveObject(arguments.callee.activeString);
			}
		} else {
			throw new Error("浏览器不支持!");
		}
	}
	
	//为GET请求添加参数
	
	, addURLParam: function (url, name, value) {
		url += (url.indexOf('?') == -1) ? '?' : '&';
		url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
		return url;
	}
	
}
//代码摘自Javascript高级程序设计Ajax部分


你可能感兴趣的:(代码,Ajax,知识)