码迷,mamicode.com
首页 > Web开发 > 详细

如何实现服务端客户端异步通信

时间:2016-09-28 16:37:13      阅读:289      评论:0      收藏:0      [点我收藏+]

标签:

AJAX客户端与服务端,可以在[不刷新整个浏览器]的情况下,与服务器进行异步通信的技术。即ajax是一个[局部刷新]的异步通信技术,AJAX技术不是全新的语言,时2005年谷歌公司提出的一种全新的编程模式,不是新的编程语言。

 

传统web应用请求和响应的特点

( 1 )请求:浏览器以 HTTP 协议的方式提交请求到服务器

 

( 2 )响应:服务器以 HTTP 协议的方式响应内容到浏览器

 

注意: HTTP 是 WEB 大众化非安全协议

 

HTTPS 是 WEB 安全协议,是基于 HTTP 协议的,且加了一些加密等特殊功能,常用于在线支付,或者是需要安全性较高的网站中,例如: 12306 网站

 

HTTP 请求有三个部份组成:请求行,请求头,请求体

 

HTTP 响应有三个部份组成:响应行,响应头,响应体

 

( 3 )状态栏:有明显的进度条刷新现象,如果服务器响应较慢的话,进度条刷新也会变慢, IE9 等中高版本浏览器,有明显转圈圈图标

 

( 4 )历史栏:会收集原来已访问过的 web 页面,进行缓存

 

( 5 )缺点:不需变化的大量数据,也全部刷新,造成浏览器加载和处理负担

 

( 6 )可改进的地方:让不需变化的大量数据,原封不动,不用缓存到历史栏中,无需全部刷新,只刷新某些需要变化的数据区域.

 

ajax异步获取时间的实例

 

<%--

  Created by IntelliJ IDEA.

  User: cxspace

  Date: 16-8-16

  Time: 上午8:33

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

    <title>无需刷新整个web页面显示服务器响应时间</title>

</head>

<body>

   当前时间

     <span id = "time"></span> <br>

 

   <input id="buttonID" type="button" value="获取当前时间">

 

   <br>

 

    <script type="text/javascript">

 

        //创建ajax对象

        function createAJAX() {

 

            var ajax = null;

 

            try {

                ajax = new ActiveXObject("microsoft.xmlhttp");

 

            }catch (e1){

 

                try {

                    ajax = new XMLHttpRequest();

                }catch (e2){

 

                    alert("你的浏览器不支持异步对象,请更换浏览器");

                }

 

            }

 

            return ajax;

        }

 

 

    </script>

 

    <script type="text/javascript">

 

        document.getElementById("buttonID").onclick = function () {

/1.创建ajax异步对象

            var ajax = createAJAX();

            //2.准备发送请求

            var method = "GET";

            var url = "${pageContext.request.contextPath}/AjaxTimeServlet?time="+new Date().getTime();

            ajax.open(method,url);

            //3.真正发送请求体数据到服务器,如果请求体中没有内容,null表示

            ajax.send(null);

 

            //==========等待

 

 

            //4.ajax异步对象不断监听服务器的状态0-1-2-3-[4]

            // 一定要状态变化后,才触发function函数

            // 如果状态永远时4-4-4-4-4,不会触发function(){}函数

            ajax.onreadystatechange = function () {

                //如果状态码是4

                if (ajax.readyState == 4){

                    //如果响应码是200

                    if (ajax.status == 200){

                        //5.用ajax异步对象中获取数据

                        var nowStr = ajax.responseText;

                        var spanElement = document.getElementById("time");

                        spanElement.innerHTML = nowStr;

 

                    }

                }

 

            }

 

        }

 

 

    </script>

 

 

</body>

 

</html>

package 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;

import java.text.SimpleDateFormat;

import java.util.Date;

 

/**

 * Created by cxspace on 16-8-16.

 */

 

public class AjaxTimeServlet extends HttpServlet {

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

        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String nowStr = sdf.format(new Date());

 

       // System.out.println("拿到时间");

        //以流的方式响应到ajax异步对象中

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter pw = response.getWriter();

        pw.write(nowStr);

        pw.flush();

        pw.close();

    }

 

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

        doPost(request,response);

    }

}

什么是 AJAX 【 Asynchronous 异步的 JS 和 XML 】,工作原理与特点

 

( 1 )什么是同步:

 

请求 1-> 响应 1-> 请求 2-> 响应 2->

 

