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

Ajax学习笔记01-简单实现数据异步交互

阅读更多
Ajax的简单实现:
①.Demo-1:以简单数据段的形式返回给前台页面:

页面代码:index.html
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="js/verify.js"></script>
    <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    <script type="text/javascript">
        
    </script>
    <title>用户名验证</title>
</head>
<body>

     用户名校验ajax实例,请输入用户名:<br/>
     <!--
     <form action="AjaxServer" method="post">
         用户名:<input type="text" name="name"/>
         <input type="submit" value="检验"/>
     </form>
     -->
  <!--ajax可以不需要使用表单来进行数据提交,因此不用写表单标签 -->
     <!--ajax方式不需要name属性,需要一个id的属性-->
       用户名:<input type="text" id="userName"/>
              <input type="button" value="检验一下" onclick="verify()"/>
     <!--这个div用于存放服务器端返回的信息开始为空,id属性利用dom的方式找到某个节点-->
             <div id="result"></div>
</body>
</html>
 



后台servlet代码:
1. AjaxServer---以out.println()的形式往前台输出数据段,并不是刷新页面
Import…
    
/**
 * Created by IntelliJ IDEA.
 * User: 赵光鹏
 * Date: 2011-11-16
 * Time: 15:35:55
 * Alt+enter 导入包修复的功能
 * To change this template use File | Settings | File Templates.
 */
public class AjaxServer extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
        //解决乱码问题,一定要在获取getWriter对象之前
        httpServletResponse.setCharacterEncoding("utf-8");
        httpServletResponse.setContentType("text/html;charset-utf-8");
        PrintWriter out = httpServletResponse.getWriter();
        //1.取页面端传过来的页面信息
         String old =  httpServletRequest.getParameter("name");  //name是从js中定义的url中参数获取的
        // String name = new String(old.getBytes("iso8859-1"),"utf-8");
        String name = URLDecoder.decode(old,"UTF-8");
        System.out.println("转换编码前"+old);
         System.out.println("转换编码前"+old);
        //2.检查参数是否有问题
         if(name==null||name.length()==0){
             out.println("用户名不能为空");
         }else{
          //3.  校验操作
             if(name.equals("guangpeng")){
          //4 .和传统应用不同,这一步是将用户感兴趣的数据返回给页面段,而不是将新的页面传递给用户
                 out.println("欢迎您"+name+"!");
             } else{
                 out.println(name+"--11用户尚未注册,请先注册!");
             }
         }

    }

    @Override
    protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
       doGet(httpServletRequest, httpServletResponse);
    }
}


Js文件代码:
①. 利用Jquery简单实现ajax与后台服务器的交互:

//定义用户名校验的方法
function verify(){
   // var url =  "AjaxServer?name="+encodeURI(encodeURI($("#userName").val()));
     /*
     * jquery链式编程
     * var userName = $("#userName").val();
     * */
       //jquery返回都是jquery对象,可以继续在上面执行其他的方法
       var jqueryObj = $("#userName");
       //获取节点的值
       var userName =  jqueryObj.val();
       // alert(userName);
    //2.将文本框中的数据发送给服务器段的servlet
     //使用jquery的XMLHTTPrequest对象请求的封装
       $.get("AjaxServer?name="+userName,null,callback);

    //
}



//回调函数,是数据异步交互的一个体现
function callback(data){
    //3.  接收服务器端返回的数据
     //  alert("服务器的数据回来了!!!");
       //alert(data);
         $("#result").html(data);
    //4.将服务器返回的数据动态的显示在网页上面

}

Demo1可以实现数据以字符串的形式与服务器进行数据交互,其实js文件也去掉注释,利用jquery链式编程的思想,也可以简单的写为:verity1.js

function verify(){
    var userName = $("#userName").val();
    $.get("AjaxServer?name="+userName,null,function(data){
        $("#result").html(data);

    });
}


Demo2:使用XmlHttpRequest对象进行ajax异步数据交互
使用XmlHttpRequest对象进行ajax异步数据交互:html页面和servlet是相同的,只是在页面中更新引入的js文件就可以:


//这个方法将使用XmlHttpRequest对象进行ajax异步数据交互
  
var xmlhttp;
function verify(){
    //var xmlhttp;
    //使用dom的方式获取文本框中的值
    var userName = document.getElementById("userName").value;
    if(window.XMLHttpRequest){
    //针对firefox,mozillor opera safari ie7.8
        xmlhttp = new XMLHttpRequest();
    //修正某些浏览器bug的代码,能正确的返回xml格式的数据
        if(xmlhttp.overrideMimeType){
            xmlhttp. overrideMimeType("text/xml");
        }
    }else if(window.ActiveXObject){
     //针对ie6,5
     //两个可以用于创建XMLHttpRequest对象的控件名称,保存在一个js中
    //排在前面的版本较新 ,控件版本不一样,要尝试性的去创建
        var activeNeme = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for(var i=0; i<activeNeme.length; i++){
            try{
            xmlhttp = new ActiveXObject(activeNeme[i]);
            break;
                }catch(e){

            }
        }

    }
    if(!xmlhttp){
        alert("XMLHttpRequest对象创建失败");
    }else{
        alert(xmlhttp);
    }

    //2.回调函数的注册
    //只是需要函数名,不要加括号,如果加上括号,会把函数的返回值注册上
    xmlhttp.onreadystatechange = callback;//这里写的是函数名

    //3.设置连接信息  Get方式实现
    //第一个参数表示http的请求方式,支持所有的http的请求方式,主要使用get和post
    //第二个参数表示请求的url地址,get参数也在url中
    //第三个参数表示采用异步还是同步方式交互,true表示异步
   // xmlhttp.open("GET","AjaxServer?name="+userName, true);
    //4.发送数据,开始和服务器进行交互
    //   同步方式下,send这句话会在服务器端数据回来后才执行
    //异步方式下,send这句话会立即完成执行
    //xmlhttp.send(null);


    //post方式请求的的代码
     xmlhttp.open("POST","AjaxServer", true);
    //自己设置http请求头
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    //post方式发送数据
    xmlhttp.send("name="+userName);


}


