AJax:异步JavaScript和XML.Asynchronous JavaScript and XML
优点:无刷新
1 JavaScript下的Ajax
1.1 XMLHttpRequest对象 使用ajax有一个很重要的对象XMLHttpRequest,而该对象的创建方式
var xhr = new XMLHttpRequest();//常用
var xhr = new ActiveXObject("Microsoft.XMLHTTP");//(低版本的ie)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="01JavaScript下的Ajax.aspx.cs" Inherits="AjaxTest._01JavaScript下的Ajax" %> <!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> <script> function checkVal(txt) { if (txt.value == "") { alert("用户名不能为空!"); return; } var xhr; if (XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open("get", "01JavaScript下的Ajax.aspx?name=" + txt.value, true); xhr.send(); //回调函数:当服务器将数据返回给浏览器后,自动调用该方法 xhr.onreadystatechange = function () { if (xhr.readyState ==4) { if (xhr.status == 200) { alert(xhr.responseText); return; } } } } </script> </head> <body> <form id="form1"> <%--当用户名失去焦点时候,检验用户是否存在--%> 用户名: <input type="text" id="UserName" value="" onblur="checkVal(this)" /><br /> 密码: <input type="text" id="UserPwd" /> </form> </body> </html>
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; namespace AjaxTest { public partial class _01JavaScript下的Ajax : System.Web.UI.Page { public void Page_Load(object sender, EventArgs e) { if (Request["name"]!=null) { if (Request["name"] == "张三") { Response.Write("用户名已占用"); Response.End(); } else { Response.Write("恭喜你,用户名可以使用"); } } } } }
1.6 post请求
xhr.open("post", "01JavaScript下的Ajax.aspx", true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("name=" + txt.value);
2 通常我们是直接使用jQuery来完成Ajax请求的
2.1 JQuery下的get请求
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://localhost:58888/JQuery/jquery-1.7.1.min.js"></script> <script> $(function () { $("#UserName").blur(function () { if ($("#UserName").val() == "") { alert("用户名不能为空!"); return; } //Ajax异步请求 $.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() }, //回调函数 function (date) { alert(date); }); }); }); </script> </head> <body> 用户名: <input type="text" id="UserName" value="" onblur="checkVal(this)" /><br /> 密码: <input type="text" id="UserPwd" /> </body> </html>
2.2 JQuery下的post请求===非常简单
将 $.get("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
改为 $.post("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() },
2.3 JQuery下的另一种写法
//Ajax异步请求---方法二
$.ajax({
type: "post",
url: "02JQuery下的Ajax.ashx",
data: "name=" + $("#UserName").val() + "&pwd=" + $("#UserPwd").val(),
success: function (msg) {
alert(msg);
}
});
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title> <script src="http://localhost:58888/JQuery/jquery-1.7.1.min.js"></script> <script> $(function () { $("#UserName").blur(function () { if ($("#UserName").val() == "") { alert("用户名不能为空!"); return; } //Ajax异步请求---方法一 //$.post("02JQuery下的Ajax.ashx", { "name": $("#UserName").val(), "pwd": $("#UserPwd").val() }, ////回调函数 //function (date) { // alert(date); //}); //Ajax异步请求---方法二 $.ajax({ type: "post", url: "02JQuery下的Ajax.ashx", data: "name=" + $("#UserName").val() + "&pwd=" + $("#UserPwd").val(), success: function (msg) { alert(msg); } }); }); }); </script> </head> <body> 用户名: <input type="text" id="UserName" value="" /><br /> 密码: <input type="text" id="UserPwd" /> </body> </html>
2.4 将Ajax的结果 返回出函数
function GetReSumBYIDs(OuGUID, CcID, BiID) { var yearRem; $.ajax({ url: "../Ashx/GetBudgetRemainingZLDC.ashx?OrgUnitGUID=" + OuGUID + "&CostCenterID=" + CcID + "&BudgetItemID=" + BiID, type: "POST", data: {}, dataType: "text", async: false,//这里选择异步为false,那么这个程序执行到这里的时候会暂停,等待 //数据加载完成后才继续执行 success: function (result) { yearRem = result; }, error: function (msg) { //出错 } }); return yearRem; }