什么是AJAx:Asynchronous Javascript and XML
中文意思：异步JavaScript 和XML
批一种创建交互式网页应用的网页开发技术。
AJAX优点
1.Ajax 在本质上是一个浏览器端的技术。
2.Ajax技术之主要目的在于局部交换客户端及服务器间的数据。
3.这个技术的主角XMLHttpRequest的最主要特点，在于能够不用重新载入版面来更新资料，也就是所谓的Refresh withou Reload（轻刷新）
4.与服务器之间的沟通，完全是透过Javascript来实现的。
5.使用XMLHttpRequest本身传送的数据量很小，所以反应会更快，也就让网络程式更像一个桌面应用程序。
6AJX就是运用Javascript 在后台悄悄帮你去跟服务器要资料，最后再由Javascript 或Dom来帮你呈现结果，因为所有动作都是由Javascript 代劳，所以少去了网页重载的麻烦，使用者也感受不一以等待的痛苦。

<!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 type="text/javascript">
        function createXhr() {
            var xhobj = false;
            try {
                xhobj = new ActiveXObject("Msxml2.XMLHTTP");//ie msxml 3.0
            } catch (e) {
                try {
                    xhobj = new ActiveXObject("Microsoft.XMLHTTP")//ie msxml 2.6
                }
                catch (e2) {
                    xhobj = false;
                }
            }
            if (!xhobj && typeof XMLHttpRequest != "undefined") //Firefox,Opera 8.0 Safari
            {
                xhobj = new XMLHttpRequest();
            }

return xhobj;
        }
        window.onload = function () {
            document.getElementById("btnLoginGet").onclick = doLoginGet;
            document.getElementById("btnLoginPost").onclick = doLoginPost;
        }
        function doLoginGet() {
            //获取异步对象;
            var xhr = createXhr();
            //设置好参数 请求方式，请求URL,是否启用异步
            xhr.open("get", "LoginAjax.ashx", true);
            //设置get方式不使用缓存
            xhr.setRequestHeader("if-Modlfied-Sine", 0);
            //设置异步对象的回调函数---每当异步对象的准备状态发生改变的时候调用
            xhr.onreadystatechange = function () {
                //当readyState=4的时候，就说明 异步对象已经 从服务器获得了返回的数据
                if (xhr.readyState == 4) {
                    var res = xhr.responseText;
                    alert(res);
                    //获得响应报文头所有信息
                    var headerInfo = xhr.getAllResponseHeaders();
                    alert(headerInfo);
                }

};
            xhr.send(null);
        }
        function doLoginPost() {
            //获取异步对象;
            var xhr = createXhr();
            //设置好参数 请求方式，请求URL,是否启用异步
            xhr.open("post", "LoginAjax.ashx", true);
            //指定数据提交格式
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //设置get方式不使用缓存
            xhr.setRequestHeader("if-Modlfied-Sine", 0);
           
            //设置异步对象的回调函数---每当异步对象的准备状态发生改变的时候调用
            xhr.onreadystatechange = function () {
                //当readyState=4的时候，就说明 异步对象已经 从服务器获得了返回的数据
                if (xhr.readyState == 4) {
                    //判断服务器返回的状态码是否为 200 否则就是服务器端发生了意外
                    if (xhr.status == 200) {
                        var res = xhr.responseText;
                        alert(res);
                        //获得响应报文头所有信息
                        var headerInfo = xhr.getAllResponseHeaders();
                        alert(headerInfo);
                    }
                    else {
                        alert("对不起服务器繁忙~~~~~");
                    }

}

};
            xhr.send("txtName=孙业宝&&Pwd=123");
        }
    </script>
