`
sunbin
  • 浏览: 354295 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

一小时搞定Ajax

阅读更多

 

 

一小时搞定Ajax,严重建议参考xmlhttp手册
传说中的Ajax,入门其实很容易。当然深入的东西就多了、了解其原理,学习就快多了。
原理:
  UI-->XMLHttpRequest-->Ajax engine-->server-->Ajax engine-->XMLHttpRequest-->UI
  其中Ajax engine是我们不能看到的、对于我们是透明层。所以我们可以理解为
  UI-->XMLHttpRequest-->server-->XMLHttpRequest-->UI

                  jsp                  servlet            jsp      
  
  1.我们利用javascript创建XMLHttpRequest对象
  2。调用XMLHttpRequest的open()方法,参数1 http请求方式 2:http服务 3:同步或者异步
  3: onreadystatechange 事件要相应的javascript函数,回调
  4: 发送请求 send()
  5:onBlur="validate();
  6:添加Servlet 配置到容器
  7: 在servlet 添加相关的业务,把验证信息,写回客户端
   response.getWriter()
  8: 用ajax 的异步功能
  9: 如何解决缓存
      在请求的url上加上时间戳
  10 : 返回中文的问题
         response.setContentType("text/html");
       response.setCharacterEncoding("GB18030");
       也可以在filter里面添加
   
  11 : 通过post 提交(POST乱码问题,比较麻烦,2次解码)
       url :为请求服务地址,后面不用带参数
       open:参数为 post
       在 send之前要设置xmlhttprquest 的requestHeader
      xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
      send :要按照规则组串
 12:  当readState <4的时候xmlHttpRequest 取不到 status 属性值
       一般只有等于4的时候,servlet 与client的交互才结束。

jsp文件中对应代码段为

1.name文本输入框中onBlur="validate();"

2.javascript脚本(以上12条)

  var xmlhttp;
  function validate(){
  var name = document.getElementById("name").value
  if(name.length>=6){
   //创建XMLHttpRequest,ie和其他浏览器不一样,所以要区别一下
     if(window.ActiveXObject){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
     } else if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
     }
    
    
//     var url = "admin/userValidateServlet.action?name="+name+"&tm="+new Date().getTime();//加个时间戳
//     //alert(url);
//     xmlhttp.open("Get",url,true);//打开连接用get方法,URL路径,同步
//     xmlhttp.onreadystatechange = callback;//状态改变时,调用callback方法
//     xmlhttp.send(null);//发送
//以上为get提交方法
           var url = "admin/userValidateServlet.action";
           xmlhttp.open("Post",url,true);
           xmlhttp.onreadystatechange = callback;
           xmlhttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
           xmlhttp.send("name="+name+"&password=123334");
          

     }
    
    
      //xmlhttp.onreadystatechange = callback;
  }
  
  
  function callback(){
  
    if(xmlhttp.readyState==4){//当状态变为4时
        //alert(xmlhttp.status);
        if(xmlhttp.status==200){
            var info = xmlhttp.responseText;//获得server传来的信息。
             document.getElementById("error_info").innerHTML=info;
         }   
            
     }
  // alert("callback");
  }
        
     
3.显示标签<span id="error_info"></span>

4.server端servlet

      response.getWriter().write("用户已存在");
          response.getWriter().flush();

重点注意:如果在一个页面上发起多个ajax的请求,要创建多个XmlHttpRequest 对象,否则会出现多线程的问题


最终显示的结果不用说自然就知道了

 

还有以xml读取 未完待续!!!!

分享到:
评论
1 楼 magicyz 2009-05-25  
请问如何才能从将servlet的处理结果(有可能是一个ArrayList<Object>形式)传给jsp页面??
最近正在做这方面,有很多不解!!
期待您的回答!

相关推荐

    一分钟搞定ajax(pdf版)

    ajax经典教材,不管你是新手,还是老人,看看它吧!一分钟不是吹的

    AJAX+servlet实例入门,搞定AJAX简单易学

    一、AJAX基础 1. **什么是AJAX**:AJAX并不是一种新的编程语言,而是使用现有技术(JavaScript、XML、HTML、CSS等)的新方法。它通过创建XMLHttpRequest对象,实现浏览器与服务器之间的异步通信。 2. **工作原理**:...

    AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX

    AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX AJAX

    Ajax中文手册 API

    AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3. AJAX源代码简要分析上一章节效果的代码原理4....

    AJAX原理 原理 AJAX

    AJAX(Asynchronous JavaScript and XML)是一种异步通信技术,允许Web应用程序异步地从服务器请求数据,而不需要重新加载整个网页。下面我们将深入分析AJAX的原理、技术、意义和发展趋势。 AJAX的背景 AJAX技术的...

    一个完整的ajax应用例子

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。在本示例中,我们看到一个完整的Ajax应用,用于实现一个模拟的注册页面功能,用户输入用户名后,...

    搞定J2EE核心技术与企业应用:Ajax,JSP,Struts2,Spring,Hibernate,完整扫描版

    而本书《搞定J2EE核心技术与企业应用:Ajax,JSP,Struts2,Spring,Hibernate》则是一本针对Java Web开发的专业书籍,它详细介绍了在现代企业级应用开发中常用的技术和框架。 书中首先对Java EE的来源、整体框架和...

    ajax代码 ajax代码

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术可以提升用户体验,因为它...

    js定时器+ajax,间隔10s调用一次

    主要用于消息提醒,利用js页面定时器,定时提交ajax请求,查询最新的消息记录。改了很多次,终于成功了。

    AJAXCache是一款jQuery缓存插件可以为ajax方法扩展缓存功能

    AJAXCache是一款针对jQuery库设计的插件,其主要功能是为$.ajax()方法提供缓存支持。在Web开发中,AJAX(Asynchronous JavaScript and XML)技术被广泛用于实现页面的部分更新,提高用户体验,而缓存机制则进一步...

    AjaxRequest(Ajax使用包)

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

    深入浅出Ajax(Head Rush Ajax) 源码 书中代码

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它的核心是利用JavaScript与服务器进行异步数据交换,通过XML或者JSON格式传输数据,使得用户界面更加动态和...

    自己用的简单封装AJAX类

    **标题解析:** "自己用的简单封装AJAX类" 指的是作者为了个人使用需求,编写了一个简化的AJAX处理类。AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,...

    一个完整的jquery+ajax传送请求的实例

    本文将深入探讨一个完整的jQuery+AJAX传输请求的实例,旨在帮助开发者理解如何有效地使用这两种技术实现异步数据通信。 首先,jQuery是一个强大的JavaScript库,它为DOM操作、事件处理、动画效果和Ajax交互提供了...

    ajax安装包,安装程序ajax

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据并更新部分网页内容,提高了用户体验,使得网页更具交互性和响应性。本...

    Ajax.Net的一个简单示例

    在描述中提到的"无刷新技术",是指Ajax的主要优势之一:通过Ajax请求,用户界面可以在后台进行更新,而用户无需等待整个页面刷新。这可以通过以下步骤实现: 1. **创建ASP.NET页面**:首先,创建一个ASP.NET Web ...

    ajaxpool,ajax管理,ajax池

    Ajax池是一种管理并发Ajax请求的方法,它通过控制并发数量来优化页面性能,防止过多的Ajax请求同时执行,从而避免浏览器资源耗尽引发的假死。在IE浏览器中,由于其处理JavaScript和DOM操作的机制限制,大量的并发...

    Java Ajax分页,jsp ajax分页

    本教程将深入探讨如何使用AJAX、JavaScript以及MySQL数据库来实现这一功能。 首先,我们需要了解AJAX的基本概念。AJAX允许在后台与服务器交换数据并更新部分网页内容,而无需重新加载整个页面。这通过创建...

    jquery+ajax例子

    Ajax(Asynchronous JavaScript and XML)则是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。在这里,我们将深入探讨基于jQuery的Ajax应用,以"jQuery+Ajax例子"为标题,结合项目描述和标签,...

    ajax教程

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新,提高了用户体验,尤其是在数据交互频繁的Web...

Global site tag (gtag.js) - Google Analytics