ajax运用

来源:互联网 发布:java中变量的定义方法 编辑:程序博客网 时间:2024/05/01 08:31

ajax.aspx.cs
    protected void Page_Load(object sender, EventArgs e)
    {
        if (Request["name"] != "" && Request["age"] != "")
        {
            if (Request.HttpMethod == "POST")
            {
                Response.Write("你使用的是POST方法:你的姓名是:<font color='red'>" + Request["name"] + "</font>--你的年龄是:<font color='red'>" + Request["age"] + "</font>");
            }
            else if (Request.HttpMethod == "GET")
            {
                Response.Write("你使用的是GET方法:你的姓名是:<font color='red'>" + Request["name"] + "</font>--你的年龄是:<font color='red'>" + Request["age"] + "</font>");
            }
        }
        else {
            Response.Write("你没有完整填写表单!");
        }
    }

ajax.html
<!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">
<head>
    <title>ajax运用</title>
    <script type="text/javascript" language="javascript">
    <!--
    var xmlHttp;
    function createXMLHttpRequest(){
        if(window.ActiveXObject){               //IE浏览器
            xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        else if(window.XMLHttpRequest){
            xmlHttp=new XMLHttpRequest();
        }
    }
    function createQueryString(){                    //得到表单中填写的数据
        var oName=document.getElementById("userName").value;
        var oAge=document.getElementById("userAge").value;
        var queryString="name="+oName+"&age="+oAge;
        return encodeURI(encodeURI(queryString));        //两次编码解决汉字乱码
    }
    function postRequest(){
        try{
            createXMLHttpRequest();
            var url="ajax0.aspx?timeStamp"+new Date().getTime();          //加入一个时间戳使IE浏览器不缓存
            var queryStr=createQueryString();
            xmlHttp.open("POST",url);
            xmlHttp.onreadystatechange=handleStateChange;                //状态改变时用这个函数得到传来的值
            xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");  //对POST传值发送报头
            xmlHttp.send(queryStr);                //传送数据
        }
        catch(exception){            //得到报错信息
            var oErr="";
            for(var i in exception){
                oErr+=i+":"+exception+"/n";
            }
            alert(oErr);
        }
    }
    function getRequest(){
        try{
            createXMLHttpRequest();
            var url="ajax0.aspx?timestamp="+new Date().getTime();
            var queryStr=createQueryString();
            xmlHttp.open("GET",url+"&"+queryStr);
            xmlHttp.onreadystatechange=handleStateChange;
            xmlHttp.send(null);
        }
        catch(exception){
            var oErr="";
            for(var i in exception){
                oErr+=i+":"+exception+"/n";
            }
            alert(oErr);
        }
    }
    function handleStateChange(){
        if(xmlHttp.readyState==4&&xmlHttp.status==200){    //4为服务器交互状态准备好了,200为服务器已经准备就绪
            var oDiv=document.getElementById("display");
            oDiv.innerHTML=decodeURI(xmlHttp.responseText);   //将传来的文本值添加到页面的DIV中
        }
    }
    -->
    </script>
</head>
<body>
<form>
姓名:<input type="text" id="userName" /><br />
年龄:<input type="text" id="userAge" /><br /><br /><br /><br />
<input type="button" value="使用POST方法" onclick="postRequest();" />
<input type="button" value="使用GET方法" onclick="getRequest()" />
</form>
<div id="display"></div>
</body>
</html>
运行结果:
IE:

firefox:





原创粉丝点击