//回调函数
function callback(){
    //5.接收响应数据
  //判断对象的状态是交互完成 4表示交互完成 ,XMLHttpRequest共有五种状态0-4
    if(xmlhttp.readyState == 4){
        //判断http的交互是否成功
        if(xmlhttp.status == 200){
         //获取服务器端返回的数据
         //获取服务器端输出的纯文本数据
          var responseText = xmlhttp.responseText;
          //将数据显示在页面上
            var divNode = document.getElementById("result");
            divNode.innerHTML = responseText;
        }
    }
}
 


从js的角度来了解ajax数据交互原理。

1
0
分享到:
评论

相关推荐

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax技术通过异步通信极大地提升了网页的交互体验,降低了服务器负载,并优化了资源使用。随着Web技术的不断发展,如今的Ajax已经不再局限于XML,而是广泛使用JSON,同时结合各种前端框架,使得开发更加高效便捷。...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个javascript框架,...

    Ajax学习笔记个人总结

    ### Ajax学习笔记个人总结 #### 一、XMLHttpRequest对象简介 **XMLHttpRequest** 对象是 AJAX 技术的核心,它负责在客户端与服务器之间发送异步请求,无需刷新整个页面即可实现局部数据更新。要使用 ...

    Ajax 学习笔记,超详细的噢!不看后悔

    在这份超详细的Ajax学习笔记中,我们将深入探讨以下几个关键知识点: 1. **基础概念**:Ajax的核心是JavaScript对象XMLHttpRequest,它使得前端和后端能够进行异步通信。异步意味着用户在等待服务器响应时可以执行...

    AJAX异步通信技术学习笔记

    AJAX的工作原理在于它在用户和服务器之间添加了一个中间层,实现了用户请求与服务器响应之间的异步交互。具体来说,AJAX技术允许在不刷新整个网页的情况下获取或发送数据到服务器。这一特性使得AJAX成为了Web2.0时代...

    jquery学习笔记--1

    **jQuery学习笔记--1** jQuery是一个轻量级的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计以及...通过掌握上述知识点,你将能够自如地运用jQuery进行网页动态效果的实现和数据的异步交互。

    JavaScript高级程序设计2,学习笔记---第一篇

    这篇学习笔记将带你探索JavaScript的核心概念,包括变量、数据类型、控制流、函数、对象和类等,这些都是构建复杂应用程序的基础。 首先,我们要了解JavaScript的基础语法。在JavaScript中,变量是存储数据的容器,...

    C#学习笔记--关于C#学习的笔记

    【C#学习笔记--关于C#学习的笔记】 在学习C#编程语言的过程中,数据库连接是必不可少的一部分。这里我们讨论如何连接到SQLExpress版本的数据库。在C#中,使用SqlConnection对象来创建数据库连接,例如: ```csharp...

    林信良学习笔记之-AjaxGossip

    林信良的学习笔记《AjaxGossip》深入浅出地介绍了Ajax的核心概念和技术细节,对于初学者来说是一份非常实用的教程。 **Ajax基础** 1. **XMLHttpRequest对象**:Ajax的核心是XMLHttpRequest对象,它允许JavaScript...

    ajax学习笔记代码

    **Ajax学习笔记代码详解** Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这种技术的...

    ajax学习笔记资料

    - **异步通信**:Ajax的最大特点在于其异步性,即浏览器在发送请求后不会等待服务器的响应,而是继续执行其他任务,直到服务器返回数据时才进行处理。 - **JavaScript**:Ajax技术的核心是JavaScript,通过...

    16ajax学习笔记1

    在本篇16ajax学习笔记1中,我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求: Ajax的首要任务是创建XMLHttpRequest对象,这是浏览器提供的API。在JavaScript中,我们可以通过new ...

    AJAX学习笔记1

    **标题:“AJAX学习笔记1”** 在Web开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。AJAX的核心是利用...

    ajax学习笔记

    使用Ajax,可以实现在后台处理数据,然后仅更新必要的页面元素,显著减少了用户的等待时间,提高了页面的响应速度。 Ajax技术的实现涉及多个技术的结合,包括JavaScript、XMLHttpRequest、XML、CSS和HTML。首先,...

    AJAX高级的应用--DWR框架使用的学习笔记

    DWR (Direct Web Remoting) 是一个强大的AJAX框架,它允许JavaScript与Java在浏览器和服务器之间进行直接通信,实现了异步数据交换,从而提供了丰富的用户体验。DWR使得开发者能够轻松地在客户端使用JavaScript调用...

    AJAX应用笔记(1)

    本笔记将探讨AJAX的基本原理和实现方式,通过分析`index.jsp`和`easy.jsp`两个文件,来展示一个简单的AJAX应用。 1. **AJAX 基本概念** - **异步性**:AJAX的核心特性是异步处理,即在后台与服务器通信,不会阻塞...

    ajax-day01.rar_达内开发学习笔记

    综上所述,“ajax-day01”的学习笔记应该涵盖了Ajax的基本概念、XMLHttpRequest的使用、数据格式的选择、DOM操作、以及一些实践示例。通过深入学习这些内容,开发者可以开始构建自己的异步Web应用,提升用户体验。

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    Ajax学习笔记.zip

    Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript在后台与服务器进行通信,实现了异步数据交换。 在Ajax中,主要涉及以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的基础,它创建了一个...

Global site tag (gtag.js) - Google Analytics