XMLHttpRequest实现Ajax效果实例

最新推荐文章于 2020-10-24 15:05:20 发布

c_zw

最新推荐文章于 2020-10-24 15:05:20 发布

阅读量373

点赞数

分类专栏： web

web 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

一、XMLHttpRequest 对象的方法与属性

二、使用XMLHttpRequest 实现ajax效果
这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！
客户端myAjax.html代码：

[xhtml] view plain copy print ?

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>AJAXDEMO</title>
</head>
<mce:script language="javascript" type="text/javascript"><!--
function btn_onclick()
{
var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象，相当于
if (!xmlhttp) {
alert("创建xmlhttp对象异常！");
return false;
}
xmlhttp .open("POST","GetDate1.ashx?&ts" +new Date(),false);//准备向服务器的GetDate1.ashx发出Post请求
xmlhttp.onreadystatechange = function() //需要监听onreadyStatechange事件
{
if(xmlhttp.readyState == 4) //服务器完成
{
if(xmlhttp.status == 200) //如果状态码为200则是成功
{
document.getElementById ("Text1").value=xmlhttp.responseText; //responseText属性为服务器返回的文本
}
else
{
alert("AJAX服务器返回错误！");
}
}
}
xmlhttp.send(); //才开始发送请求
}
// --></mce:script>
<body>
<input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="显示系统时间" onclick="btn_onclick()" />
</body>
</html>

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>AJAXDEMO</title>
 </head>
<mce:script language="javascript" type="text/javascript"></mce:script>
<body>
 <input id="Text1" type="text" disabled="disabled" /><input id="button1" type="button" value="显示系统时间"  οnclick="btn_onclick()" /> 
</body>
</html>

c_zw

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
XMLHttpRequest实现Ajax效果实例

一、XMLHttpRequest 对象的方法与属性二、使用XMLHttpRequest 实现ajax效果这里我们用客户端通过XMLHttpRequest 请求服务端获取当前系统时间，实现异步交互！客户端myAjax.html代码： [xhtml] view plaincopyprint?html xmln
复制链接

扫一扫

专栏目录