全栈之路--AJAX篇

最新推荐文章于 2024-08-27 13:40:31 发布

chengyunyi123

最新推荐文章于 2024-08-27 13:40:31 发布

阅读量544

点赞数

分类专栏：全栈之路--AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/chengyunyi123/article/details/55099902

版权

全栈之路--AJAX 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一. AJAX基础

（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应用

（1）无需刷新整个Web页面显示服务器响应的当前时间。下面是ajax_time.jsp:


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Ajax显示当前时间</title>
</head>
<body>
    当前时间：<span id="time"></span> <br/>
    <input id="getTime" type="button" value="获取当前时间" /> <p/>

    <script type="text/javascript">
        //创建AJAX异步对象
        function createAJAX(){
            var ajax = null;
            try {
                ajax = new ActiveXObject("micsorft.xmlhttp");
            } catch (e1){
                try {
                    //如果是非IE浏览器
                    ajax = new XMLHttpRequest();
                } catch (e2){
                    alert("你的浏览器不支持异步对象，请换浏览器试试！");
                }
            }
            return ajax;
        }

    </script>

    <script type="text/javascript">
        document.getElementById("getTime").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,这些是可以触发函数的
            //4-4-4-4-4，这些是不可以触发函数的
            //以下这个函数是服务器来触发的，不是程序员触发的，这和onclick是不一样的
            ajax.onreadystatechange = function () {
                //如果状态码为4的话
                if(ajax.readyState == 4){
                    //如果响应码为200的话
                    if(ajax.status = 200){
                        //5.从AJAX异步对象中获取服务器响应的HTML数据
                        var curTime = ajax.responseText;

                        //6.将结果按照DOM规则，动态添加到web页面指定的标签中
                        var spanElement = document.getElementById("time");
                        spanElement.innerHTML = curTime;
                    }
                }
            }

        }
    </script>

</body>
</html>

接着写Servlet:

public class AjaxTimeServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM--dd HH:mm:ss");
        String curStr = sdf.format(new Date());

        //以流的方式将结果响应到AJAX异步对象中
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = resp.getWriter();
        pw.write(curStr);
        pw.flush();
        pw.close();
    }
}

web.xml中的配置：

<servlet>
        <servlet-name>AjaxTimeServlet</servlet-name>
        <servlet-class>AjaxTimeServlet</servlet-class>
    </servlet>

<servlet-mapping>
        <servlet-name>AjaxTimeServlet</servlet-name>
        <url-pattern>/AjaxTimeServlet</url-pattern>
    </servlet-mapping>

运行结果：
这里写图片描述

2 . 基于HTML，以GET或POST方式，检查注册用户名是否在数据库中已存在

下面是jsp页面：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>检查注册用户名是否在数据库</title>
</head>
<body>

    用户名[POST]: <input id="usernameId" type="text" name="username" maxlength="4" />
    <span id="resID"></span>

    <hr/>

    <script type="text/javascript">
        //创建AJAX异步对象
        function createAJAX(){
            var ajax = null;
            try {
                ajax = new ActiveXObject("microsoft.xmlhttp");
            } catch (e1){
                try {
                    //如果是非IE浏览器
                    ajax = new XMLHttpRequest();
                } catch (e2){
                    alert("你的浏览器不支持异步对象，请换浏览器试试！");
                }
            }
            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 {
                //对汉字进行UTF-8编码
                //username = encodeURI(username);
                //1)创建Ajax对象
                var ajax = createAJAX();
                //2)
                var method = "POST";
                var url = "${pageContext.request.contextPath}/UserServlet?time="+new Date().getTime();
                ajax.open(method,url);

                //设置AJAX请求头
                ajax.setRequestHeader("content-type","application/x-www-form-urlencoded");

                //3)
                var content = "username=" + username;
                ajax.send(content);
                //4)
                ajax.onreadystatechange = function(){
                    if(ajax.readyState == 4){
                        if(ajax.status == 200){
                            //5）
                            var tip = ajax.responseText;
                            //6)
                            //创建img标签
                            var imgElement = document.createElement("img");
                            imgElement.src = tip;
                            imgElement.style.width = "16px";
                            imgElement.style.height = "16px";
                            //定位span标签
                            var spanElement = document.getElementById("resID");
                            //清空span标签中的内容
                            spanElement.innerHTML = "";
                            //将img标签加入到span标签中
                            spanElement.appendChild(imgElement);
                        }
                    }
                }
            }
        }
    </script>

</body>
</html>

下面是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 Administrator on 2017/2/12.
 */
public class UserServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        byte[] buf = username.getBytes("ISO8859-1");
        username = new String(buf,"UTF-8");
        System.out.println("username=" + username);
        String tip = "<font color='green'>You can regist!</font>";
        if("杰克".equals(username)){
            tip = "<font color='red'>User has existed</font>";
        }
        String s = "哈哈";
        System.out.println("----tip----" + tip + s);
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = resp.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");
        String username = req.getParameter("username");
        System.out.println("username=" + username);

        String tip = "images/MsgSent.gif";
        if("Jack".equals(username)){
            tip = "images/MsgError.gif";
        }
        resp.setContentType("text/html;charset=UTF-8");
        PrintWriter pw = resp.getWriter();
        pw.write(tip);
        pw.flush();
        pw.close();
    }
}

注意在验证的过程中，验证对错的两张图片，在自己建的images目录下，浏览器与服务器交互过程中传递的是图片的路径而并不是直接传图片，这个好处就是降低服务器负载，提高加载速度。

chengyunyi123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
全栈之路--AJAX篇

一. AJAX基础（1）什么是同步：请求1->响应1->请求2->响应2-> Web1.0时代（2）什么是异步：请求1->请求2->请求3->响应1->响应2->响应3-> 请求1->响应1->请求2->请求3->响应2->响应3-> Web2.0时代
复制链接

扫一扫

专栏目录