步步为营-77-Ajax简介

最新推荐文章于 2021-12-09 11:15:48 发布

weixin_30563319

最新推荐文章于 2021-12-09 11:15:48 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/YK2012/p/7041629.html

版权

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

View Code

转载于:https://www.cnblogs.com/YK2012/p/7041629.html

weixin_30563319

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
步步为营-77-Ajax简介

AJax:异步JavaScript和XML.Asynchronous JavaScript and XML优点:无刷新1JavaScript下的Ajax　　1.1 XMLHttpRequest对象　　使用ajax有一个很重要的对象XMLHttpRequest,而该对象的创建方式　　varxhr=newXMLHttpRequest();//常用　　varxh...
复制链接

扫一扫