步步为营-77-Ajax简介

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)

1.2 XMLHttpRequest对象的方法

new创建对象 open创建请求 send发送请求

1.3 根据以上三种方法,readyState对应五种状态0 1 2 3 4

new => 0 => open => 1 => send =>2=> 正在接收服务端返回的数据... 3 =>数据接受完毕 4

1.4 Open() 和Send() 方法

1.4.1 get请求

//参数1:请求方式　　参数2:请求地址,可带参数(?name='zhangsan')　　参数3:是否是异步请求

xhr.open("get", "01JavaScript下的Ajax.aspx.cs",true);

xhr.Send();　　

1.5 回调函数:当服务器将数据返回给浏览器后,自动调用该方法

xhr.onreadystatechange

<%@ 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="" οnblur="checkVal(this)" /><br />密码:<input type="text" id="UserPwd" /></form>
</body>
</html>

Ajax

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="" οnblur="checkVal(this)" /><br />密码:<input type="text" id="UserPwd" />
</body>
</html>

jQuery下的Get

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>

jQuery Ajax

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;}