Ajax初识

简介:                 function btnClick() {              //                //创建一个兼容三大主流浏览器的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></title>
    <script type="text/javascript">
        function btnClick() {
            
//                //创建一个兼容三大主流浏览器的xmlhttpRequest对象
//                var xmlhttp = false;
//                try{
//                    xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");//ie msxml3.0+
//                }
//                catch(e){
//                    try{
//                        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");//ie msxml2.6
//                    }
//                    catch(e2){
//                        xmlhttp = false;
//                    }
//                }
//                if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {//Firefox,Opera 8.0,Safari
//                    xmlhttp = new XMLHttpRequest();
//                }
//                return xmlhttp;
//            }
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); //创建一个XMLHTTP对象
            
            if (!xmlhttp) {
                alert("创建xmlhttp对象异常!");
                return false;
            }
            xmlhttp.open("POST", "GetDate1.ashx?id="+encodeURI("中国")+"&ts" + new Date(), true); //准备向服务器的GetDate1.ashx发送请求
            
            //XMLHTTP默认(也推荐)不是同步请求的,也就是open方法并不像webClient的DownloadString那样把服务器返回的数据拿到才返回,是异步的,因此需要监听onreadystatechange事件
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4) {
                    if (xmlhttp.status == 200) {//如果状态是200表示成功
                        document.getElementById("Text1").value = xmlhttp.responseText;//responseText属性为服务器返回的数据
                    }
                    else {
                        alert("Ajax服务器返回错误!");
                    }
                }
            }
            xmlhttp.send();
        }


    </script>
</head>
<body>
    <input id="Text1" type="text"/>
    <input type="button" id="Button1" value="button" onclick="btnClick()"/>
</body>

</html>



ashx:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;


namespace AJax
{
    /// <summary>
    /// GetDate1 的摘要说明
    /// </summary>
    public class GetDate1 : IHttpHandler
    {


        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string id = context.Request["id"];//获取到客户端的变量
            string ts = context.Request["ts"];
            ts = "hello";
            context.Response.Write(DateTime.Now.ToString() + "---" + id+"--"+ts); //返回给客户端数据
        }


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

相关文章
|
XML 前端开发 JavaScript
AJAX学习笔记(一、初识)
AJAX学习笔记(一、初识)
113 0
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
87 0
|
7月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
153 0
|
7月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
前端开发 JavaScript
jQuery中的Ajax请求----ajax请求篇(二)
在jQuery中的Ajax请求其实是在底层对原生js请求方式的封装,那么jQuery中的Ajax请求是怎样的呢?
67 0
|
7月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
58 0
|
7月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
79 0
|
7月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
7月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
91 0
|
7月前
|
前端开发 JavaScript API
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本
【uni-app】【基于jQuery Ajax】[sd.js]最新原生完整版for凯哥API版本