一、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. JS如何判断鼠标滚轮向上还是向下滚动

    前几天偶然看到某前端群有人在问:JS如何判断鼠标滚轮向上还是向下滚动? 我想了想,有点蒙蔽,心想难道不是用scrollTop来判断吗? 但我不确定,也出于好奇心,于是开始了一番探索 思路:通过even ...

  2. 一种简单实现Redis集群Pipeline功能的方法及性能测试

    上一篇文章<redis pipeline批量处理提高性能>中我们讲到redis pipeline模式在批量数据处理上带来了很大的性能提升,我们先来回顾一下pipeline的原理,redis ...

  3. stars-one的原创工具——APK签名验证破解工具

    ASCTool APk签名验证破解工具 APK Signature Crack Tool 本工具只对那些仅通过 PackageManager.getPackageInfo().signatures 来 ...

  4. SSM框架之SpringMVC(1)入门程序

    SpringMVC(1) 1.三层架构和MVC 1.1. 三层架构 咱们开发服务器端程序,一般都基于两种形式,一种C/S架构程序,一种B/S架构程序 使用Java语言基本上都是开发B/S架构的程序,B ...

  5. .net实现一个简单的通用查询数据、导出Excel的网页

    背景:临时提供一个简单的网页,供其他人浏览数据库(Oracel.MSSQL)的某些数据,并导出Excel.支持在配置文件中随时添加或修改sql. 实现:把sql语句等信息保存一个xml文件中,前端页面 ...

  6. SQL 高效运行注意事项(三)

    合理配置tempdb 1.tempdb在SQL Server停掉,重启时会自动的drop,re-create. 根据model数据库会默认建立一个新的 2.tempdb对IO的要求比较高,最好分配到高 ...

  7. 安装docker并部署web项目

    一.docker简介 1.docker定义:docker是一个用来装应用的容器,就像杯子可以装水,笔筒可以装笔,书包可以放书一样.你可以把“Hello World!”放到docker中,也可以把网站放 ...

  8. win7+vim搭建+verilog HDL IDE

    参考地址:http://www.huangdc.com/421 参考文章为2016年,部分更新贴于文章内了 安装下载vim vim在win下叫gvim,下载地址:https://www.vim.org ...

  9. matlab键盘快捷键无法使用的解决办法

    打开matlab,在主页里点击 预设/preferences 左栏找 键盘/keyboard 点开键盘点击 快捷方式/shortcuts 在右边 活动设置 /Active settings 里选择 W ...

  10. vue项目实现路由按需加载的3种方式

    vue异步组件技术 ==== 异步加载vue-router配置路由 , 使用vue的异步组件技术 , 可以实现按需加载 .但是,这种情况下一个组件生成一个js文件 /* vue异步组件技术 */ { ...