一、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>