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

随机推荐

Mac下用命令行获取苹果手机的UDID
在终端输入命令行:system_profiler SPUSBDataType | grep "Serial Number:.*" | sed s#".*Serial Nu ...
JAVA接口与类的区别
抽象类:一个类中有抽象方法,这个类就变成了抽象类.抽象类中class的前面必须有abstract修饰符.抽象类中可以有普通方法,也可以有抽象方法,而抽象方法的个数可以是0个,也可以是多个.子类继承父类 ...
Supercharging your ETL with Airflow and Singer
转自:https://www.stitchdata.com/blog/supercharging-etl-with-airflow-and-singer/ singer 团队关于singer 与air ...
smashing 三方widgets 使用
smashing 有一套自己的约定,包括widgets 以及dashboard,还有就是关于数据的处理约定如下三方widgets 统一在widgets 目录下,一般包含了基于coffee 的js ...
[Zjoi2006]三色二叉树（bzoj1864）（洛谷2585）题解
原题地址:https://www.luogu.org/problemnew/show/P2585 题目大意:可以把一个节点染成三种颜色,父节点和两个子节点(可以有一个)颜色不能相同.求最多(少)能有多 ...
【JZOJ5551】【20190625】旅途
题目 $n$个点$m$条边的无向图,一条路径的代价定义为路径上前$k$大边的边权和对于$k = n \to 1 $,求1-n的最短路 \(n,m \le 3000 \ , \ w_i \ ...
ImportError: DLL load failed while importing win32api: 找不到指定的模块。
这个是用pip install pywin32安装报的一个错误据说直接使用pip install pypiwin32安装就不会有报错但是遇到错误还是要尝试解决一下的 pip install pyw ...
【Python】[技术博客] 如何对使用PYQT编写的GUI文件进行单元测试
如何对使用PYQT编写的GUI文件进行单元测试想要对PYQT编写的GUI文件进行单元测试,我们主要用到QTest QTest里面包含了一些对窗体的各种控件进行模拟操作的函数,通过QTest对窗体进行 ...
ThreadPoolExecutor的坑
ExecutorService executorService = new ThreadPoolExecutor(0, MAX_THREAD_NUM, 60, TimeUnit.SECONDS, ne ...
python 获取天气信息，并绘制曲线
import urllib.request import gzip import json print('------天气查询------') def get_weather_data() : cit ...