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

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

作者:xiaosong  日期:06-25

一、纯js实现的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= 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(" 请求出错啦! "); } function complete(XMLHttpRequest, textStatus) { $("#showResult").append(" 请求完成 "); } function beforeSend(XMLHttpRequest) { $("#showResult").append(" 发送请求….. "); } function callback(msg) { $("#showResult").append(" 请求成功,回传数:"+msg+" "); } </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中文乱码问题

方法一:提交前采用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&Prime;

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

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

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

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

web前端|正则|JSP教程|ASP教程|
ajax教程|jquery教程|css教程|服务器|
操作系统|linux系统|SEO优化|网站运维|
织梦cms|javascript教程|html教程|编程开发|
php开发|数据库|Mysql教程|CMS建站教程|
phpcms教程|wordpress|apache服务器|
代码学堂-导航