网站地图    收藏   

主页 > 前端 > javascript >

js 兼容多浏览器的Ajax请求代码示例

来源:自学PHP网    时间:2014-09-19 14:47 作者: 阅读:

[导读] ajax我们经常会用到的,但网上找到的大部份ajax兼容性都不强,下面自己改了一个不错的兼容性很强的ajax函数,同时后面介绍的jquery ajax 兼容性也很强。...


 代码如下 复制代码

var ajax = function() {};
ajax.prototype = {
    request: function(method, url, callback, postVars) {
        var xhr = this.createXhrObject();
        xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) return;
            (xhr.status === 200) ?
                callback.success(xhr.responseText, xhr.responseXML) :
                callback.failure(xhr,status);
        };
        if (method !== "POST") {
            url += "?" + JSONStringify(postVars);
            postVars = null;
        }
        xhr.open(method, url, true);
        xhr.send(postVars);
    },
    createXhrObject: function() {
        var methods = [
            function() { return new XMLHttpRequest(); },
            function() { return new ActiveXObject("Msxml2.XMLHTTP"); },
            function() { return new ActiveXObject("Microsoft.XMLHTTP"); }
        ],
        i = 0,
        len = methods.length;

        for (; i < len; i++) {
            try {
                methods[i];
            } catch(e) {
                continue;
            }

            this.createXhrObject = methods[i];
            return methods[i];
        }

        throw new Error("ajax created failure");
    },
    JSONStringify: function(obj) {
        return JSON.stringify(obj).replace(/"|{|}/g, "")
                    .replace(/b:b/g, "=")
                    .replace(/b,b/g, "&");
    }
};

jQuery $.ajax概述


出现JQuery后,使AJAX变得更加容易实现。

JQuery中,AJAX的高层实现主要有$.get(),$.post()等,下面详细介绍一下$.ajax()的使用方法

1、请求页面AJAX.aspx

js代码如下:

 代码如下 复制代码

   <script type="text/javascript">
        function Text_ajax()
        {
           $.ajax(
           {
              type:"GET",//通常会用到两种:GET,POST。默认是:GET
              url:"ResponseText.aspx",//(默认: 当前页地址) 发送请求的地址
              dataType:"html",//预期服务器返回的数据类型。
              beforeSend:beforeSend, //发送请求
              success:callback, //请求成功
              error:error,//请求出错
              complete:complete//请求完成
             
           });
        }
        function error(XMLHttpRequest, textStatus, errorThrown)
        {
              // 通常情况下textStatus和errorThown只有其中一个有值
              $("#showResult").append("<div>请求出错啦!</div>");
        }
        function complete(XMLHttpRequest, textStatus)
        { 
              $("#showResult").append("<div>请求完成</div>");
        }
        function beforeSend(XMLHttpRequest)
        {
              $("#showResult").append("<div>发送请求…..<div>");
              
        }
        function callback(msg)
        {
              $("#showResult").append("<div>请求成功,回传数:"+msg+"<div>");         
        }
       
    </script>

html代码如下:

 代码如下 复制代码

  <input value="Text_ajax函数" type="button" onclick="Text_ajax()"/>
    <div id="showResult">   
</div>

响应页面JQueryAJAX.aspx

后台代码:

 代码如下 复制代码

  protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("呵呵!测试成功啦!");
    }


jQuery Ajax中文乱码问题?

:ajax配置contentType属性,加上charset=UTF-8

在ajax方法中加入以下参数

contentType: “application/x-www-form-urlencoded; charset=UTF-8″使用其它js框架或者xhr都是差不多,设置header中contentType即可,

这里关键是charset=UTF-8,如果没有这个,是不行的,默认jQuery里的contentType是没有的.

方法二在action里不需要进行decode,所以推荐使用此方法

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号-1@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

添加评论