ajax 局部刷新

最新推荐文章于 2024-10-18 19:02:29 发布

zds063

最新推荐文章于 2024-10-18 19:02:29 发布

阅读量324

点赞数

文章标签： ajax xmlhttprequest textbox function timer url

本文链接：https://blog.csdn.net/zds063/article/details/5702955

版权

ajax局部刷新

setInterval("refreshTime()",1000); //每格1秒刷新一次

funciton refreshTime()

{

var dateObj = new Date();

time.innerHTML = dateObj.toLocaleDateString(); //刷新div里面的内容

}

</script>

----------------------------------------------------------------------------------------------------------------

function doRef()

{

var url = "xxx.aspx"

var dateRequest = new ActiveXObject("Microsoft.XMLHTTP");

dateRequest.abort() ;

dateRequest.open( "GET", url , true );

dateRequest.onreadystatechange = onSendSelf ;

dateRequest.send() ;

function onSendSelf()

{

if( dateRequest.readyState != 4 )

{

return ;

}

var theDate = dateRequest.responseText ;//如果出现编码问题,可以在服务端escape一下,然后在这里使用unescape( responseText )

theDiv.innerHTML = theDate ;

}

setInterval( doRef , 1000 ) ;//1秒刷新一次，有点快

------------------------------------------------------------------------------------------------------------------

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="Timer1_Tick">

</asp:Timer>

<asp:TextBox ID="TextBox1" runat="server"> </asp:TextBox>

</ContentTemplate>

</asp:UpdatePanel>

</form>

=====在后台Timer1_Tick事件加上

// Interval="1000" 是设置刷新的时间间隔

TextBox1.Text=DateTime.Now

看下就明白了

<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'ajaxIndex.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    

<script type="text/javascript">
function test(){
    var url = "getData.jsp?username="+document.getElementById("username").value;
    sendRequest(url);
}
var XMLHttpReq = false;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
    if(window.XMLHttpRequest) { //Mozilla 浏览器
        XMLHttpReq = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // IE浏览器
        try {
            XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }
}
//发送请求函数
function sendRequest(url) {"GET", url, true);
    XMLHttpReq.onreadystatechange = processResponse;//指定响应函数
    XMLHttpReq.send(null); // 发送请求
}
// 处理返回信息函数
function processResponse() {
    if (XMLHttpReq.readyState == 4) { // 判断对象状态
        if (XMLHttpReq.status == 200) { // 信息已经成功返回，开始处理信息
            var result = XMLHttpReq.responseText;
            document.getElementById("data").innerHTML = result;
        } else { //页面不正常
            window.alert("您所请求的页面有异常。");
        }
    }
}
</script>
</head>
<body>
    <table>
        <tr>
            <td>ajax提取数据：</td>
        </tr>
        <tr><td><div id="data">原始数据</div></td></tr>
        <tr><td><input type="text" name="username" id="username"/></td></tr>
        <tr><td><input type="button" value="submit" onclick="test()"/></td></tr>
    </table>
</body>
</html>

createXMLHttpRequest(); XMLHttpReq.open(

var http_request = false;

function sendRequest(url, obj) {
http_request = false;

if (window.XMLHttpRequest) { // Mozilla, Safari,...

        http_request = new XMLHttpRequest();
        if (http_request.overrideMimeType) {
            http_request.overrideMimeType('text/xml');
        }
    } else if (window.ActiveXObject) { // IE

        try {
            http_request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (e) {}
        }
    }

    if (!http_request) {
        alert('Giving up :( Cannot create an XMLHTTP instance');
        return false;
    }

    http_request.onreadystatechange = function processRequest() {
        //最后输出过程

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                document.getElementById(obj).innerHTML=http_request.responseText;
                //alert(http_request.responseText);

            } else {
                alert('There was a problem with the request.');
            }
        }
    }

    document.getElementById(obj).innerHTML="waiting...";
    http_request.open('GET', url, true);
    http_request.send(null);
}
</script>