一、JS原生方式异步请求
1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxLogin.aspx.cs" Inherits="ThreeLayerWebDemo._2019_7_6.Ajax.AjaxLogin" %>
2
3 <!DOCTYPE html>
4
5 <html xmlns="http://www.w3.org/1999/xhtml">
6 <head runat="server">
7 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
8 <title></title>
9 </head>
10 <body>
11 <form id="form1" runat="server">
12 <div>
13 <table>
14 <tr>
15 <td>用户名:</td>
16 <td>
17 <asp:TextBox ID="txtName" runat="server"></asp:TextBox>
18 </td>
19 </tr>
20 <tr>
21 <td>密 码：</td>
22 <td>
23 <asp:TextBox ID="txtPwd" runat="server"></asp:TextBox>
24 </td>
25 </tr>
26 <tr>
27 <td colspan="2">
28 <input type="button" value="提交" id="btnLogin"/>
29 </td>
30 </tr>
31 </table>
32 </div>
33 </form>
34 <script type="text/javascript">
35 var btn = document.getElementById("btnLogin");
36 btn.onclick = function () {
37 var txtName = document.getElementById("txtName");
38 var txtPwd = document.getElementById("txtPwd");
39 var strUrl = "ProcessLogin.aspx?name=" + txtName.value + "&pwd=" + txtPwd.value;
40 myAjax("get", strUrl, function (data) {
41 if (data == "ok") {
42 window.location.href = "../../2019-6-29/CRUD/MainFrame.aspx";
43 } else {
44 alert(data);
45 }
46 });
47 };
48 function myAjax(httpMethod,url,callback){
49 //发送异步请求
50 var xhr;
51 if (XMLHttpRequest) {
52 xhr = new XMLHttpRequest();
53 }
54 else {
55 xhr = new ActiveXObject("Microsoft.XMLHTTP");
56 };
57 xhr.open(httpMethod, url, true);
58 xhr.send();
59 xhr.onreadystatechange = function () {
60 if (xhr.readyState == 4 && xhr.status == 200) {
61 callback(xhr.responseText);
62 }
63 };
64 }
65 </script>
66 </body>
67 </html>
二、Jquery方式异步请求的四种写法
方式一(GET)：
1 <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>
2 <script src="../../Script/jquery-3.4.1.js"></script>
3 <script type="text/javascript">
4 $("#btnJqGetDateTime").click(function () {
5 //第一个参数，url地址；第二个参数：传入后台数据；第三个参数：回调函数
6 $.get("AjaxServer.ashx", {id:123,name:"alex"}, function (data) {
7 alert(data);
8 });
9 });
10 </script>
方式二(POST)：
1 <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>
2 <script src="../../Script/jquery-3.4.1.js"></script>
3 <script type="text/javascript">
4 $("#btnJqGetDateTime").click(function () {
5 //第一个参数，url地址；第二个参数：传入后台数据；第三个参数：回调函数
6 $.post("ajaxserver.ashx", {id:123,name:"alex"}, function (data) {
7 alert(data);
8 });
9 });
10 </script>
方式三(要求后台返回JSON)：
1 <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>
2 <script src="../../Script/jquery-3.4.1.js"></script>
3 <script type="text/javascript">
4 $("#btnJqGetDateTime").click(function () {
5 //第一个参数，url地址；第二个参数：传入后台数据；第三个参数：回调函数
6 $.getJSON("returnJsonDate.ashx", { id: 123, name: "alex" }, function (data) {
7 alert(data.Date);
8 });
9 });
10 </script>
方式四(推荐这种方式)：
1 <input type="button" value="获取后台的时间" id="btnJqGetDateTime"/>
2 <script src="../../Script/jquery-3.4.1.js"></script>
3 <script type="text/javascript">
4 $("#btnJqGetDateTime").click(function () {
5 $.ajax({
6 url: "returnJsonDate.ashx", //url地址
7 type:"post", //请求方式
8 data: "id=22&ss=ff", //传入后台数据
9 cache:false, //强迫当前请求必须去后台拿数据
10 dataType:"json", //返回数据类型
11 success: function (data) { //请求成功后的回调函数
12 alert(data.Date);
13 },
14 error: function (err) //请求失败的回调函数
15 {
16 alert(err);
17 }
18 })
19 });
20 </script>