代码学堂(uxuew.cn)提供付费解决PHP WEB开发等技术服务,如果需要请 点击加我QQ:1662935793.
>web前端 > ajax技巧 > 兼容所有浏览器纯js实现的Ajax请求实例

兼容所有浏览器纯js实现的Ajax请求实例

ajax技巧 围观2608次 更新日期:2017-07-08 18:57:40 留下足迹

一、纯js实现的Ajax实例:
代码如下:

  1. var ajax = function() {}; 
  2. ajax.prototype = { 
  3.     request: function(method, url, callback, postVars) { 
  4.         var xhr = this.createXhrObject(); 
  5.         xhr.onreadystatechange = function() { 
  6.             if (xhr.readyState !== 4) return
  7.             (xhr.status === 200) ? 
  8.                 callback.success(xhr.responseText, xhr.responseXML) : 
  9.                 callback.failure(xhr,status); 
  10.         }; 
  11.         if (method !== "POST") { 
  12.             url += "?" + JSONStringify(postVars); 
  13.             postVars = null
  14.         } 
  15.         xhr.open(method, url, true); 
  16.         xhr.send(postVars); 
  17.     }, 
  18.     createXhrObject: function() { 
  19.         var methods = [ 
  20.             function() { return new XMLHttpRequest(); }, 
  21.             function() { return new ActiveXObject("Msxml2.XMLHTTP"); }, 
  22.             function() { return new ActiveXObject("Microsoft.XMLHTTP"); } 
  23.         ], 
  24.         i = 0, 
  25.         len = methods.length; 
  26.         for (; i < len; i++) { 
  27.             try { 
  28.                 methods[i]; 
  29.             } catch(e) { 
  30.                 continue
  31.             } 
  32.             this.createXhrObject = methods[i]; 
  33.             return methods[i]; 
  34.         } 
  35.         throw new Error("ajax created failure"); 
  36.     }, 
  37.     JSONStringify: function(obj) { 
  38.         return JSON.stringify(obj).replace(/"|{|}/g, "") 
  39.                     .replace(/b:b/g, "="
  40.                     .replace(/b,b/g, "&"); 
  41.     } 
  42. }; 
二、jQuery $.ajax概述

出现JQuery后,使AJAX变得更加容易实现。
JQuery中,AJAX的高层实现主要有$.get(),$.post()等,下面详细介绍一下$.ajax()的使用方法
1、请求页面AJAX.aspx
js代码如下:

  1. <script type="text/javascript"
  2.         function Text_ajax() 
  3.         { 
  4.            $.ajax( 
  5.            { 
  6.               type:"GET",//通常会用到两种:GET,POST。默认是:GET 
  7.               url:"ResponseText.aspx",//(默认: 当前页地址) 发送请求的地址 
  8.               dataType:"html",//预期服务器返回的数据类型。 
  9.               beforeSend:beforeSend, //发送请求 
  10.               success:callback, //请求成功 
  11.               error:error,//请求出错  
  12.               complete:complete//请求完成 
  13.                
  14.            }); 
  15.         } 
  16.         function error(XMLHttpRequest, textStatus, errorThrown) 
  17.         { 
  18.               // 通常情况下textStatus和errorThown只有其中一个有值  
  19.               $("#showResult").append(" 
  20. 请求出错啦! 
  21. "); 
  22.         } 
  23.         function complete(XMLHttpRequest, textStatus) 
  24.         {   
  25.               $("#showResult").append(" 
  26. 请求完成 
  27. "); 
  28.         } 
  29.         function beforeSend(XMLHttpRequest) 
  30.         { 
  31.               $("#showResult").append(" 
  32. 发送请求….. 
  33. "); 
  34.                 
  35.         } 
  36.         function callback(msg) 
  37.         { 
  38.               $("#showResult").append(" 
  39. 请求成功,回传数:"+msg+" 
  40. ");          
  41.         } 
  42.     </script> 

html代码如下:

  1. <input value="Text_ajax函数" type="button" onclick="Text_ajax()"/> 
  2. <div id="showResult">div> 
响应页面JQueryAJAX.aspx
后台代码:
代码如下:
  protected void Page_Load(object sender, EventArgs e)
    {
        Response.Write("呵呵!测试成功啦!");
    }
三、关于jQuery Ajax中文乱码问题

方法一:提交前采用encodeURI两次编码,记住一定是两次

1.修改以下代码
代码如下:

data:{id:1, type:encodeURI(encodeURI('商品'))}

2.在后台action里要对取得的字符串进行decode
代码如下:
String type = request.getParameter("type");
type = URLDecoder.decode(type, "UTF-8");


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

在ajax方法中加入以下参数
代码如下:
contentType: "application/x-www-form-urlencoded; charset=UTF-8″

使用其它js框架或者xhr都是差不多,设置header中contentType即可,
这里关键是charset=UTF-8,如果没有这个,是不行的,默认jQuery里的contentType是没有的.

此外还需要补充一下jQuery里对参数已经进行了一次encodeURIComponent的处理。

相比较而言,方法二在action里不需要进行decode,所以推荐使用此方法.

希望本文所述对大家的Ajax程序设计有所帮助。

转载请注明:代码学堂>web前端 > ajax技巧 > 兼容所有浏览器纯js实现的Ajax请求实例

喜欢 (786) or 分享 (200)