web基础---->script标签的特殊使用
今天要讲的就是怎样使用<script>去请求一个servlet，加载一些js资源以及额外的逻辑处理：
目录：
JS的引入方式
首先我们说一下，一般js引入到jsp或者html的几种方式：
- 直接document.write 但这样会把当前的页面全覆写掉
document.write("<script src='test.js'><\/script>");
- 动态改变已有script的src属性，这种方式根据js的id属性：例如有<script src='' id="s1"></script>，则以下方式，就引入了test.js
s1.src="test.js"
- 动态创建script元素 :
var head= document.getElementsByTagName('HEAD').item(0);
var script = document.createElement("script");
script.type = "text/javascript";
script.src="test.js";
head.appendChild(script);
- 通过ajax的请求去加载，原理其实与上述的动态创建script元素很相似
function ajaxPage(sId, url){
var oXmlHttp = GetHttpRequest() ;
oXmlHttp.onreadystatechange = function() {
if (oXmlHttp.readyState == 4)
{
includeJS( sId, url, oXmlHttp.responseText );
}
}
oXmlHttp.open('GET', url, false);//同步操作
oXmlHttp.send(null);
}
function includeJS(sId, fileUrl, source) {
if ( ( source != null ) && ( !document.getElementById( sId ) ) ){
var oHead = document.getElementsByTagName('HEAD').item(0);
var oScript = document.createElement( "script" );
oScript.type = "text/javascript";
oScript.id = sId;
oScript.text = source;
oHead.appendChild(oScript );
}
}
- 最后一种比较常用，直接在<head>中定义js
function GetHttpRequest() {
alert("huhx");
}
<script>中Servlet的引入
好了，进入我们今天的正题，让我们一起学习条在scirpt中引入servlet，并加载js的：我们创建一个web项目
一、 创建一个Servlet，命名为：JsServlet.java
package com.tomhu.servlet; import java.io.ByteArrayOutputStream;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStream; import javax.servlet.ServletException;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class JsServlet extends HttpServlet {
private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.setContentType("application/x-javascript");
byte abyte0[] = new byte[512];
ByteArrayOutputStream bytearrayoutputstream = new ByteArrayOutputStream();
String path = getServletContext().getRealPath("js/ajax.js");
InputStream inputStream = new FileInputStream(path);
do {
int i = inputStream.read(abyte0);
if (i < 0)
break;
bytearrayoutputstream.write(abyte0, 0, i);
} while (true);
byte abyte1[] = bytearrayoutputstream.toByteArray();
ServletOutputStream httpservletresponse = response.getOutputStream();
response.setContentLength(abyte1.length);
httpservletresponse.write(abyte1);
inputStream.close();
httpservletresponse.flush();
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doGet(request, response);
}
}
- 注意到：response.setContentType("application/x-javascript");
- 得到ajax.js的文件，然后通过流的方式返回到页面
二、 ajax.js的位置以及内容：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAK4AAAB2CAIAAADeAz/7AAAKnElEQVR4nO2d/28T5x3H/Xfsx/2AprFpY0AJLmRVOlip0oR1mgTSxLROuq1SJWBJSMEBj3w1KRmXhJBNAYFCCQFSSjNwVViGpiSFpVBRBGyKA/lCikNih2BC/NhJdfvhHt89z3PPnc/2mfM5n5dOyGff2RbP657n8T3vPI9LcioB0e0S/HZ/izzCZcm7LIQfD7XtGGgsGWgsGWrbsRB+bPJEv+AiyzMgul1uMaCzS6OnQkB0u1R0TwdYrFHh342l0VDgu+jMd9GZ5xO3bxzdYfZMv0CUllyK6j71IouRCsrzjGqpsOxqHVMqXL9+3efz6b26EBrtr1v3ZNDz7G79i7u1c7e8T/5Z8U3Hb75qLf6qtfjOyd/F5kO6b01d+H7BJQiCUgAB0W1wUZtSQfILoIJJkqvQ19e3cuXKFStW6B3wZdPmqTsdcw/PR0Z7IqM9kUcX5gLnnwXOPR+99Hz0UujB6aG2d/Xfnvgf9wsuwa/uay5vusqXX1afJwSiHhM2qQfTdYX2eeKZZdPEJFFB9mDbtm0GKlw7sBo99Rts1w6sNvgIpejwBazUBeoFTTYUyuFya5IoUbUlIPsKZDH6BabtIUqd9zzUCgSKB9u3bzdQ4XPPKjR5Qd5ejp4JfL576PjW/uai/uaifrGoXyz6l2/9QMuWgZYtAy1vc87HZa8ogB+o5U9etGoJM0VFKaIWMlmtUNd34jC950EFBdIDYxV6K3+Cxk6hsVOz3xwZPLbl6dfNKPgZCvaiYC+a+geauoymrqCn/tn/dfYdeoP3BomGIVEknH1OLZ1cBUoGTpG7xYD+86CCgs/nW0FQX1+vd+TFsh+jkbbwrbrrTUXhO0fQeCca70Tjp9HEx2jiDJroQo/Phu8evdq4KTT6Nfcd5O4iVUuz++TlTTQEZKeAV7ETnQVNQ5DkeVAhdc7t+lHohuea7+ehoWoUaEWBVhQ4ikba0MgxNNKOHv4tdKvBX1c08+i27lv4Bbojx+6THQCqeyhoeo282oKoGUx2G4nPhG6jec588MMr3nUzgxXofg26X4vu16EH9ehBA3rgQ/89ND2473LtL6Yf6nsA5AYWqHD706bTH6w8X77qwp41PR++9snegot7Cy7uLfhkb8GV2l/+p8vz8lkw808Bso01dxuBPABUADCgAoABFQAMqABgQAUAAyoAGFABwDhWBcOwG5AGNquQdigSVLAcm1VIPxQJWE12VchiKBKwmiyqkN1QJDEWzRnBBlInWypkPRS5fINn2SIrKryKUCQdYVxGCZOsYb0KrygUyVYG7J/TAKlivQqvKBRJNBAi5y8ggJSx88dkRqFI+k9poNeYOXaqkFEoEqoAq7FThUxCkXCz0XKcOgYBjYHlOFUFwHJABQADKgAYUAHAgAoABlQAMA5Wobfxp9zN7u/lVByswqe+VbH4ErPd630/HRvSvmOVR7e6HKxCT8PPorElFFuKxpaUB8N9VffTsAFUyDUVBgcH5+fnTR7cXb/6xcLii4XFH7x3TN6isaWxm77hvqp7ve+fqzOaCwzQklsqdHV1dXd3h0KmIo0f16xRVPg2FJNVULYztWuy/W3zjJxTYXp6uqOjY3JyMunBJ6vXvlhYDEfiigqyGfJ2qnqt7pnaMCQ72SP1KjuHD5uYyZOIZc6pIElSKBQSRXF4eNj44OPetUrrIKsQjsRlD8KR+HHvazrnBUSBmD6WDUjyXlVm69LOFZdHEctcVEGSpGAwePDgwdnZWYOD2/evU1oHWQVlC0fix6rWGZzLXsF0QfKub50EZR5FLHNRhXA4bKZWaPEUkH1G0olwJN7qWc8/LSC6XZoJ+eg5YnnT9SVVgXh3ZwqRcyrMzMyY7Cv8tXK9XPbKRgrRVKmjAlHJq50AcnZh7auJp9VfjsqjPIpY5pwK5n9B+Pa8znhAPji053Wd89Tq3y0Impae8yoxyWdCD60Kzo9Y5pYKKd1XqCvbIJf9xEyU7CvIu7XlG1L44LSvZKdWARxyS4WUOLh7w6OpKHf7NhSr3p2CCnCzUXK0Ct5dG6t2FlbtKqzaVegh/q3aWVi1s9C7a6Opd8HVeupXdton5ioOVgGwFlABwIAKAAZUADCgAoABFQAMqABgQAUA49h5G3XHAP2Cix4yoNeF0qxUqFkuSv+mkfJ2xEKX9BegVyFTccIdyayoYH4oIYN5GwOi2+V2s0sV02t/GYwQ8FYoDohut9t4TIEZuRQEOszi5AXpsqKCyQHGzOZtDIhulyBq4wJuUTRTHhwV5CUmjVexZlXw06MQoAKDyYiiJYtZUxkzecdUeWhLXG8RUvY0WgVeriHJR+co2VJBMhFRzGwxa2IlYWaxUb0GmyoZjQrUIqS6LnBUIGXQ+WgndBWyqYKULKKY2WLWVAaNyqCmVSuQ5U88VnqZWk00KWmqjoJaQZIk0xHFzBazpvNDZA8hHRW0Pyz45+mokJBBABVoTEYUM1vMml2G3EXupaoC++cN7D75Al+FFH685Ch2/oLIbDFrzTLkZDiZf1+B+dmnlpS25LkuaO8r0IfoxqUdgZ33FWAx65zCqfM2ApYDYxAABlQAMKACgAEVAAyoAGBABQADKgAYUAHAgAoAxqnZRmaMgPmL5sQuJ9soMaOQOlGC/I4xcnFstpHKl7BFlXiRPybERBMMxi7zNcbIxbHZRqoe8AsuQRDIIIk6T46xCsbD2PkaY+Ti+GyjJOEBZzpfxj4iMcgcJDksX2KMXJybbaSm0sLlpATatLNq0tEWM017HscYuTg326iUPdkcMPNsJm8giM7CMooxcnFutlFSGwYik0rtm1FBP9+cxzFGLs7NNkpSortIXeLUfkq1gsFh+RZj5OLcbKMkSbhSZ+Kq/Bl66Zo/abI5v2OMXCDbCGAg2whgYAwCwIAKAAZUADCgAoABFQAMqABgQAUAY78Kl8WN3M3u77XsyAkVuEtLJ7EhpUU5DKdXsuxTHI79Klw6UohiS8wmLy1tZAOoYDX2q9Bz+I0FtMhsYzePDPdV3ev9U89h7vB0iqStwnLCfhXONhZFXi5KXm+0rGLm938cK9lOrid89qMiCz4DVDCB/Sp0+t6ce7k4N8/fOn1v8k9TR4YTk3KxeTJ6LJpOKJDPMYFFTTBBG44jg5NOX1JQxX4VTtRtCkfi3V/cab9wo6r96h9qesKR+K8qTocj8XAkfqJuE/80SgWydJR8I71yLGdORsamVJeclt0gA5POlsF+FdqrN0/PxfS29urN/NM05Zh4ljcjKzmlIw09P6PBOsPaAxg7HB9gsV+FZu9bT2Zjktcb/XNFcDZW0/LZuzs7vl9cF5yNBWdjzd63+KelrYJukNFYBXWfbFhABSs5vP/tyVBMb2vaz8s6S8lUoOprMnzGNBzU3zSozYvyiGggNEtOk30MeseZ2K9Cw77i8Wl0+e6Jkzdb/3K19rfnywr+/t73Pvr1+DQan0YN+4r5pyVRge4dikwPgeropbvkdOKv5/Kk15gDKtRUvjP6FD2a4m81le/Y+eWMan3HtwgM9qtwoKJkJBjV27zlJTZ+N8ObjaCC1XjKtnrKt3rKS/eVlcoPEo9LPWVbPWWl9nyt5EtOgwpAngIqABhQAcCACgAGVAAw/wcJxDoL4EiWjwAAAABJRU5ErkJggg==" alt="" />
//javascript
function test() {
alert("hello world.");
}
三、 为了看到结果，我们定义在index.jsp中写入了以下内容：
<script type="text/javascript" src="servlet/JsServlet">
......
<button onclick="test()">Button1</button>
四、 点击按钮，出现Hello World的弹窗，ajax.js中的test方法得到执行：
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOsAAACMCAIAAAASmclgAAAEy0lEQVR4nO3cT08TaQDH8efl1NBk3sAI6KFyk4akFzNvwLPijTlPYjAm/gmJCRF4ATOJEjASjcBJK6ADmm24boK7Zi3oATl0D+20M2VYd9ep9Dfz/WQOnWf+pvkyPCUppgUoM+d9A8BPoWBoo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo2Boo+CW7xjLC//brqFnGccf7H1FzrjWr7yFYUbBFKyNgilYGwVTsDYKbmfpe5Yxxph4zL5jTHIwveDefqd/FOI7+o6Jv+68TDvad4zleU57KH6KMLrNNgqm4FYnoU48vchCz+oG1W0opeB4lsmV7rHdc1tW7KjohGlH+04sz/RrhZ5Fwa0WBbf6ZhHRSt/DrpP46YL7piApv9qjhH3H8sJOubGAU49OjJ9xLWYRbRR8dsGn+/g/BXcS9p3oZ8DxQ8/qPlQp+CdRcHrBrdCz4vPSvuL+/Syic5TVm0vEVv5hFpFScGLi0JtoJO60eCj4jIJb8c9YsWxOf5KLTzjSH4q+k/yU1v8oPXV0esHJW/LiYVMwIIqCoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2Coc38Digzh4AyCoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2CoY2Ch52j1/s1u48s90gN0vtzrPHL3azen8oeKjNr4Vj915VXjcnPp7kZqm8bo7dezW/FmbyFlHwUJuaXa28aV7fPz7vG8nS9f3jypvm1OxqJmej4KFmu8HEh5PzvovsTXw4sd0gk1NR8FBrF9zMHQouinbBX3KHgouCgn+Igoea7QZX9r7/lTtX9r5TcCG0C/48CJtu2XTVlnoblmqm7G72VpJbs0HBRTGggjfdsoll+nmpFlvtFbzpluN7ZYiCi8J2g8re8Z8ZW6yZsruRGNpwy9FYtHWxZkxtMetrt1X2jim4EGw3qOwe/5GthZoZmVnvG1yfGTG1he7mhZmRlJ0yU9ml4GKw3eDyzrf9bM1VzYVbK2eOzlWNMSZtl+xc3vlGwYXw6wpeuXXBVOd6m+eqg4yYgovCdoNL218bGXs4aUrTy4mh5elSNBZtXZ4uGTP5MOuLNxqNRuPS9lcKLoR2wb9l7enNkjGlm0+j9QeTsdUHk93XifEsUXBR2G4wvn30cRDuX+39OdhcvZ/YULrxpLPy5Eapb3MmxrePKLgQBljwuaLgorDdYHzraC93xrcouBhsNxh7exjmztjbQwouBAr+IQoeau2C3+UOBReF7Qaj9eZO7ozWmxRcCFOzq6PrB9fqn7Zy5Fr90+j6Ad/0LIT5tdC++/LixsHF+pf8LBsH9t2XfNu+KB49f1+9vXLu/6Ykw6V6e+XR8/dZvT8UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG0UDG1/AxJXrSWt4Uw+AAAAAElFTkSuQmCC" alt="" />
五、 既然script标签能引入Servlet，那么css的link标签呢？
动态引入JS的好处
友情链接
欢迎大家留言补充！
web基础---->script标签的特殊使用的更多相关文章
- 2017-2018-2 20155228 《网络对抗技术》 实验八：Web基础
2017-2018-2 20155228 <网络对抗技术> 实验八:Web基础 1. 实践内容 1.1 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET ...
- 20155208徐子涵 《网络对抗技术》Web基础
20155208徐子涵 <网络对抗技术>Web基础 实验要求 Web前端HTML Web前端javascipt Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密 ...
- HTML5 script 标签的 crossorigin 和integrity属性的作用
Bootstrap 4 依赖的基础库中出现了两个新的属性 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.m ...
- 20155312 张竞予 Exp 8 Web基础
Exp 8 Web基础 目录 基础问题回答 (1)什么是表单 (2)浏览器可以解析运行什么语言. (3)WebServer支持哪些动态语言 实践过程记录 1.Web前端:HTML 2.Web前端jav ...
- Exp 8 Web基础
Exp 8 Web基础 20154305 齐帅 一.实践要求: (1).Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. ...
- 20155205 郝博雅 Exp 8 Web基础
20155205 郝博雅 Exp 8 Web基础 一.实验目标 (1).Web前端HTML(0.5分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单 ...
- Web基础学习---HTML 第一天
Web基础学习---HTML 第一天 1 HTML标签 2.CSS Web开发基础HTML好吧离开Python几天...如何学好前端?? 多去看别人的网站.多看.多写.多练,(知乎.36Kr.)多练就 ...
- 2017-2018-2 20155314《网络对抗技术》Exp8 Web基础
2017-2018-2 20155314<网络对抗技术>Exp8 Web基础 目录 实验内容 实验环境 基础问题回答 预备知识 实验步骤 1 macOS下Apache的配置 2 macOS ...
- 20145236《网络对抗》Exp8 WEB基础实践
20145236<网路对抗>Exp8 WEB基础实践 一.基础问题回答 什么是表单 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框. ...
随机推荐
- LeetCode 1091. Shortest Path in Binary Matrix
原题链接在这里:https://leetcode.com/problems/shortest-path-in-binary-matrix/ 题目: In an N by N square grid, ...
- 使用mustache 做为docker容器运行动态配置工具
很多时候我们需要在启动容器的时候基于配置文件运行,如果在配置比较简单的时候我们可以通过环境变量 注入,同时当前12 factors 越来越融入大家的开发中了(对于配置通过环境变量处理),但是好多老的软 ...
- ubuntu 安装任何版本的Firefox
https://ftp.mozilla.org/pub/firefox/releases/ 1.sudo gedit /usr/share/applications/firefox.desktop 2 ...
- vector的使用注意事项
示例1: #include "iostream" #include "vector" using namespace std; int main(void) { ...
- request登录案例
一.案例需求 1.编写login.html登录页面 username & password 两个输入框 2.使用Druid数据库连接池技术,操作mysql,day14数据库中user表 3.使 ...
- 【luoguP2994】[USACO10OCT]吃晚饭的时候Dinner Time
题目链接 按顺序对于每个座位找一个最近的同时编号最小的牛就行了 #include<iostream> #include<cstring> #include<cstdio& ...
- 【11NOIP提高组】选择客栈（信息学奥赛一本通 1546）（洛谷 1311）
题目描述 丽江河边有nn家很有特色的客栈,客栈按照其位置顺序从 11到nn编号.每家客栈都按照某一种色调进行装饰(总共 kk 种,用整数 00 ~k-1k−1 表示),且每家客栈都设有一家咖啡店,每家 ...
- planning algorithms chapter 1
chapter 1 介绍 什么是规划? 在机器人领域,运动规划和轨迹规划主要用来解决"怎么移动钢琴"的问题,这个问题是如何将钢琴从一个房间移动到另一个房间,并且保证钢琴不和其他事物 ...
- lintcode-1038. 珠宝和石头
题目描述 给定字符串J代表是珠宝的石头类型,而S代表你拥有的石头.S中的每个字符都是你拥有的一个石头. 你想知道你的石头有多少是珠宝. J中的字母一定不同,J和S中的字符都是字母. 字母区分大小写,因 ...
- 使用helm进行kubernetes包管理
1. 安装helm package https://github.com/helm/helm/blob/master/LICENSE 2. 将 helm 配置到环境变量 3. 使用helm的前提是安装 ...