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,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" 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基础实践一.基础问题回答什么是表单表单在网页中主要负责数据采集功能一个表单有三个基本组成部分: 表单标签表单域:包含了文本框.密码框. ...

随机推荐

python基础语法3 整形，浮点，字符串，列表
整形: ========================基本方法===========================用途: 一般用于定义整数:年龄.身份证号.qq号定义方式:age = 18 # a ...
SpringMVC+Mybatis学习
简单Web项目搭建: 一.流程 1. 导包 n个springMVC: 2个mybatis<其中一个是mybatis-spring>: 3个jackson包: 2. xml配置 web.xm ...
TCP/IP通信过程（以发送电子邮件为例）（转）
1.应用程序处理 (1)A用户启动邮件应用程序,填写收件人邮箱和发送内容,点击“发送”,开始TCP/IP通信: (2)应用程序对发送的内容进行编码处理,这一过程相当于OSI的表示层功能: (3)由A用 ...
[HTTP趣谈]origin,referer和host区别
发起一个ajax请求时,request header里面有三个属性会涉及请求源信息.前端可能用不到这些值,但是,后台业务系统会比较关心它们,场景可能有: 处理跨域请求时,必须判断来源请求方是否合法: ...
speedscope + node inspect 分析node应用调用
生成一个简单的express 项目使用脚手架工具 npm install -g express-generator@4 express . 启动使用inspect命令 node --inspect ...
第04组alpha冲刺（2/4）
队名:斗地组组长博客:地址作业博客:Alpha冲刺(2/4) 各组员情况林涛(组长) 过去两天完成了哪些任务: 1.收集各个组员的进度 2.写博客展示GitHub当日代码/文档签入记录: 接下 ...
SDL
SDL介绍 SDL(Simple DirectMedia Layer)是一套开放源代码的跨平台多媒体开发库,使用C语言写成.SDL提供了数种控制图像.声音.输出入的函数,让开发者只要用相同或是相似的代 ...
pip命令提示unknow or unsupported command install解决方法
执行pip命令安装模块,提示unknow or unsupported command install 原因: 使用where pip查看, 电脑中装了loadrunner,存在多个pip,不知道使用 ...
Java8之list<entity>获取实体的某一字段
示例 List<String> titles = titleList.stream().map(e -> e.get(ConstantUtil.TITLE)).collect(Col ...
[BUAA软工]提问回顾与个人总结
提问回顾与个人总结项目内容所属课程 2019春季计算机学院软件工程(任健) 所属作业提问回顾与问题总结课程目标理解软件工程的作用和重要性,提升工程能力,团队协作能力作业目标回顾软工课程 ...