</head>
<body>
    <form action="" method="post">
        <input type="text" name="txtName" id="txtName" /><br />
        <input type="text" name="txtPwd" /><br />
        <!--<input type="text" name="txtCode" />
        <img title="点击换验证码" onclick="this.src ='LoginVode.ashx?i=' +new date();" align="middle" src="LoginVode.ashx" /><br />-->
        <input type="button" id="btnLoginGet" value="登录 By Get" />
        <input type="button" id="btnLoginPost" value="登录 By Post" />
    </form>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace AJAX
{
    /// <summary>
    /// LoginAjax 的摘要说明
    /// </summary>
    public class LoginAjax : IHttpHandler
    {

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            context.Response.Write("Hello World");
        }

public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

增加 js验证主要是为了用户的更好体验，如果用户禁用了Js照样 可以传到服务器，白浪费时间，减少服务器的压力。

复习下 AJAX的更多相关文章

  1. MVC 下 ajax调用 日期差值计算

    背景: 服务项目已有服务期起止时间From-To 现在要根据用户输入的新的起始时间, 和该服务期的原有区间值, 计算出新的服务期截止时间 即 NewServiceToDateTime = NewSer ...

  2. ie8或9下ajax跨域问题

    ie8或9下ajax跨域支持,添加如下代码 <!--[if (IE 8)|(IE 9)]><script src="https://cdn.bootcss.com/jque ...

  3. 重写了下Ajax请求Webservice，顺便复习一下Javascript的闭包概念

    var AjaxRequest = function(){ //返回处理结果的回调函数 this.agentCallBack = {}; //javascript 调用domino代理的方法. thi ...

  4. SpringMVC下Ajax请求的方法，@Responsebody如果返回的是布尔值，ajax不会接到任何回传数据

    SpringMVC框架下,如果用ajax向后台请求得方法如果使用@Responsebody返回布尔值的话,ajax得不到任何的回传数据. 但是如果返回String类型,就是正常的. 测试了下代码写得没 ...

  5. IE浏览器下ajax缓存导致数据不更新的解决方法

    摘自:http://www.iefans.net/ie-ajax-json-shuju-huancun/ 最近做设计的时候遇到一个小问题,当你用jquery的getjson函数从后台获取数据的时候,I ...

  6. 七牛---以一个七牛上传的实例小结下AJAX跨域【转】

    http://blog.csdn.net/netdxy/article/details/50699842 使用七牛过程中,很多用户或多或少遇到跨域的问题,这篇文章主要介绍下跨域的概念来看什么情况下会出 ...

  7. 关于IE下AJAX的问题探讨

    今天JS练手的时候,想封装一个发送AJAX请求的对象,当然,是想要兼容全浏览器的.代码如下: var Ajax = { xhr: null, callback: null, XMLHttp: func ...

  8. ***Jquery下Ajax与PHP数据交换

    一.前台传递字符串变量,后台返回字符串变量(非json格式) Javascript代码: 这里,为了解决Ajax数据传递出现的汉字乱码,在字符串传递之前,使用javascript函数escape()对 ...

  9. IE9下Ajax缓存问题

    使用jQuery的getJSON从后台定时获取数据并刷新界面,使用以下方法时,在Chrome,Firefox下没问题,但在IE9下却无法刷新数据 $.getJSON(webApp + "/G ...

随机推荐

  1. TMS320C54x系列DSP的CPU与外设——第3章 存储器

    第3章  存储器 本章介绍了TMS320C54x DSP存储器的构成和操作.一般来说,C54x器件共有192K 16位字的存储窨,这个空间分成3个专用的部分:64K字程序.64K字数据和64K字I/O ...

  2. 黄聪：WordPress 后台发布文章时提示用户选择分类

    很多用户在后台发布文章,常常会忘记选择分类,所以很有必要添加一个提醒功能,如果没有选择分类,点击发布时,就显示一个提示信息.要实现这个功能,只要将下面的代码添加到主题的 functions.php 即 ...

  3. SaveFileDialog的用法

    #region 保存对话框 private void ShowSaveFileDialog() { //string localFilePath, fileNameExt, newFileName, ...

  4. window.print实现打印特定控件或内容

    window.print打印指定div 首先我们可以把要打印的内容放在div中,然后用下面的代码进行打印. <html> <head> <script language= ...

  5. Android网络通信库Volley简介

    1. 什么是Volley 在这之前,我们在程序中需要和网络通信的时候,大体使用的东西莫过于AsyncTaskLoader,HttpURLConnection,AsyncTask,HTTPClient( ...

  6. 将博客搬至51CTO

    为了统一博客文章,将文章搬至51cto个人博客

  7. maven PKIX path building failed: sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path

    maven编译的时候遇到的奇葩问题,  非常奇葩, 所有其他同事都没有遇到 , 仅仅是我遇到了 不清楚是因为用了最新的JDK的缘故(1.8 update91)还是其他什么原因. 总之是证书的问题. 当 ...

  8. JAVA 文档注释，类的说明，HTML说明文档的生成

    有的时候,我们会写一些类,编译成.class文件,给别人使用,那么,别人不知道这个类有哪些方法,如何调用. 所以我们需要做一个类的说明文档. 可以采用在.java类里面进行注释,通过注释来生成类的说明 ...

  9. Ubuntu配置网络命令（转载）

    From:http://blog.csdn.net/ithomer/article/details/6264881 以eth0为例   1. 以DHCP方式配置网卡 编辑文件: /etc/networ ...

  10. ubuntu 格式化U盘，并制作系统镜像

    1. 先要卸载U盘,使用如下命令: #umount /dev/sdb1 注意:/dev/后面的设备要根据你的实际情况而定,否则后面格式化,丢失数据!! 格式化U盘,并建立vfat文件系统 #mkfs. ...