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 ==) {

                    if (xhr.status == ) {

                        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>

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="" onblur="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;

                }

步步为营-77-Ajax简介的更多相关文章

  1. PHP AJAX 简介

    AJAX 简介 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. AJAX 是什么? AJAX = Asynchronous JavaScript and XML. AJAX ...

  2. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    Django基础七之Ajax 本节目录 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解) 一 Ajax简介 ...

  3. js进阶课程ajax简介（ajax是浏览器来实现的）

    js进阶课程ajax简介(ajax是浏览器来实现的) 一.总结 1.ajax使用需要服务器支持,比如phpstudy 2.ajax是浏览器支持的功能:ajax有个核心对象XMLHttpRequest, ...

  4. {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)

    {Django基础七之Ajax} 一 Ajax简介 二 Ajax使用 三 Ajax请求设置csrf_token 四 关于json 五 补充一个SweetAlert插件(了解)   Django基础七之 ...

  5. ajax简介及JS写原生ajax

    ajax 1.什么是ajax ajax 的全称是Asynchronous JavaScript and XML,其中, Asynchronous 是异步的意思,指的是异步 JavaScript 和 X ...

  6. AJAX简介

    基本介绍 AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML). 国内翻译常为“阿贾克斯”和阿贾克斯足球队同音.Web应用的交互如Fli ...

  7. AJAX 简介

    什么是 AJAX ? AJAX = 异步 JavaScript 和 XML. AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味 ...

  8. 1.AJAX简介

    没有AJAX会怎么样?普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面,比如实现显示服务器时间.每次都要刷新页面的坏处:页面刷新打断用户操作.速度慢.增加服务器的流量压力.如果没有AJAX ...

  9. AJAX开发技术--AJAX简介

    Asynchronous  JavaScript and XML,异步JavaScript和XML 主要目的用于页面的局部刷新.不用全部刷新,提高性能. 在AJAX中主要是通过XMLHttpReque ...

  10. jQuery AJAX 简介

    AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新. jQuery AJAX 实例 使用 jQuery AJAX 修改文本内容 尝试一下 » 什么是 AJAX? A ...

随机推荐

  1. TCP通信实现对接硬件发送与接收十六进制数据 & int与byte的转换原理 & java中正负数的表示

    今天收到的一份需求任务是对接硬件,TCP通信,并给出通信端口与数据包格式,如下: 1.首先编写了一个简单的十六进制转byte[]数组与byte[]转换16进制字符串的两个方法,如下: /** * 将十 ...

  2. TensorFlow学习笔记：共享变量

    本文是根据 TensorFlow 官方教程翻译总结的学习笔记,主要介绍了在 TensorFlow 中如何共享参数变量. 教程中首先引入共享变量的应用场景,紧接着用一个例子介绍如何实现共享变量(主要涉及 ...

  3. ubuntu server命令行搭建虚拟专用网

    问题: 在做一个国外的开源项目,需要用到很多 ubuntu 上特定版本的应用,由于国内墙的问题,导致Ubuntu 14.04在需要添加一些国外的库的时候(add-apt-repository ppa: ...

  4. ES6学习笔记五（promise异步）

    知识点1:rosolve是执行下一步then() // Promise { let ajax=function(){ console.log('执行2'); return new Promise(fu ...

  5. Media Query-响应式布局

    做响应式网站的时候,一定要在页面头部加入如下的声明: <meta name="viewport" content="width=device-width, init ...

  6. 使用参数innodb_file_per_table支持MySQL InnoDB表数据共享空间自动收缩

    http://heylinux.com/archives/2367.html http://blog.csdn.net/ywh147/article/details/8996022 使用过MySQL的 ...

  7. ASP.NET如何下载大文件

    关于此代码的几点说明: 1. 将数据分成较小的部分,然后将其移动到输出流以供下载,从而获取这些数据. 2. 根据下载的文件类型来指定 Response.ContentType .(参考OSChina的 ...

  8. 【原创】测试基础之http_load（1）简介、安装、使用

    http_load-09Mar2016官方:https://acme.com/software/http_load/ 一 简介 http_load - multiprocessing http tes ...

  9. mysql修改表、字段、库的字符集(转)

    原文链接:http://fatkun.com/2011/05/mysql-alter-charset.html MySQL中默认字符集的设置有四级:服务器级,数据库级,表级 .最终是字段级 的字符集设 ...

  10. zipkin 整合elastic

    前提: <dependency> <groupId>io.zipkin.java</groupId> <artifactId>zipkin</ar ...