Web1.0 时代

 

( 2 )什么是异步:

 

请求 1-> 请求 2-> 请求 3-> 响应 1-> 响应 2-> 响应 3->

 

请求 1-> 响应 1-> 请求 2-> 请求 3-> 响应 2-> 响应 3->

 

Web2.0 时代

 

项目中: Web1.0 为主(整个浏览器刷新), Web2.0 为辅(浏览器局部刷新)

 

( 3 )什么是 AJAX

 

客户端(特指 PC 浏览器)与服务器,可以在【不必刷新整个浏览器】的情况下,与服务器进行异步通讯的技术

 

即, AJAX 是一个【局部刷新】的【异步】通讯技术

 

AJAX 不是全新的语言,是 2005 年 Google 公司推出的一种全新【编程模式】,不是新的编程语言

 

( 4 )不用刷新整个页面便可与服务器通讯的办法有:

 

( A ) Flash/ActionScript

 

( B )框架 Frameset

 

( C ) iFrame (内嵌入框架 )

 

( D ) XMLHttpRequest( 非 IE 浏览器 和 ActiveXObject(IE 浏览器 )

 

背景:早上 IE5 时,微软就开发出了第一个异步通讯对象,叫 ActiveXObject 对象,

 

Firefox 等其它浏览器厂商也慢慢引入异步通讯对象,叫 XMLHttpRequest 对象,

 

IE 的高版本,也将这个异步对象取名叫 XMLHttpRequest 对象,但 IE 有向下兼容问题,

 

也可以使用 ActiveXObject 对象。

 

无需第三方 jar 包,现代中高版本浏览器中内置了这个异步通讯对象,只需通过 JavaScript 就可以创建

 

注意:所有浏览器中都内置了异步对象,在默认情况下,该异步对象并没有创建出来

 

function createAJAX(){

 

var ajax = null;

 

try{

ajax = new ActiveXObject("microsoft.xmlhttp");

 

}catch(e1){

 

ajax = new XMLHttpRequest();

 

}

 

return ajax;

 

}

( 5 ) AJAX 工作原理

( 6 ) AJAX 包含的技术

( 7 ) AJAX 开发步骤

 

步一:创建 AJAX 异步对象,例如: createAJAX()

 

步二:准备发送异步请求,例如: ajax.open(method,url)

 

步三:如果是 POST 请求的话,一定要设置 AJAX 请求头,例如: ajax.setRequestHeader()

 

如果是 GET 请求的话,无需设置设置 AJAX 请求头

 

步四:真正发送请求体中的数据到服务器,例如: ajax.send()

 

步五: AJAX 不断的监听服务端响应的状态变化,例如: ajax.onreadystatechange ,后面写一个无名处理函数

 

步六:在无名处理函数中,获取 AJAX 的数据后,按照 DOM 规则,用 JS 语言来操作 Web 页面

 

( 8 ) AJAX 适合用在什么地方

 

AJAX 【适合】不用来传递大量数据,而只用来【传递少量数据】,在用户的【体验】上,【更加人性化】

 

AJAX 是一个和服务器无关的技术,即服务器可使用: JavaEE , .NET , PHP ,。。。这些技术都可

 

AJAX 只管向服务器发送请求,同时只管接收服务器的 HTML 或 XML 或 JSON 载体响应

 

服务端不能使用转发或重定向到 web 页面,因为这样会起浏览器全面刷新

 

即只能以流的方式响应给浏览器

 

AJAX异步方式实现验证实例(GET方式)

 

<%--

  Created by IntelliJ IDEA.

  User: cxspace

  Date: 16-8-16

  Time: 下午7:15

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>以get方式异步检查数据库中是否已经存在该用户</title>

</head>

<body>

    <form>

        用户名:<input id="usernameID" type="text" name="username"/>

        光标移出后立即检查结果

    </form>

 

    <hr>

 

    <span id="resID"></span>

 

 

 

    <script type="text/javascript">

 

        function createAJAX() {

 

            var ajax = null;

 

            try {

 

                ajax = new ActiveXObject("microsoft.xmlhttp");

 

            }catch (e1){

 

                try {

 

                    ajax = new XMLHttpRequest();

 

                }catch (e2){

 

                    alert("你的浏览器不支持ajax,请更换浏览器")

 

                }

            }

            return ajax;

        }

 

    </script>

 

    <script type="text/javascript">

 

        document.getElementById("usernameID").onblur = function () {

 

            var username = this.value;

 if(username.length == 0){

                document.getElementById("resID").innerHTML = "用户名必填";

            }else {

 

                username = encodeURI(username);

 

               // alert(username)

 

                var ajax = createAJAX();

 

            //    alert("创建ajax ok")

 

                var method = "GET";

 

                var url="${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime()+"&username="+username;

 

                ajax.open(method,url);

 

                ajax.send(null);

 

                ajax.onreadystatechange = function () {

                    if (ajax.readyState == 4){

 

                        if (ajax.status == 200){

 

                            var tip = ajax.responseText;

 

                            document.getElementById("resID").innerHTML = tip;

 

                        }

 

                    }

                }

 

            }

 

        }

 

    </script>

 

</body>

</html>

package 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 cxspace on 16-8-16.

 */

 

public class UserServlet 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 {

 

        request.setCharacterEncoding("utf-8");

 

        String username = request.getParameter("username");

 

        System.out.println(username);

 

        String tip = "<font color=’green’> 可以注册 </front>";

 

        if ("杰克".equals(username)){

            tip = "<font color=’red’> 该用户已经存在 </front>";

        }

 

        response.setContentType("text/html;charset=UTF-8");

 

        PrintWriter pw = response.getWriter();

 

        pw.write(tip);

 

        pw.flush();

 pw.close();

 

    }

}

