一、JS原生方式异步请求

 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxLogin.aspx.cs" Inherits="ThreeLayerWebDemo._2019_7_6.Ajax.AjaxLogin" %>

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head runat="server">

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

     <title></title>

 </head>

 <body>

     <form id="form1" runat="server">

     <div>

     <table>

         <tr>

             <td>用户名:</td>

             <td>

                 <asp:TextBox ID="txtName" runat="server"></asp:TextBox>

             </td>

         </tr>

         <tr>

             <td>密 码：</td>

             <td>

                 <asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>

             </td>

         </tr>

         <tr>

             <td colspan="">

                 <input type="button" value="提交" id="btnLogin"/>

             </td>

         </tr>

     </table>

     </div>

     </form>

     <script type="text/javascript">

         var btn = document.getElementById("btnLogin");

         btn.onclick = function () {

             var txtName = document.getElementById("txtName");

             var txtPwd = document.getElementById("txtPwd");

             var strUrl = "ProcessLogin.aspx?name=" + txtName.value + "&pwd=" + txtPwd.value;

             myAjax("get", strUrl, function (data) {

                 if (data == "ok") {

                     window.location.href = "../../2019-6-29/CRUD/MainFrame.aspx";

                 } else {

                     alert(data);

                 }

             });

         };

         function myAjax(httpMethod,url,callback){

             //发送异步请求

             var xhr;

             if (XMLHttpRequest) {

                 xhr = new XMLHttpRequest();

             }

             else {

                 xhr = new ActiveXObject("Microsoft.XMLHTTP");

             };

             xhr.open(httpMethod, url, true);

             xhr.send();

             xhr.onreadystatechange = function () {

                 if (xhr.readyState ==  && xhr.status == ) {

                     callback(xhr.responseText);

                 }

             };

         }

     </script>

 </body>

 </html>

二、Jquery方式异步请求的四种写法

方式一(GET)：

     <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>

     <script src="../../Script/jquery-3.4.1.js"></script>

     <script type="text/javascript">

         $("#btnJqGetDateTime").click(function () {

             //第一个参数，url地址；第二个参数：传入后台数据；第三个参数：回调函数

             $.get("AjaxServer.ashx", {id:123,name:"alex"}, function (data) {

                 alert(data);

             });

         });

     </script>

方式二(POST)：

     <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>

     <script src="../../Script/jquery-3.4.1.js"></script>

     <script type="text/javascript">

         $("#btnJqGetDateTime").click(function () {

             //第一个参数，url地址；第二个参数：传入后台数据；第三个参数：回调函数

             $.post("ajaxserver.ashx", {id:123,name:"alex"}, function (data) {

                 alert(data);

             });

         });

     </script>

方式三(要求后台返回JSON)：

     <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>

     <script src="../../Script/jquery-3.4.1.js"></script>

     <script type="text/javascript">

         $("#btnJqGetDateTime").click(function () {

             //第一个参数，url地址；第二个参数：传入后台数据；第三个参数：回调函数

             $.getJSON("returnJsonDate.ashx", { id: 123, name: "alex" }, function (data) {

                 alert(data.Date);

             });

         });

     </script>

方式四(推荐这种方式)：

     <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>

     <script src="../../Script/jquery-3.4.1.js"></script>

     <script type="text/javascript">

         $("#btnJqGetDateTime").click(function () {

             $.ajax({

                 url: "returnJsonDate.ashx", //url地址

                 type:"post", //请求方式

                 data: "id=22&ss=ff", //传入后台数据

                 cache:false, //强迫当前请求必须去后台拿数据

                 dataType:"json", //返回数据类型

                 success: function (data) { //请求成功后的回调函数

                     alert(data.Date);

                 },

                 error: function (err) //请求失败的回调函数

                 {

                     alert(err);

                 }

             })

         });

     </script>

