用jquery发送ajax请求的确是太方便了,$.get、$.post、$.ajax等等,但我们有时候需要中途中止ajax请求。

举个例子,用comet做聊天时,发送一个请求后,服务端通常过几十秒后才会刷新链接、返回数据。假设服务端是30秒刷新一次链接,如果我们在10秒时想要停止这个ajax请求,怎么办呢?

先上代码,后面再解释


var ajaxGet = $.get("comet_server.php",{id:1},function(data){
....//一些操作
});
ajaxGet.abort();

上面这段代码其于两个知识点:

1. $.get返回的数据类型是XMLHttpRequest,请参考手册。($.post、$.ajax、$.getJSON、$.getScript也同样)

2. XMLHttpRequest对象有abort()方法

注意:abort()后,ajax请求立即停止,但还是会执行后面的function()。如果想避免执行其中的操作,可以在function()开始位置加判断


var ajaxGet = $.get("comet_server.php",{id:1},function(data){
if(data.length == 0) return true;
....//一些操作
});
ajaxGet.abort();

在http://www.javaeye.com/news/2592看到的,很不错的!

  • Flot – Flot 为 jQuery 提供的javascript代码库. 容易使用,有特色的图表,提供交互功能(能够放大缩小数据区域等)。
  • Open Flash Chart – Open Flash Chart 是一个 Flash 图表组件,很容易安装,提供以下语言的API: PHP, Perl, Python, Java, Ruby on Rails, and .Net 来控制图表。
  • AmCharts – AmCharts 是一个动画交互Flash图表。支持: Pie Charts, Line Charts, Scatter/Bubble Charts, Bar/Column Charts, 甚至股票图表。
  • Emprise JavaScript Charts – Emprise 是一个100% 纯 JavaScript 图表解决方案,并不需要任何 JavaScript 框架.
  • PlotKit – PlotKit 是一个 图表和图像的Javascript 库. PlotKit 和 MochiKit javascript 库一起工作,支持HTML Canvas 和  Adobe SVG 显示 以及本地浏览器支持。尤其文档非常全。
  • Flotr – Flotr 是Prototype 1.6.0.2框架的javascript插件库。 Flotr帮助你在浏览器中创建图表,支持鼠标事件响应,放大缩小,CSS类型支持等。
  • PHP/SWF Charts – PHP/SWF 是一个简单支持web图表的强大工具,你能使用 PHP 来收集数据,并发送给flash,支持很多图表类型: Line, Column, Stacked column, Floating column, 3D column, Stacked 3D column, Parallel 3D column, Pie, 3D Pie, Bar, Stacked bar, Floating bar, Area, Stacked area, Candlestick, Scatter, Polar, Mixed.
  • Visifire – Visifire 是用 Silverlight 做的,是一个开源可视化数据组件,使用Visifire你能创建动画 Silverlight 图表,支持  ASP, ASP.Net, PHP, JSP, ColdFusion, Ruby on Rails 或者 简单 HTML调用.
  • FusionCharts – FusionCharts 是一个跨浏览器和跨平台的flash图表组件,能够被 ASP.NET, ASP, PHP, JSP, ColdFusion, Ruby on Rails, 简单 HTML 页面 甚至PPT调用. 几乎所有你知道的语言它都支持。
  • JFreeChart – JFreeChart 是一个开源java图表库,让开发者能够很容易在程序里面显示高质量的图表。 JFreeChart 项目从7年前便开始了,起始于 2000 年1月, 已经有四五万开发者已经使用了JFreeChart。JFreeChart 支持很多种图形文件格式: JPEG, GIF, PDF, EPS and SVG. 这对于java开发者是一个很好的资源。

  项目中需要做类似google suggest的效果,在jquery插件库中找到一个jquery.suggest,效果挺好,但对中文的支持有问题,因为输中文不像输中文那样,按一下键盘直接输出。所以使用中会出现输入中文不显示下拉菜单等情况。下面分享一个我修改后的代码。

下载地址:
jquery
jquery.suggest修改版

简单介绍下使用方法:

1.将jquery和jquery.suggest上传到网站。

2.在需要引用的页面调用

<script type=”text/javascript” src=”js/jquery1.3.2.js”></script>
<script type=”text/javascript” src=”js/suggest/jquery.suggest.js”></script>
<link rel=”stylesheet” href=”js/suggest/jquery.suggest.css” />

3.使用

<script type=”text/javascript”>
    $(document).ready(function() {
        $(“#newtel”).suggest(“ajaxback.php?act=newtel”,{
            onSelect: function() {alert(this.value);}
                }            );        }    );
</script>

其中#newtel换成输入框的ID,ajaxback.php换成ajax服务端的地址.

4.服务端 ajaxback.php

<?
$q=$_GET[‘q’];     //jquery.suggest会将输入框的当前值以GET方式传到ajax服务端,并放在变量$_GET[‘q’]中
for($i=1;$i<=10;$i++)
{
    echo $q.$i.’n’;    //输出用n换行,每行对应下拉框的每一项
}
?>

5.快捷键

下拉框显示后,上下键选择,空格键选中。当然也可以用鼠标键选。

这里也对原jquery.suggest做了点修改,原程序是按回车键选中,我将这里改成按空格键选中。因为国内有些浏览器(比如傲游)在按回车时会提交表单。

如果还有不明白的地方可以联系我哦~

  使用AJAX取后台数据,按要求每次应该返回的是不同的结果,但由于缓存,经常会出现两次取的数据重复的问题。特从网上寻觅解决方法:

  1、在服务端加 header(“Cache-Control: no-cache, must-revalidate”);

  2、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“If-Modified-Since”,”0″);

  3、在ajax发送请求前加上 anyAjaxObj.setRequestHeader(“Cache-Control”,”no-cache”);

  4、在 Ajax 的 URL 参数后加上 “?fresh=” + Math.random(); //当然这里参数 fresh 可以任意取了

  5、和第4种类似,只不过把参数换成时间。因为毕竟随机数还是存在重复的可能性,如果换成时间就不可能重复了。在 URL 参数后加上 “?timestamp=” + new Date().getTime();

  6、用POST替代GET:不推荐