以POST的方式实现异步验证实例

 

注意点:content中键值对表达式绝对不能有空格

 

<%--

  Created by IntelliJ IDEA.

  User: cxspace

  Date: 16-8-17

  Time: 上午9:37

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>以post方式验证检查注册的用户名是否在数据库中存在</title>

 

    <script type="text/javascript"  src="js/ajax.js"></script>

</head>

<body>

   用户名[POST]: <input id="usernameID" type="text" />

 

   <span id="resID">

 

 

   </span>

 

   <hr/>

 

   <script type="text/javascript">

 

       document.getElementById("usernameID").onblur = function () {

 

           var username = this.value;

 

         //  alert(username);

 

           var ajax = createAJAX();

 

           var method = "POST";

 var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();

 

           ajax.open(method,url);

 

           //设置ajax请求头为post,他会将请求体中的汉字自动进行utf-8的编码

           ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

 

 

           //******键值对中间不能有空格,例如 username = aa; 服务端拿到为null

 

           var content = "username="+ username;

 

           ajax.send(content);

 

           //wait

           ajax.onreadystatechange = function () {

 

               if (ajax.readyState == 4){

 

                   if (ajax.status == 200){

 

                       var tip = ajax.responseText;

 

                       var imgElement = document.("img");

 

                       imgElement.src = tip;

                       imgElement.style.width="12px";

                       imgElement.style.height="12px";

 

                       var spanElement = document.getElementById("resID");

 

                       spanElement.innerHTML = "";

 

                       spanElement.appendChild(imgElement);

 

                   }

 

               }

 

           }

 

       }

</script>

 

</body>

</html>

package servlet;

 

import javax.servlet.ServletException;

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 cxspace on 16-8-16.

 */

 

public class UserServlet extends HttpServlet {

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

 

        request.setCharacterEncoding("UTF-8");

 

        String username = request.getParameter("username");

 

     //   System.out.println(username);

 

        String tip = "images/MsgSent.gif";

 

        if ("杰克".equals(username)){

            tip = "images/MsgError.gif";

        }

 

        System.out.println(tip);

 

        response.setContentType("text/html;charset=UTF-8");

        PrintWriter pw = response.getWriter();

        pw.write(tip);

        pw.flush();

        pw.close();

 

    }

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

 

        request.setCharacterEncoding("utf-8");

 

        String username = request.getParameter("username");

 

        System.out.println(username);

 

        String tip = "<font color=’green’> 可以注册 </front>";

 

        if ("杰克".equals(username)){

            tip = "<font color=’red’> 该用户已经存在 </front>";

        }

 

        response.setContentType("text/html;charset=UTF-8");

 

        PrintWriter pw = response.getWriter();

 

        pw.write(tip);

 

        pw.flush();

 

        pw.close();

 

    }

}

 

文章来源:博客园

如何实现服务端客户端异步通信

标签:

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
jiangjie190
加入时间:2016-02-19
  关注此人  发短消息
文章分类
jiangjie190”关注的人------(0
jiangjie190”的粉丝们------(1
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!