原文:嘿嘿。今天学习了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 == ) {

                        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="" cols=""></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:成功后的回调函数。
                       今天就简单的总结到这里啦，已经很晚啦，嘿嘿，休息。加油加油！！！

嘿嘿。今天学习了AJAX的几个方法的更多相关文章

  1. 前端学习——使用Ajax方式POST JSON数据包

    0.前言     本文解释怎样使用Jquery中的ajax方法传递JSON数据包,传递的方法使用POST(当然PUT又有时也是一个不错的选择).POST JSON数据包相比标准的POST格式可读性更好 ...

  2. jquery学习之AJAX

    1,关于AJAX的简单介绍 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准 ...

  3. java_web学习(16)Ajax

    Ajax       Ajax(Asynchronous JavaScript and XML的缩写),允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.       Ajax:一种不用 ...

  4. jQuery 学习05——AJAX：定义、load()方法、get()/post()方法

    AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML). load() 方法:从服务器加载数据,并把返回的数据放入被选元素中. 语法:$ ...

  5. 关于我们ajax异步请求的方法与知识

      做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school ...

  6. 小菜学习设计模式（三）—工厂方法（Factory Method）模式

    前言 设计模式目录: 小菜学习设计模式(一)—模板方法(Template)模式 小菜学习设计模式(二)—单例(Singleton)模式 小菜学习设计模式(三)—工厂方法(Factory Method) ...

  7. jQuery中的Ajax几种请求方法

    在网上查的几种Ajax的请求的方法: jQuery 确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯.废话少说,直接进入正题,我 ...

  8. jquery实现AJAX的4种方法

    当我们用javascript写ajax程序写得很“开心”的时候,突然有人告诉你有一种东西叫jquery,它会告诉你不直接和 HttpRequest是多么的快乐,同时你再也不需要再烦恼纠结的ajax乱码 ...

  9. Jquery Ajax调用aspx页面方法

    Jquery Ajax调用aspx页面方法 在asp.net webform开发中,用jQuery ajax传值一般有几种玩法 1)普通玩法:通过一般处理程序ashx进行处理: 2)高级玩法:通过as ...

随机推荐

  1. div 浮动框

  2. OpenStack_Swift源代码分析——Ring基本原理及一致性Hash算法

    1.Ring的基本概念 Ring是swfit中最重要的组件.用于记录存储对象与物理位置之间的映射关系,当用户须要对Account.Container.Object操作时,就须要查询相应的Ring文件( ...

  3. XMPP我写底层协议（零）--废话和准备开幕前

    当我想写一个非常早期的一点总结.但总是忙没有时间停止做这样的事情. 秦与我的兄弟之前说的,这并不是说我没开灵.但是,因为很多事情还没有时间来写blog. 我没有完全理解,真到自己在这个位置上的时间,能 ...

  4. Docker部署JavaWeb项目实战（转）

    摘要:本文主要讲了如何在Ubuntu14.04 64位系统下来创建一个运行Java web应用程序的Docker容器. 一.下载镜像.启动容器 1.下载镜像 先查看镜像 docker images 记 ...

  5. 关于js中window.location.href,location.href,parent.location.href,top.location.href的使用方法

    关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

  6. MVC 使用EF Code First数据迁移之添加字段

    PM> add-migration 20161109   -Force 正在为迁移“20161109”搭建基架.此迁移文件的设计器代码包含当前 Code First 模型的快照.在下一次搭建迁移 ...

  7. [MSSQL]最小公约数

    [摘要]一个朋友在展BOM的时候有这种需求,两列字段(数值):A ,B   A=用量,B=底数,组成用量=用量/底数.A/B,若能被整除,显示整除的结果,若不能整除显示分数形式A/B(分数形式要是约分 ...

  8. Source Insight 3.X 插件支持utf8，完美解决中国乱码，连接到美丽的轮廓

    上次SI多标签插件之后,由于公司内部编码改为utf8编码,因此特意做了这个Source Insight 3.X utf8插件. 下载地址:http://pan.baidu.com/s/1mgyZous ...

  9. uva 10817 Headmaster&#39;s Headache 出发dp 位计算

    出发dp,用在一些议题的操作非常~  给出s个课程.m个教师.n个求职者,教师必须招聘.然后招聘一些求职者,使得每一门课都至少有两个老师能教.问题就转换成了招聘哪些求职者使得花费最少.由于s范围小于8 ...

  10. 使用bootbox.js（二级务必提交书面和数字到数字中国）

    页面文件 <#-- 页头 --> <#assign currNav = "deposit"> <#assign title="网校充值&qu ...