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标签的特殊使用

JS的引入方式

<script>中Servlet的引入

动态引入JS的好处

友情链接

最新文章

热门文章