Ajax的简单实现

最新推荐文章于 2020-06-28 22:18:59 发布

kobe_lzq

最新推荐文章于 2020-06-28 22:18:59 发布

阅读量1.1k

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest javascript servlet 框架 asynchronous

本文链接：https://blog.csdn.net/kobe_lzq/article/details/3729245

版权

Ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我们学了JavaWeb已经熟悉了B/S的模式，采用的是同步交互，也正是因为这种同步交互，使Client的响应速度大大降低了，Ajax技术正是解决这一难题的。实现了异步交互，但是我们要注意的是Ajax并不是一门新的技术，而是一些技术的整合。
Ajax是( Asynchronous javascript and xml)的几个单词的整合，意思就是异步的JavaScript and XML，Ajax主要用到的技术就是XMLHttpRequest，其实XMLHttpRequest早在IE5的时候就已经发布应该在1990年左右，但是微软并没有重用，直到2005年
Adaptive Path的Jesse James Garrett最早创造了这个词 Ajax：A New Approach to Web Applications(Ajax:web应用的一种新方法)才得以见天日，但是Ajax正是还是要感谢google把它发扬光大，因为google是用到Ajax最多的网站。下面我们具体说说Ajax与传统的B/S有何不同，传统方式，我们是由Client发送request给Web Server在由Web Server与DB Server进行数据交换，然后再通过HTML+CSS响应给Client。但是到了Ajax他就多了一个环节，就是Ajax代理。也就是现在由Client通过javascript调用Ajax代理，由Ajax代理发送request给Web Server然后后面的环节差不多相同，返回响应的时候是由Web Server通过XML先响应给Ajax代理，然后由Ajax在通过HTML+CSS响应给Client。
   Ajax也有几种框架，但是大概分为两大类，分别为服务器端框架，客户端框架。服务器端框架常用的有两个一个是SAjax意思是Simple Ajax Toolkit意思是简单的Ajax工具库，它的优点是能从javascript函数映射到服务器代理操作，支持多平台，是一个开源框架，还有一个是通过HTML/JS生成，而客户端框架常用的有DOJO和RICO，DOJO提供完整的轻量级窗口组件和“浏览器----服务器”消息映射支持，特点是提供创建自定义javascript窗口组件的框架支持，预制的丰富的窗口类型库，使用XMLHttpRequest机制支持B/S消息映射。支持浏览器中的URL 操纵功能。是一个开源框架。RICO 提供一组组件，来开发丰富因特网应用。RICO是一个支持Ajax架构和用户交互的多用途框架。他的特点是一个XMLHttpRequest response能被一个或多个的DOM对象或javascript对象调用，支持拖拽操作，支持基于Ajax的动画模式。包含基于动作的操作库，是一个开源框架。
   上面写了好多Ajax的简介下面，我们看一个Ajax的简单的实践例子，通过Ajax与Servlet实现的。

JSP页面中我们写的东西
<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>登录界面</title>
</head>
<script language="javascript">
    var XMLHttpReq = null;
    //创建XMLRequest
    function createXMLRequest(){
    //判断浏览器
        if(window.ActiveXObject){

          //判断浏览器是否支持控件,判断成功后，创建XMLHttpRequest给XMLHttpReq
        }else if(window.XMLHttpRequest){

           XMLHttpReq = new XMLHttpRequest();
        }
    }
     //获取传递过来的url
    function sendRequest(url){
      //调用createXMLRequest()函数
       createXMLRequest();
       //调用open方法，有三个参数，分别为，上传方法，传到什么地址， true是否为异步，默认为true
       XMLHttpReq.open("GET",url,true);
       //设置XMLHttpReq响应给哪个函数
       XMLHttpReq.onreadystatechange = processResponse;
       //发送XMLHttpReq请求
       XMLHttpReq.send(null);
    }
    //获取响应
    function processResponse(){
         //判断对象状态，0 未初始化   1 读取中   2已经读取   3交互中   4已完成
        if (XMLHttpReq.readyState==4){
         //判断页面状态 200代表ok 404代表错误
         if(XMLHttpReq.status == 200){
         //获取Servlet中的响应信息，可以为responseText,形式或者responseXML形式
            var res=XMLHttpReq.responseText;
           //窗口显示形式，显示Servlet中的判断信息

                     window.alert(res);

         }
        }

    }

    function user(){
      var name = document.myform.name.value;
      var password = document.myform.pwd.value;
      //获取表单中的用户名与密码，判断用户名与密码是否为空。
      if (name==""){
        window.alert("用户名不能为空");
        return false;
      }else if (password==""){
        window.alert("密码不能为空");
        return false;
      }
      //调用sendRequest函数，传递过去一个url
      sendRequest('login?name='+name+'&pwd='+password);
    }
</script>
<body bgcolor="#00bbcc">
<center>
<form action="login" method="post" name="myform">
<br><br>
<h3>用户名：<input type="text" name="name" value=""></h3>
<h3>密  码：<input type="password" name="pwd" value=""></h3>
<input type="button" value="提交" οnclick="user()">
</form>
</center>
</body>
</html>
我这里在简单叙述下，这里执行过能，当我们点击提交按钮的时候，会触发这个onClick事件，去调用uesr()这个函数，这个函数呢我们里面写的是获取表单中的name与pwd判断是否为空，然后再调用sendRequest()这个函数，把url地址传递过去，这里可能有的朋友不太明白了，那我简单的说下，我们用submit提交的时候，用get方法的时候我们会发现url地址中就出现过类似的信息，现在大家是不是有点印象了，post与get方法的一个区别就是get方法上传的时候url中会出现上传的相应信息，这里？后面就是携带的参数。调用到了。sendRequest()以后我们又调用createXMLHttpRequest()这个函数，这个就是创建一个XMLHttpRequest对象。然后又回到sendRequest()方法剩下的看看里面的注解就可以明白了。

下面我们在看看Servlet中的写法，Servlet我们都熟悉，里面有初始化方法，有服务，有销毁，这里面我们只写了两个方法一个get方法一个post方法，post方法指向get方法。下面我们具体看看Servlet中写法
package login;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class LoginAction extends HttpServlet{


    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

           request.setCharacterEncoding("gb2312");

           String name = request.getParameter("name");
           String pwd = request.getParameter("pwd");

            response.setContentType("text/xml; charset=gb2312");//指定响应形式
            response.setHeader("Cache-Control", "no-cache"); //示请求或响应消息不能缓存

            PrintWriter out = response.getWriter();

            if(name.equals("kobe") && pwd.equals("1230123")){
                out.println("热烈的欢迎您!");
            }else{
                out.println("对不起,登录失败！");
            }
                out.close();
    }


    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        this.doGet(request, response);
    }

}

kobe_lzq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Ajax的简单实现

我们学了JavaWeb已经熟悉了B/S的模式，采用的是同步交互，也正是因为这种同步交互，使Client的响应速度大大降低了，Ajax技术正是解决这一难题的。实现了异步交互，但是我们要注意的是Ajax并不是一门新的技术，而是一些技术的整合。Ajax是( Asynchronous javascript and xml)的几个单词的整合，意思就是异步的JavaScript and XML
复制链接

扫一扫