JS原生对象实现异步请求以及JQ的ajax请求四种方式的更多相关文章

  1. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

  2. JS与JQ绑定事件的几种方式.

    JS与JQ绑定事件的几种方式 JS绑定事件的三种方式 直接在DOM中进行绑定 <button onclick="alert('success')" type="bu ...

  3. jq使用ajax请求,返回状态 canceled错误

    在使用jq,ajax请求时出现该错误 原因:button按钮类型为type=submit ,script中又自定用botton按钮点击提交ajax,造成冲突. 解决方法:button按钮类型改为 ty ...

  4. Java过滤器处理Ajax请求，Java拦截器处理Ajax请求，拦截器Ajax请求

    Java过滤器处理Ajax请求,Java拦截器处理Ajax请求,拦截器Ajax请求 >>>>>>>>>>>>>>&g ...

  5. js 复制文本的四种方式

    js 复制文本的四种方式 一.总结 一句话总结:js文本复制主流方法:document的execCommand方法 二.js 复制文本的四种方式 纯 转载复制,非原创 原地址:http://www.c ...

  6. Android异步更新UI的四种方式

    Android异步更新UI的四种方式 2015-09-06 09:23 segmentfault 字号:T | T 大家都知道由于性能要求,android要求只能在UI线程中更新UI,要想在其他线程中 ...

  7. js 实现复制功能的四种方式的优劣对比

    今日网上浏览别人项目,看到有人用了document.execCommand这个属性,于是想起之前我选用Clipboard.js 来实现.对于这种不常用的属性还是不太放心,于是随手查了下关于复制的资料, ...

  8. jq绑定事件的4种方式

    jQuery提供了多种绑定事件的方式,每种方式各有其特点,明白了它们之间的异同点,有助于我们在写代码的时候进行正确的选择,从而写出优雅而容易维护的代码.下面我们来看下jQuery中绑定事件的方式都有哪 ...

  9. js动态引入的四种方式

    index.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http:// ...

随机推荐

  1. Java编程思想——第21章 并发

    前言 对于某些问题,如果能够并行的执行程序中的多个部分,则回变得非常方便甚至必要,这些部分要么看起来是并发执行,要么是在多处理环境下同时执行.并行编辑可以使程序执行速度得到极大提高,或者为设计某些类型 ...

  2. 雪崩利器 hystrix-go 源码分析

    阅读源码的过程,就像是在像武侠小说里阅读武功秘籍一样,分析高手的一招一式,提炼出精髓,来增强自己的内力. 之前的帖子说了一下微服务的雪崩效应和常见的解决方案,太水,没有上代码怎么叫解决方案.githu ...

  3. SpringCloud的入门学习之Eureka（高可用注册中心HA）构建Provider服务、Consumer服务

    1.在高可用的Eureka注册中心中构建provider服务. 使用springboot的多环境配置,来搭建Eureka的高可用集群式部署.由于使用的是maven构建的springboot项目,所以首 ...

  4. RDIFramework.NET敏捷开发框架 ━ 工作流程组件Web业务平台

    接前两篇: RDIFramework.NET敏捷开发框架 ━ 工作流程组件介绍 RDIFramework.NET敏捷开发框架 ━ 工作流程组件WinForm业务平台 1.RDIFramework.NE ...

  5. Unity如何更改精灵中心点

      Unity虽然可以改中心点但是仅支持几个特定位置. 如果是一个你是切割的精灵,则可以进入精灵编辑器中调整 打开精灵编辑器后按调整如下图所示的pivot选项,我在这里把精灵调整成了右上. 在精灵编辑 ...

  6. C/C++ 变量的本质分析

    1. 程序通过变量来申请和命名内存空间. int a=0; //申请一个大小为int型的内存空间,这个内存空间取名叫a,申请的内存空间里存储0 2. 可以通过变量名访问变量的内存空间. 3. 修改变量 ...

  7. java8-14-时间API

    原来的时间类  1.默认值 我们使用起来不方便 2.在不同包 不规范   在java.util和java.sql的包中都有日期类,此外用于格式化和解析的类在java.text包中定义 3.可变  线程 ...

  8. Linux下查看哪些进程占用的CPU、内存资源

    1.CPU占用最多的前10个进程: ps auxw|head -1;ps auxw|sort -rn -k3|head -10 2.内存消耗最多的前10个进程 ps auxw|head -1;ps a ...

  9. Web-[RoarCTF 2019]Easy Calc

    看看题目内容,一个计算器,并且过滤了非数字的值,查看源码,上了waf,并且在calc.php显示waf的规则 <?php error_reporting(0); if(!isset($_GET[ ...

  10. python连接MySQL pymysql模块,游标,SQL注入问题,增删改查操作

    pymysql模块 pymysql是用python控制终端对MySQL数据库进行操作的第三方模块 import pymysql # 1.连接数据库 client = pymysql.connect( ...