AJax技术

另类AJAX技巧

字号+ 作者:H5之家 来源:H5之家 2015-09-10 17:00 我要评论( )

AJAX我相信不用我多说,大家都知道是什么东西吧。我接触AJAX也不算太久,都是边学边写东西。其中遇到了很多问题,也总结了很多经验。我不是高手,所以我不敢说我的东西是最好的,如果你有更好的,欢迎一起讨论。 首先我觉得AJAX新手不应一以来就用什么框架(

AJAX我相信不用我多说,大家都知道是什么东西吧。我接触AJAX也不算太久,都是边学边写东西。其中遇到了很多问题,也总结了很多经验。我不是高手,所以我不敢说我的东西是最好的,如果你有更好的,欢迎一起讨论。
首先我觉得AJAX新手不应一以来就用什么框架(比如prototype.js等,即使那样写程序会容易一些)。原因是了解xmlhttp的基本工作原理,对以后的开发会有很大的帮助。而且我始终觉得对于Javascript这种脚本语言来说,执行效率是非常重要的,因此我十分反感为了实现一个小功能,动不动就包含什么框架。因为那些框架为了自身的功能和兼容性,都包含了很多使用频率比较低的东西,更有些框架为了方便用户调用,甚至不惜牺牲程序的执行效率。
好了,不说废话了,开始说正题吧。
1.创建xmlhttp对象时的问题。
创建xmlhttp对象在不同的浏览器中有不同的方法,在IE里好像只能用ActiveXObject创建,然而在Firefox等其他浏览器里就不行了

,但可以用XMLHttpRequest()函数创建,这样的不统一给程序员写程序带来了很大的难度,所以我认为在学习JS的过程中记录下这些不同的地方很有必要,不然一个很有前途的程序很容易就会成为 “IE only” 的!!
下面是一个兼容的xmlhttp对象创建函数。以后就可以直接用这个函数创建xmlhttp对象,而不用担心兼容性问题了

CODE:

function createAJAX()
{
var xmlhttp;
try { xmlhttp = new ActiveXObject(“Msxml2.XMLHTTP”); }
catch (e1)
{
try { xmlhttp = new ActiveXObject(“Microsoft.XMLHTTP”); }
catch (e2) { xmlhttp = null; }
}
if (!xmlhttp)
{
if (typeof XMLHttpRequest != “undefined”) { xmlhttp = new XMLHttpRequest(); }
else return false;
}
return xmlhttp;
}

2.AJAX的数据传输方式。
正如你知道的,AJAX支持以POST何GET方式传送数据。但你知道怎样正确使用他们吗?
GET:
GET是最常用的数据传输方式,就是将变量名和值直接跟在URL后面就可以了,同时这个也是最简单的方法。
比如: 调用的URL为 ajax.php?id=1,这样在ajax.php中的$_GET数组里就有 $_GET[“id”] = 1; 如果有多个变量,则用”&”分开。
POST:
POST相对于GET来说要用得比较少一点,而且POST的用法比GET要麻烦一点。
首先,POST也跟GET一样,要先把变量名和值用”=”和”&”符号连成一个字符串。 然后用 xmlhttp的 send 方法传送。而且要在send之前设置header。

CODE:

var ajax = createAJAX();//就是前面那个创建xmlhttp对象的函数
ajax.open(“POST”,”ajax.php”,true);
ajax.onreadystatechange = function1;//配置状态处理函数名,不能在后面加上”()”!!
ajax.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); //这句必须要,而且一定要放在send以前
ajax.send(“变量1=值1&变量2=值2″);

用这种方法传送出去的值就和用表单的post方式传出的值一样。

还有一个非常重要的,不管用POST还是GET,都应特别注意”&”,”+”和”%”等特殊字符的问题。如果变量的值里面含有这些字符,那么后果不堪设想。一个很好地解决办法就是使用encodeURIComponent这个全局函数来将所有的值都处理一遍(注意只是处理值),将特殊字符转换成%XX的形式(和php里的urlencode貌似是一个功能)。但这个函数在IE5里不能用!

用POST方法传送数据的时候,xmlhttp.send()传出的所有东西在php里都可以在一个名叫”php://input”的特殊文件里读取到。比如上面的那个代码,在ajax.php里用 file_get_contents(“php://input”) 就可以得到 “变量1=值1&变量2=值2″。 这是一个非常好的功能!这样我们就可以不用再使用”变量名=值”的方式了!也不用担心特殊字符! 将这个方法和GET结合起来就可以做一个AJAX的文章自动保存的程序。

CODE:

var ajax = createAJAX();
ajax.open(“POST”,”ajax.php?filename=a.txt”,true);
ajax.onreadystatechange = function1;
//ajax.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”); //如果不需要将send出的字符串解析成POST变量数据,那么这句就可以不用了
ajax.send(“这里可以传送文件正文!!!!!”);

这样从ajax.php的$_GET数组中可以获得文件名,用 file_get_contents(“php://input”) 就可以获得文件正文,而且不用担心任何的特殊字符,同时也不用处理数据,减轻客户端压力。
我做了一个样例,看这里

我看过很多ajax框架,但没有发现支持用这种方式传输数据的。另外我发现一个非常好用的ajax框架 tw-sack.js,但也有许多不尽人意的地方。于是我修改了一下,增加了一些功能。下面说说它的功能和用法:

特点:
体积小,方便调用, 增加 GET&

OST 方法,就是上面说的那种

CODE:

实体化对象:
var ajax = new sack(“URL”); // URL为ajax调用地址

属性:( =默认值)
method = “GET”;//”GET”和”POST”或”GET&POST”
encodeURL = true; //是否处理参数值
late = true; //是否为异步方式
函数配置:
onLoading = 空函数; //当loading的时候触发
onLoaded = 空函数; //当下载完的时候触发
onInteractive = 空函数;//当交互的时候触发
onCompletion = 空函数;//当全部完成的时候触发
onError = 空函数;//当发生错误的时候触发
方法:
setVar 设置变量和值,可以以两种方式:setVar(“varName”,”varValue”); 和 setVar( { “name1″:”value1″,”name2″:”value2″} );
send 发送,可以当method = “GET&POST” 的时候可以接受一个字符串作为 POST 的内容
当完成的时候才可用的属性(在onCompletion里可以使用):
response//返回的字符串
responseXML//返回的xml

具体样例:
ajax.htm:

CODE:

Loading…


ajax.php:

CODE:

< ? $br = " --------------------------- "; print_r($_GET); echo $br; print_r($_POST); echo $br; echo file_get_contents("php://input"); echo $br; ?>

在这里可以看到: ajax2.htm

sack.js下载地址: sack.js

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • JQuery实现Ajax加载图片的方法

    JQuery实现Ajax加载图片的方法

    2016-02-24 17:01

  • 判断用户是不是为ajax请求

    判断用户是不是为ajax请求

    2016-02-24 17:00

  • Ajax与WEB开发 by alixixi.com

    Ajax与WEB开发 by alixixi.com

    2016-02-11 11:02

  • jQuery.ajax()的相关参数及使用

    jQuery.ajax()的相关参数及使用

    2016-02-08 16:00

网友点评