web基础---->script标签的特殊使用

  今天周末,首先祝大家过得开心。好了,今天要讲的就是怎样使用<script>去请求一个servlet,加载一些js资源以及额外的逻辑处理:

目录:

  1. JS的引入的几种方式
  2. 在script的标签中引入Servlet
  3. 动态引入JS的好处
  4. 友情链接

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的好处

友情链接

欢迎大家留言补充!

时间: 2024-09-29 08:56:44

web基础---->script标签的特殊使用的相关文章

Java web基础总结九之—— jsp标签

Java web基础总结九之-- jsp标签 JSP标签也称之为Jsp Action,在前面讲过,jsp的设计目的就是作为表现层.我们希望JSP页面仅用作数据显示模块,不要嵌套任何java代码引入任何业务逻辑,但在实际开发中不引入一点业务逻辑是不可能的,但引入业务逻辑会导致页面出现难看java代码.jsp的标签就是为了解决这个问题.所以jsp页面中也内置了一些标签(这些标签叫做jsp标签),开发人员使用这些标签可以完成页面的一些业务逻辑.我们也可以开发自定义标签,使jsp页面不出现一行java代

javascript基础语法(简介、script标签、严格模式、保留字关键字)

[简介][1]定义:一种专为与网页交互而设计的脚本语言,也就是解释型编程语言.[2]组成: [2.1]ECMAScript由ECMA-262定义,提供核心语言功能(ECMA是欧洲计算机制造商协会) [2.2]DOM文档对象模型,提供访问和操作网页内容的方法的接口 [2.3]BOM浏览器对象模型,提供与浏览器交互的方法的接口 [script标签] [1]使用方式:引入外部文件和在页面内嵌入js代码[2]注意:带有src属性的<script>元素不应该在其<script>标签之间再包含

窥探 Script 标签(步入现代 Web 开发的魔法世界)

窥探 Script 标签 0x01 什么是 script 标签? script 标签允许你包含一些动态脚本或数据块到文档中,script 标签是非闭合的,你也可以将动态脚本或数据块当做 script 的文本节点.就是内联脚本. 一般我们最常用的就是写一些 JavaScript 脚本在 script 标签里,但是 script 也可以用来存储一些数据,比如当你设置 type="text/react" 的 script 时就可以在里面放 react 代码,但是游览器是不会执行它无法识别的

20145321 《网络对抗》 Web基础

20145321 <网络对抗> Web基础 基础问题回答 (1)什么是表单 表单在网页中主要负责数据采集功能,一个表单有三个基本组成部分:表单标签--这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法:表单域--包含了文本框.密码框.隐藏域.多行文本框.复选框.单选框.下拉选择框和文件上传框等:表单按钮:包括提交按钮.复位按钮和一般按钮. (2)浏览器可以解析运行什么语言. HTML语言.XML语言.脚本语言(Java.PHP.Script.JavaScript-) (3

20145331魏澍琛《网络对抗》Exp8 Web基础

20145331魏澍琛<网络对抗>Exp8 Web基础 实践内容: 1.简单的web前端页面(HTML.CSS等) 2.简单的web后台数据处理(PHP) 3.Mysql数据库 4.一个简单的web登陆页面例子 5.SQL注入.XSS攻击 Web前端:HTML基础 1.先将apache的端口号设为80(上节已经设置好了),接着结束掉占用80端口的进程,再启动apache. 2.在/var/www/html目录下创建20145331wsc.html文件,即前端文件. 附:检查第一步是否成功只需在

20145311 王亦徐 《网络对抗技术》 Web基础

20145311 王亦徐 <网络对抗技术> Web基础 实验内容 简单的web前端页面(HTML.CSS等) 简单的web后台数据处理(PHP) Mysql数据库 一个简单的web登陆页面例子 SQL注入.XSS攻击 基础问题回答 (1)什么是表单 表单我觉得主要是用来在网页中采集数据用的,提供了填写数据.选择数据,收集数据并提交给后台的功能,包括很多种表单元素,例如文本框.下拉框.单选复选框等 百度上说一个表单有三个基本组成部分:表单标签(form).表单域(填写数据).表单按钮(提交) (

20145326蔡馨熤《网络对抗》—— Web基础

20145326蔡馨熤<网络对抗>-- Web基础 1.实验后回答问题 (1)什么是表单. 表单是一个包含表单元素的区域,表单元素是允许用户在表单中输入信息的元素,表单在网页中主要负责数据采集功能,一个表单有三个基本组成部分:表单标签.表单域.表单按钮. (2)浏览器可以解析运行什么语言. HTML(超文本标记语言) XML(可扩展标记语言) ASP.Python.PHP.JavaScript等众多脚本语言. (3)WebServer支持哪些动态语言. JavaScript.ASP.PHP.R

20145211 《网络对抗》Exp8 Web基础

20145211 <网络对抗>Exp8 Web基础 本实践的具体要求有: (1).Web前端HTML(1分) 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. (2).Web前端javascipt(1分) 理解JavaScript的基本功能,理解DOM.编写JavaScript验证用户名.密码的规则. (3).Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密码.建表(1分) (4).Web后端:编写PHP网

20155201 网络攻防技术 实验八 Web基础

20155201 网络攻防技术 实验八 Web基础 一.实践内容 Web前端HTML,能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST方法,编写一个含有表单的HTML. Web前端javascipt,理解JavaScript的基本功能,理解DOM.编写JavaScript验证用户名.密码的规则. Web后端:MySQL基础:正常安装.启动MySQL,建库.创建用户.修改密码.建表. Web后端:编写PHP网页,连接数据库,进行用户认证. 最简单的SQL注入,XSS攻击测