ajax学习第一天——基于jquery的简单应用

最新推荐文章于 2022-10-29 21:54:14 发布

danny1991

最新推荐文章于 2022-10-29 21:54:14 发布

阅读量655

点赞数

分类专栏： ajax学习之路

本文链接：https://blog.youkuaiyun.com/danny1991/article/details/50807427

版权

ajax学习之路专栏收录该内容

1 篇文章

订阅专栏

1、走进AJAX

Asynchronous

JavaScript

And

XML

使用XHTML和CSS的基于标准的表示技术
使用DOM进行动态显示和交互
使用XML和XSLT进行数据交换和处理
使用XMLHttpRequest进行异步数据检索
使用Javascript将以上技术融合在一起

(1)改善表单验证方式，不再需要打开新页面，也不再需要将整个页面数据提交
(2)不需刷新页面就可改变页面内容，减少用户等待时间。
(3) 按需获取数据，每次只从服务器端获取需要的数据。
(4)读取外部数据，进行数据处理整合。
(5)异步与服务器进行交互，在交互过程中用户无需等待，仍可继续操作

2、AJAX思维方式

传统请求方式：

AJAX方式：

我们就通过用户名校验这个简单的例子来看看传统Web应用和AJAX应用开发思维的不同之处。

需求：
这个最简单的例子需求如下：用户在页面的文本框中输入想注册的用户名，然后点击校验按钮，如果输入的用户名为“wangxingkui”，则提示用户名已经存在，请重新输入，否则提示用户名尚未存在，可以使用此用户名进行注册。

问题分析(传统方式)：
对于校验用户名的需求，我们需要一个html页面和一个servlet程序。Html页面中包含文本框和提交按钮，他们位于一个form表单中，这个表单将请求提交给servlet程序，servlet程序判断当前的用户名是否是“wangxingkui”，并给出相应的提示，同时servlet中还生成一个链接，用于返回html页面。

从这个例子我们可以看到，传统Web开发思维模式的一个特点是通过form表单提交请求信息，然后转向一个新的页面处理请求，并显示服务器端返回的信息。

你可以尝试运行一下这些代码，你会发现作为用户的你经历了：

在浏览器中输入用户名->点击按钮提交用户名给Servlet->浏览器转向Servlet的页面->等待Servlet处理->Servlet返回响应信息->浏览器中看到Servlet页面的响应信息，当然这其中有几个过程可能时间短暂到你没有注意，但这些过程是确实存在。

AJAX方式：

对于校验用户名的需求，我们需要一个html页面和一个servlet程序。

Html页面中包含文本框和校验按钮，点击提交按钮以后，我需要通过javascript获取文本框中的数据，然后通过XMLHttprequest发送数据给servlet，此外还需要准备用于接收响应的javascript函数，接收到servlet的提示信息后，我需要将这些信息动态的写在页面上。servlet程序判断当前的用户名是否是“wangxingkui”，并给出相应的提示。

注意，AJAX模式下问题分析的方式已经发生了变化：

servlet不需要返回html页面的链接了，因为我们不需要跳转到servlet表示的页面中，我们只需要获得servlet页面产生的结果

html页面中我不用表单提交数据了，我的数据通过javascript来获取，然后通过一个叫做XMLHttprequest的对象发送给servlet。而且我没有做页面跳转

我需要一个接收servlet响应信息的javascript函数，我没有进入servelt代表的页面查看响应信息，而是把servlet的响应信息接收回来，再显示在我当前的页面上。

当你运行上面的程序，你会发现从用户的角度来看，与传统Web应用模式的流程相比，AJAX应用模式的流程是不同的。

AJAX应用的流程是：

在浏览器中输入数据->点击按钮提交请求->用户可以继续做其他事情；Servlet在处理数据，并发回数据->浏览器收到响应->浏览器中的当前页面显示响应结果，这其中仍然有些过程由于时间短暂使你忽略了它的错在，但实际上这些过程都是存在的。

两个流程的对比让我们看到的显而易见的

差别：

AJAX应用中没有向新页面跳转
用户不需要处于无事可做的等待中。

3、注册实例的实现：

注册用户名是否有效：

html文件：

<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016-3-5
  Time: 10:52
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title></title>
    <script type="text/javascript" src="jslib/jquery-2.2.1.js"></script>
    <script type="text/javascript" src="jslib/verify.js"></script>
  </head>

  <body>
    请输出用户名：<br/>
    <input type="text" id="username"/><span id="result"></span><br/>
    <input type="button" value="检测" οnclick="verify()"/>
  </body>
</html>

最初版本的js：

/**
 * 最初版本
 */
function verify(){
    //1、获得文本框内容
    //document.getElementById("username); dom的方式
    //Jquery的查找节点的方式，参数中#加上id属性值可以找到一个节点。
    //jquery的方法返回的都是jquery的对象，可以继续在上面执行其他的jquery方法
    var jqueryObj = $("#username");
    //获取节点的值
    var username = jqueryObj.val();

    //2、将文本框中的数据发送给服务器端的servlet
    //使用jquery的XMLHTTPrequest对象get请求的封装
    $.get("AjaxServletDemo1?username=" + username,null,callback);

}

//回调函数
function callback(data){
    //3、接收服务器返回端的数据
    //4、强服务器端返回的数据动态的显示在页面上
    //找到保存结果信息的节点
    var jqueryObj = $("#result");
    //动态的改变页面中span节点中的内容
    jqueryObj.html(data);
}

servlet的文件：

package seu.xinci.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

/**
 * Created by Administrator on 2016-3-5.
 */
@WebServlet(name = "AjaxServletDemo1", urlPatterns = {"/AjaxServletDemo1"})
public class AjaxServletDemo1 extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        if (username == null || username.trim().equals("")){
            out.write("用户名不能为空");
        }else {
            if (username.equals("aaa")){
                out.write("该用户已存在，不能进行注册");
            }else {
                out.write("该用户名可以注册");
            }
        }
    }
}

简化后的js：

/**
 * 简化版本
 */
function verify(){
    $.get("AjaxServletDemo1",{username:$("#username").val()}, function (data) {
        $("#result").html(data)
    });
}

减少代码量，提高运行效率。。。缺点是不利于调试！