Ajax编程技术

前端之家收集整理的这篇文章主要介绍了Ajax编程技术前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Ajax:Asynchronous Javascript and XML, 异步的Javascript和XML技术。是指一种创建交互式网页应用的网页开发技术。它不是一种单一的技术,而是有机地利用一系列的相关技术的组合,即:Javascript + XMLHttpRequest + CSS + 服务器端 的集合。

Ajax的优点:

1.Ajax在本质上是一个浏览器端的技术
2.Ajax技术之主要目的在于局部交换客户端及服务器间之数据
3.这个技术的主角XMLHttpRequest的最主要特点,在于能够不用重新载入整个版面来更新资料,也就是所谓的Refreshwithout Reload(轻刷新)
4.与服务器之间的沟通,完全是透过Javascript来实行
5.使用XMLHttpRequest本身传送的数据量很小,所以反应会更快,也就让网络程式更像一个桌面应用程序
6.AJAX就是运用Javascript在后台悄悄帮你去跟服务器要资料,最后再由Javascript或DOM来帮你呈现结果,因为所有动作都是由Javascript代劳,所以省去了网页重载的麻烦, 使用者也感受不到等待的痛苦


异步请求基本步骤:使用XMLHttpRequest对象

按照下面模式,可以同步地XMLHttpRequest对象:

1. 创建对象; -new( 叫助手过来 )
2. 创建请求; -open ( 告诉他要去做的事情 )
3. 发送请求; -send ( 去吧 )

具体代码(获得服务器时间)

<script type="text/javascript">
        window.onload = function () {
            document.getElementById("btnGetTime").onclick = function () {
                //向服务器请求 时间
                //1.创建异步对象(小浏览器)
                var xhr = new XMLHttpRequest();
                //2.设置参数
                xhr.open("get","GetTime.ashx?name=jameszou",true);
                //3.让get请求不从浏览器获取缓存数据
                xhr.setRequestHeader("If-Modified-Since","0");
                //3.设置回调函数
                xhr.onreadystatechange = function () {
                    //3.1当完全接收完响应报文后 并且 响应状态码为200的时候
                    if (xhr.readyState == 4 && xhr.status == 200)
                    {
                        //3.2获取相应报文体内容
                        var res = xhr.responseText;
                        alert(res);
                    }
                };
                //4.发送异步请求
                xhr.send(null);
            };

            document.getElementById("btnPostTime").onclick = function () {
                //向服务器请求 时间
                //1.创建异步对象(小浏览器)
                var xhr = new XMLHttpRequest();
                //2.设置参数
                xhr.open("post","GetTime.ashx",true);
                //3.设置 请求 报文体 的 编码格式(设置为 表单默认编码格式)
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                //4.设置回调函数
                xhr.onreadystatechange = function () {
                    //3.1当完全接收完响应报文后 并且 响应状态码为200的时候
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        //3.2获取相应报文体内容
                        var res = xhr.responseText;
                        alert(res);
                    }
                };
                //5.发送异步请求"name=jameszou"
                //5.1格式:直接拼接字符串 key=value&key1=value2
                xhr.send("name=jameszou&age=29");
            };
        };
    </script>
<body>
 <input type="button" id="btnGetTime" value="get获取服务器时间" />
 <input type="button" id="btnPostTime" value="post获取服务器时间" />
</body>
一般处理程序GetTime.ashx代码
 public class GetTime : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            //接收浏览器 ajax 方式发送来的 get 参数
            string strName = context.Request.Params["name"];
            //休息
            System.Threading.Thread.Sleep(1000);
            //输出响应报文
            context.Response.Write(DateTime.Now.ToString() + ",name=" + strName);
        }

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


下面是一个jsHelper类,条用Ajax方法
var jsHelper = {
    /*1.0 浏览器兼容的方式创建异步对象*/
    makeXHR: function () {
        //声明异步对象变量
        var xmlHttp = false;
        //声明 扩展 名
        var xmlHttpObj = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","MSXML.XMLHttp"];
        //判断浏览器是否支持 XMLHttpRequest,如果支持,则是新式浏览器,可以直接创建
        if (window.XMLHttpRequest) {
            xmlHttp = new XMLHttpRequest();
        }
        //否则,只能循环 遍历 老式浏览器 异步对象名,一一尝试创建,直到创建成功为止
        else if (window.ActiveXObject) {
            for (i = 0; i < xmlHttpObj.length; i++) {
                xmlHttp = new ActiveXObject(xmlHttpObj[i]);
                if (xmlHttp) {
                    break;
                }
            }
        }
        //判断 异步对象 是否创建 成功,如果 成功,则返回异步对象,否则返回false
        return xmlHttp ? xmlHttp : false;
    },/*2.0 发送Ajax请求*/
    doAjax: function (method,url,data,isAyn,callback,errCallback) {
        method = method.toLowerCase();
        //2.1创建异步对象
        var xhr = this.makeXHR();
        //2.2设置请求参数(如果是get,则带url参数,如果不是,则不带)
        xhr.open(method,url + (method == "get" ? "?" + data : ""),isAyn);
        //2.3根据请求谓词(get/post),添加不同的请求头
        if (method == "get") {
            xhr.setRequestHeader("If-Modified-Since",0);
        } else {
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        }
        //2.4设置回调函数
        xhr.onreadystatechange = function () {
            //如果接受完毕 服务器发回的 响应报文
            if (xhr.readyState == 4) {
                //判断状态码是否正常
                if (xhr.status == 200) {
                    //正常,则调用回调函数
                    callback(xhr);//当 异步对象调用 回调函数时,为回调函数 传入 xhr 对象
                }
                //如果不正常,则尝试调用 异常回调函数
                else {
                    //如果 异常回调函数 存在,则调用,并传入 状态码
                    if (errCallback) {
                        errCallback(xhr.status);
                    }
                    //否则,直接提示 错误~!
                    else {
                        alert("错误啦~~状态码:" + xhr.status);
                    }
                }
            }
        };
        //2.5发送(如果是post,则传参数,否则不传)
        xhr.send(method != "get" ? data : null);
    },/*3.0 直接发送Post请求*/
    doPost: function (url,errCallback) {
        this.doAjax("post",callback);
    },/*4.0 直接发送Get请求*/
    doGet: function (url,errCallback) {
        this.doAjax("get",callback);
    }
};
原文链接:https://www.f2er.com/ajax/165018.html

猜你在找的Ajax相关文章