Ajax核心--XmlHttpRequest五大步骤
|
AJAX，是Asynchronous Javascript And XML的简写，即异步JavaScript和XML，它是一种用于创建快速动态网页的开发技术。随便打开一个网页，在搜索框中输入要查询内容的关键字，搜索框下方会自动给出搜索建议列表，其实这就是AJAX的应用实例。
XmlHttpRequest对象创建代码实例 <script type="text/javascript">
//声明XMLHttpRequest全局变量
var xmlhttp;
//1.创建XMLHttpRequest对象
function submit() {
//初始化xmlhttp
xmlhttp=null;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7，IE8，FireFox,Mozilla,Opera...
xmlhttp = new XMLHttpRequest();
//alert(xmlhttp);
}
else if (window.ActiveXObject)
{
//IE6,IE5...
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//alert(xmlhttp);
}
if(xmlhttp == undefined || xmlhttp==null)
{
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
}
</script>
4、设置发送的数据，开始和服务器交互
下面是关于XMLHttpRequest应用的一个小demo,关于XMLHttpRequest的一些常用属性在实例应用中都有详细介绍，如有不合理的地方，欢迎留言交流。 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//声明XMLHttpRequest全局变量
var xmlhttp;
//1.创建XMLHttpRequest对象
function submit() {
//初始化xmlhttp
xmlhttp=null;
//创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
//IE7，IE8，FireFox,IE5...
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
//alert(xmlhttp);
}
if(xmlhttp == undefined || xmlhttp==null)
{
alert("当前浏览器不支持创建XMLHttpRequest对象，请更换浏览器");
}
//2.注册回调方法
//onreadystatechange请求状态改变的事件触发器
//注意：应该将回调函数的名字注册给onreadystatechange
//callback()表示把回调函数的返回值注册给了onreadystatechange
xmlhttp.onreadystatechange = callback;
//获取文本框中的内容
var userName = document.getElementById("name").value;
//******************GET交互方式***************//
//请求数据位于url链接中，send方法参数值为null即可
//********************************************//
//3.设置和服务器端进行交互的参数
xmlhttp.open("GET","AJAX?name=" + userName,true);
//4. 设置向服务器发送的数据，启动和服务端的交互
xmlhttp.send(null);
//******************POST交互方式***************//
//先调用setRequestHeader方法设置Content-Type的值
//然后调用send方法，请求数据位于send方法中
//********************************************//
//3.设置和服务器端进行交互的参数
xmlhttp.open("POST","AJAX",true);
//POST方式交互需要添加的代码
xmlhttp.setRequestHeader("Content-Type","application/x-www.form-urlencoded");
//4. 设置向服务器发送的数据，启动和服务端的交互
xmlhttp.send("name=" + userName);
}
//设定回调函数
function callback() {
//5.判断和服务器的交互是否完成，还要判断服务器是否正确返回了数据
if (xmlhttp.readyState == 4)
{ //readyState=0，未初始化。对象以创建，未调用OPEN
//readyState=1,open方法成功调用，未调用send方法
//readyState=2，send方法成功调用，未开始接收数据
//readyState=3，正在接收数据，http响应头信息已接收，响应数据尚未接收完成
//readyState=4，响应数据接收完成。
if (xmlhttp.status == 200)
{ //status=200，成功返回数据
//status=404，未找到
//status=500，服务器内部错误
//纯文本数据的接受方法
var message = xmlhttp.responseText;
//向div中填充文本内容
var testdiv = document.getElementById("test");
testdiv.innerHTML = message;
}
}
}
</script>
</head>
<body>
<!--<input type="button" onclick="submit()" value="兼容性测试" />-->
<div></div>
<input type="text" id="name"/>
<input type="button" onclick="submit()" value="校验用户名" />
<br />
<div id="test"></div>
</body>
</html>
关于XMLHttpRequest的知识点掌握还在继续积累中，也会在博文中继续进行总结。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |