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的位置以及内容：

//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方法得到执行：

五、既然script标签能引入Servlet，那么css的link标签呢？

动态引入JS的好处

友情链接

欢迎大家留言补充！