`
thinkact
  • 浏览: 83485 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ajax 如何减少事件过程中request.send的次数

阅读更多

[转]http://am9.spaces.live.com/blog/cns!dd3bc8b291326a9a!690.entry

简单举例而言,一个使用简单搜索功能的ajax小程序。在文本框输入的过程中(onkeyup事件)ajax建立httprequest,get url取得后台回应然后更新结果到前台。
现在的问题是我们访问后台太频繁了,我们真的需要每一个onkeyup时都访问后台么?
比如输入"domino"这个单词,过程中有最少六次onkeyup;对应地后台给六次信息反馈,可是都有用么?
应该不是,通常我们仅希望输入完“domino”后,后台给我们一次信息(好吧可能有其他情况我们后面讨论#1)。

目标有了,当一组密集的输入事件发生时,我们只把这组事件的最后一个拿出来触发Ajax访问后台的功能。以下是用window.setTimeout实现的逻辑。
思路其实很简单输入事件不再直接触发request.send,而是触发一个延时器 timer=window.setTimeout("onAjax(actInput)",300);
每新建一个延时器时都会把前一个延时器清掉if (timer)   window.clearTimeout(timer);
这样即可满足要求,正如你看到的“300”是我测试下来比较合理的速度。
其他:要注意的可能有人和我一样,本来有一些无用输入的屏蔽逻辑是写在onKeyUp调用的函数里比如我原来的写在onAjax() 里面
现在呢这个函数里访问不到event了,所以要写到现在onKeyUp调用的函数比如我的beforeAjax(T1)里面来。


input.onKeyUp="beforeAjax(T1)"
var timer;
var actInput;
function beforeAjax(T1){
  actInput=T1;
  if(event.keyCode==37 | event.keyCode==39)return false;//无用输入的屏蔽
  if (timer)   window.clearTimeout(timer);
  timer=window.setTimeout("onAjax(actInput)",300);
}

function onAjax() {
。。。。。。
    initRequest(url);
    req.onreadystatechange = processRequest;
    req.open("GET", url, true);
    req.send(null);
}

#1不管其他什么情况你如果想任何时候后台反馈一下只需停顿你的输入然后等(在这个程序例子里)300毫秒就OK了

无线风光在户外,户外精品在竟峰
jfhw360.taobao.com
分享到:
评论

相关推荐

    AjaxRequest(Ajax使用包)

    AjaxRequest是实现Ajax功能的一个工具包,它简化了JavaScript与服务器进行异步数据交换的过程。在Web开发中,AjaxRequest通常用于提高用户体验,因为用户不必等待整个页面刷新,只更新需要变动的部分。 **Ajax的...

    AJAXRequest 开发者手册

    AJAXRequest是实现AJAX技术的一种库或工具,它简化了前端开发者与服务器进行异步通信的过程。本手册将深入讲解AJAXRequest的使用方法和核心概念。 ### 1. AJAX基础 AJAX的核心是XMLHttpRequest对象,它允许...

    ajax中使用javascript的send方法post参数

    ### AJAX中使用JavaScript的send方法POST参数详解 #### 一、引言 在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛应用于实现网页的局部刷新,提升用户体验。其中,通过JavaScript发送POST请求是一...

    AjaxRequest下载

    在描述中提到的"AjaxRequest下载"可能是指利用Ajax技术实现文件下载的功能。这通常涉及到以下几个步骤: 1. 创建XMLHttpRequest实例:首先,我们需要在JavaScript中创建一个新的XMLHttpRequest对象,这是发送异步...

    ajax,javascript

    简单ajax步骤 a.创建request,根据浏览器版本不同,创建不同的request对象; b.request.open("post",url,true); //打开连接,post是提交方式,如果是get方式,直接带问号。 var u = "user="+encodeURI(username);//...

    关于ajax技术.docx

    例如:`request.send(null)` 或 `request.send('param1=value1&param2=value2')` 5. 监听状态变化:通过`request.onreadystatechange`事件监听请求的状态。当请求完成,即`request.readyState`为4且`request.status...

    有关ajax进度条........

    在Web开发中,Ajax(Asynchronous JavaScript and XML)技术允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。在处理大文件上传或长时间运行的任务时,提供一个进度条可以显著提升用户体验,让...

    Ajax最简单例子Demo

    Ajax最简单例子,一个例子让你明白Ajax原理,XMLHttpRequest原理 var http_request = false; function createRequest(url) { http_request = false; if (window.XMLHttpRequest) { // Mozilla浏览器 ...

    前端大厂最新面试题-ajax.docx

    Ajax的实现过程需要服务器逻辑进行配合,需要完成以下步骤: 1. 创建 Ajax的核心对象 XMLHttpRequest对象 2. 通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接 3. 构建请求所需的数据内容,并通过...

    ajax基础教程.doc

    - `send()`方法通常在GET请求中传入`null`,而在POST请求中,你可以传递要发送的数据,例如: ```javascript http_request.open('POST', 'http://www.example.org/submit', true); ...

    简单的PHP+MySQL+AJAX留言板实例

    request.send(poststr); request.onreadystatechange = updatePage; } function updatePage() { if (request.readyState == 4) if (request.status == 200) document.getElementById("output").innerHTML = ...

    ajax-req-异步

    1. **XMLHttpRequest对象**:在原生的AJAX实现中,`XMLHttpRequest`对象是发起异步请求的核心。它是浏览器提供的一种API,用于客户端脚本(通常是JavaScript)与Web服务器进行交互。 - **创建对象**:`var request ...

    最新ajax常用的函数大全

    AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行...在开发过程中,了解和熟练运用这些函数,能够极大地提升Web应用的性能和用户体验。

    AJAX技术实例分析借鉴.pdf

    在给定的文件中,我们关注的是AJAX技术的应用,主要通过两个JavaScript文件:AjaxRequest.js和AjaxAssistantFun.js来实现。AJAX(Asynchronous JavaScript and XML)是一种在不重新加载整个网页的情况下,能够更新...

    jsp+ajax发送GET请求的方法.docx

    在 JSP 文件中,我们可以使用 Servlet 来处理 Ajax 发送的 GET 请求。在本文中,我们使用 LoginServlet 来处理用户名的验证。 首先,我们需要在 web.xml 文件中配置 Servlet 的信息: ```xml <servlet-name>...

    ASP源码—AJAX+ASP实现输入框提示.zip

    3. **JavaScript文件**:可能包含处理用户输入事件、发送AJAX请求、接收和处理响应的函数。 4. **CSS文件**:用于样式设计,使提示信息具有良好的视觉效果。 5. **可能的数据库文件**:如果提示信息是从数据库获取的...

    JavaWeb之Ajax与Jqeury

    发送 POST 请求与发送 GET 请求类似,但需要注意设置请求头,并在 `send` 方法中传递数据: ```javascript function post() { var request = ajaxFunction(); request.open("POST", "/day16/DemoServlet01", ...

    新手练习 Ajax请求封装进JavaScript类

    class AjaxRequest { constructor(url) { this.url = url; this.timeout = 5000; // 默认超时时间为5秒 this.request = null; } send() { if (this.request) { throw new Error('已有请求正在进行,无法...

    非常好Ajax基础教程

    总结,Ajax是现代Web开发中不可或缺的一部分,它允许创建更具互动性和响应性的用户体验。通过理解其基本原理和实践,开发者可以构建更加高效和用户友好的Web应用程序。在学习Ajax时,不仅要掌握创建HTTP请求、处理...

    简单的ajax+servlet表单数据验证.doc

    以上就是基于AJAX和Servlet进行表单数据验证的详细过程,涉及了前端请求的构建、发送、响应处理,以及后端Servlet对请求的接收、处理和响应。通过这个案例,我们不仅学习了AJAX和Servlet的基本用法,还了解了它们在...

Global site tag (gtag.js) - Google Analytics