JS原生对象实现异步请求以及JQ的ajax请求四种方式
一、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>
