嘿嘿。今天学习了AJAX的几个方法

简介: 原文:嘿嘿。今天学习了AJAX的几个方法                   今天学习了AJAX的几个方法,其实我很早在公司实习的时间就认识了它,但是对它一无所知,也并没有去学习它,今天学习它让我感到很兴奋因为重新了解了它,嘿嘿,下面就来总结一下今天学习的吧。
原文: 嘿嘿。今天学习了AJAX的几个方法

                   今天学习了AJAX的几个方法,其实我很早在公司实习的时间就认识了它,但是对它一无所知,也并没有去学习它,今天学习它让我感到很兴奋因为重新了解了它,嘿嘿,下面就来总结一下今天学习的吧。

          一.在javascript中写AJAX

<script>
        window.onload = function () {
            document.getElementById("txtName").onblur = function () {
                var xml = new XMLHttpRequest(); //1 首先要创建异步对象
                xml.open("get", "JSAjax.ashx", true);//2 以get方式打开要发送的地址
                xml.onreadystatechange = function () {
                    if (xml.statusText == 4) {
                        alert(xml.responseText);//当接受状态等于4的时候,已经接受到了服务器传递过来的值。
                    }
                }
                xml.send(null);//发送邮件,当为get方式时间发送的请求为空
            }
        }

        //window.onload = function () {
        //    document.getElementById("txtName").onblur = function () {
        //        var xml = new XMLHttpRequest();
        //        xml.open("post", "JSAjax.ashx", true);
        //        xml.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //        xml.onreadystatechange = function () {
        //            if (xml.statusText == 4) {
        //                alert(xml.responseText);
        //            }
        //        }
        //        xml.send("txtname="+this.value)
        //    }
        //}
    </script>
</head>
<body>
    <input type="text" name="txtname" id="txtName"/>
</body>
</html>
  public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string name = context.Request.QueryString["txtname"];
        //string name = context.Request.Form["txtname"];
        if (!string.IsNullOrEmpty(name))
        {
            context.Response.Write("您的用户名"+name + "可用");
        }
        else
        {
            context.Response.Write("您的用户名不可用");
        }
    }

                      上面是在javascript中写的ajax,Ajax在本质上是一个浏览器端的技术,Ajax技术之主要目的在于局部交换客户端及服务器间之数据,这个技术的主角XMLHttpRequest的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refresh without Reload(轻刷新)与服务器之间的沟通,完全是透过Javascript来实行,使用XMLHttpRequest本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序,AJAX 就是运用Javascript 在后台悄悄帮你去跟服务器要资料,最后再由Javascript 或DOM 来帮你呈现结果,因为所有动作都是由Javascript代劳,所以省去了网页重载的麻烦,使用者也感受不到等待的痛苦。使用XMLHttpRequest对象  按照下面模式,可以同步地XMLHttpRequest对象:创建对象;-new创建请求; -open()发送请求;-send(),但是使用javascript比较麻烦,于是就改变为了jquery的使用方法。
                       二.JQuery中写AJAX

          1.AJAX的$.Load事件( url,[,data][.callback])

<script src="Scripts/jquery-1.7.1.min.js"></script>
    <script>
        $(function () {
            $("#Send").click(function () {
                $("#resText").load("Ajax.ashx", { txtemail: "123@qq.com" }, function (msg) {
                    alert(msg);
                });
            });
        });
    </script>
<body>
    <input type="button"  value="AjaxLoad "  id="Send"/>
    <div class="comment">
        已有评论
    </div>
    <div id="resText">
   
    </div>
</body>
public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        string email = context.Request.Form["txtemail"];
        if (!string.IsNullOrEmpty(email))
        {
            context.Response.Write("<span>您的邮箱地址为"+email+"可用</span>");
        }
        else
        {
            context.Response.Write("<span>您的邮箱地址为" + email + "不可用</span>");
        }
    }

                  url:发送的地址,data:发送给服务器的键值对,callback:回调函数。

          2.$.Get和$.Post方法

 <script>
         $(function () {
             //$("#send").click(function () {
             //    $.get("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {
             //        $("#resText").html(msg);
             //    });
             //});
             $("#send").click(function () {
                 $.post("JQuery.ashx", { username: $("#username").val(), content: $("#content").val() }, function (msg) {
                     $("#resText").html(msg);
                 });
             });
         });
     </script>
<body>
    <form id="form1" action="#">
        <p>评论:</p>
        <p>姓名:<input type="text" name="username" id="username"  /></p>
        <p>内容:<textarea name="content" id="content" rows="2" cols="20"></textarea></p>
        <p><input type="button" name="name" value="提交 " id="send" /></p>
    </form>
    <div class="comment">
        已有评论
    </div>
    <div id="resText">
    </div>
</body>

 

public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        //string name = context.Request.QueryString["username"];
        //string content = context.Request.QueryString["content"];
        string name = context.Request.Form["username"];
        string content = context.Request.Form["content"];
        if (!string.IsNullOrEmpty(name) && !string.IsNullOrEmpty(content))
        {
            context.Response.Write("<span>"+name+"评论:"+content+"</span>");
        }
    }

          url:发送的地址,data:发送给服务器的键值对,callback:回调函数。

                  3.$.ajax方法

<script>
        $(function () {
            $("#send").click(function () {
                $.ajax({
                    type: "post",
                    url: "1.js",
                    dataType: "script",
                    success: function (msg)
                    {
                        alert(msg);
                    }
                });
            });
        })
    </script>

                       url:发送的地址,type:请求的类型,timeout:请求时间,beforesend是在请求之前,complete:回调函数,success:成功后的回调函数。
                       今天就简单的总结到这里啦,已经很晚啦,嘿嘿,休息。加油加油!!!

目录
相关文章
|
2月前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
35 0
|
2月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
25 0
|
24天前
|
XML 前端开发 JavaScript
异步请求$.ajax()方法详解
异步请求$.ajax()方法详解
|
2月前
|
JSON 前端开发 JavaScript
Ajax 学习总结
这是一个关于Ajax学习的总结,包括导入Ajax包、异步请求和表单验证。示例展示了如何使用jQuery进行Ajax请求,从后台获取并显示数据,同时提到了Json乱码问题的解决方法和表单数据的前后端交互。还给出了表单验证的简单示例,通过Ajax实时校验用户名。
31 2
|
2月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
36 3
|
2月前
|
XML 开发框架 前端开发
Ajax学习(基础知识)
Ajax学习(基础知识)
|
2月前
|
前端开发
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
AJAX发送请求方法封装和请求函数底层刨析以及axios二次封装
|
2月前
|
移动开发 前端开发 安全
Ajax跨域的所有方法(最详细带使用教程!!!)
Ajax跨域的所有方法(最详细带使用教程!!!)
|
2月前
|
数据采集 Web App开发 前端开发
Python爬虫之Ajax分析方法与结果提取#6
Ajax分析方法、Ajax结果提取【2月更文挑战第20天】
63 0
Python爬虫之Ajax分析方法与结果提取#6
|
2月前
|
XML 前端开发 JavaScript
AJAX get() 和 post() 方法
AJAX(Asynchronous JavaScript and XML)是一种用于创建快速和动态网页的技术,它允许使用 JavaScript 和 XMLHttpRequest 对象在不重新加载整个页面的情况下向服务器发送请求和接收响应。jQuery 提供了几个用于 AJAX 操作的方法,包括 .ajax()、.get() 和 .post()
27 1