Ajax

一、完成Ajax请求

1、  在完成这个请求之前，先来了解一下Ajax是什么，它的全名叫异步的javascript与、XML，从名称可以看出，它与javascript和XML有不解之缘，Ajax使用XML地HTTP请求，通过浏览器建立的xmlHttpRequest对象，异步的向服务器发送请求，服务器处理请求后，将响应通过xmlHttp.responseText属性返回给javascript函数处理数据，进一步使用javascript处理DOM，完成页面的局部更新。

2、  代码示例，使用XMLHttpRequest完成请求

代码：JS：

 <script type="text/javascript">

      //XMLHttpRequest对象

        var xmlHttp;

        function buildXMLHttpRequest() {

        //判断浏览器

            if (window.ActiveXObject) {

                xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE

            } else if (window.XMLHttpRequest) {

                xmlHttp = new XMLHttpRequest(); //非IE

            } else {

                xmlHttp = NaN;

            }

        }

        function sendRequest() {

            buildXMLHttpRequest();

            //Post请求

            xmlHttp.open("post", "Handler.ashx", true);

            xmlHttp.onreadystatechange = function() {

               //判断状态

                if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {

                    alert(xmlHttp.responseText);

                }

            }

            //定义传输的文件HTTP头信息

            xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //采用的编码方式

            xmlHttp.send("value=1");

        }

</script>

Handler.ashx：

?

<%@ WebHandler Language="C#" Class="Handler" %> 

  

using System;

  

using System.Web; 

  

public class Handler : IHttpHandler {   

  

    public void ProcessRequest (HttpContext context) {

  

        context.Response.ContentType = "text/plain";

  

        context.Response.Write("Hello World xin_ny 中文件 "+context.Request.Params["value"]);

  

    }

  

    public bool IsReusable {

  

        get {

  

            return false;

  

        }

  

    }

  

}

效果：

二、Jquery中的Ajax方法

记得在那些年，我还在学习Jquery中没有说到它的Ajax方法，这里就补上了，JQuery提供了很多Ajax函数，方便了开发人员的使用，不再需要开发人员创建XMLHttpRequest对象来完成请求，可直接使用JQuery库中的Ajax函数完成请求，并兼容性也较好，下面就来看一下Jquery的Ajax吧。

  1、Jquery得到数据方法:load()

    例：

 function ajaxMethod() {

            $("#spanDiv").load("DemoData.txt");

        }

     2、Jquery的get(url,[data],callback)方法

    例：

 function ajaxGet() {

            //对象数据源

            var obj = { first: "First", second: "Second" };

            $.get(

            "CallBackData.ashx", obj, function(data) {

                $("#spanDiv").html(data);

            });

        }

     3、Jquery的post(url,[data],callback,type)方法

    例：

 function ajaxPost() {

            //对象数据源

            var obj = { first: "First", second: "Second" };

            $.get(

            "CallBackData.ashx", obj, function(data) {

                $("#spanDiv").text(decodeURI(data));

            });

        }

     4、Jquery的ajax(option)方法

     例：

 function ajaxAjax() {

            //对象数据源

            var obj = { first: "First", second: "Second" };

            $.ajax({

                type: "Get",

                url: "CallBackData.ashx",

                data: obj,

                success: function(data) {

                    $("#spanDiv").text(decodeURI(data));

                }

            });

        }

     5、Jquery的ajaxSetup(options)方法，设置全局的ajax的配置

     例：

 function ajaxAjaxSetup() {

        //对象数据源

        var obj = { first: "First", second: "Second" };

        $.ajax({

            type: "Post",

            url: "CallBackData.ashx",

            data: obj,

            success: function(data) {

                $("#spanDiv").text(decodeURI(data));

            }

        });

    }

    6、Jquery的ajaxSubmit(options)方法，提交表单