[ 登录注册 ]

HTML/CSS

不使用Ajax框架实现Ajax效果?

2016/08/12 15:08 [db:作者] 返回上一页

为了简单明了,我只在html中测试;注释里写的很清楚,我就不多废话了;

很多家公司在面试的时候可能会让你不使用任何Ajax的框架实现Ajax效果,虽然这段代码看上去挺痛苦,但也没有别的办法,记不记也得记(其实理解起来就没那么难记了……)


readyState表示XMLHttpRequest对象的处理状态:
0:XMLHttpRequest对象还没有完成初始化。
1:XMLHttpRequest对象开始发送请求。
2:XMLHttpRequest对象的请求发送完成。
3:XMLHttpRequest对象开始读取服务器的响应。
4:XMLHttpRequest对象读取服务器响应结束。
 

 

<!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框架实现Ajax效果 </title>
    <script type="text/javascript" language="javascript">
        function btnClick() {
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHTTP对象,相当于WebClient
            if (!xmlhttp) {
                alert("创建xmlhttp对象异常!");
                return false;
            }

            xmlhttp.open("POST", "GetDate.ashx", false); //准备向服务器的GetDate.ashx(一般处理程序)发出POST请求。
            //XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像WebClient的DownloadString那样把服务器返回的数据拿到才返回,是异步的,因此需要用匿名监听onreadystatechange事件;
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {    //如果XMLHTTPRequest对象读取服务器响应结束;
                    if (xmlhttp.status == 200) {  //如果状态码为200则表示处理成功;

                        document.getElementById("GetDate").value = xmlhttp.responseText;  //responseText属性为服务器返回的文本
                    } else {
                        alert("AJAX服务器返回错误");
                    }
                }
            }
            xmlhttp.send(); //这时才开始发送请求
        }
    </script>
</head>
<body>
    <input id="GetDate" type="text" />
    <input type="button" value="请求时间" onclick="btnClick()" />
</body>
</html>
 

GetDate.ashx (一般处理程序)代码:

 

using System;
using System.Web;

namespace AJAX
{
    /// <summary>
    /// GetDate 获取服务器的时间
    /// </summary>
    public class GetDate : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write(DateTime.Now.ToString());
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

点击复制链接 与好友分享!回本站首页

文章来源:http://www.bozhiyue.com/html_css/2016/0812/368027.html
评论
发表评论