web基础---->script标签的特殊使用
今天要讲的就是怎样使用<script>去请求一个servlet，加载一些js资源以及额外的逻辑处理：
目录：
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基础实践 一.基础问题回答 什么是表单 表单在网页中主要负责数据采集功能 一个表单有三个基本组成部分: 表单标签 表单域:包含了文本框.密码框. ...
随机推荐
- 前端性能----TCP协议
TCP属于OSI七层模型中的传输层协议,位于网络边缘,提供端到端的可靠数据传输,其有着承上启下的作用,协议数据单元为报文段(Message Segment). TCP需要提供以下功能: 分组和复用 应 ...
- Ping任务管理模块-JavaWeb
总体框架: 1.创建任务 2.修改任务 3.删除任务 4.环境配置 5.全量PING 6.抽样PING 7.停止 8.查看历史 9.查看执行详情 主要从项目总结和经验角度讲述: 一.项目运行环境 1. ...
- 磁盘提示“X:拒绝访问”问题解决
cacls "D:\*.*" /T /E /G Administrators:F cacls "D:\*.*" /T /E /G Users:F cacls & ...
- linux正则表达式与通配符练习
---恢复内容开始--- 1.删除tmp目录下的所有文件 cd .. cd .. cd tmp rm -fr * 2.把etc目录下以p开头的文件和目录过滤出来 cd /etc/ ls p* (前一 ...
- Redis笔记搬迁
Redis原理 从不同的角度来详细介绍redis 存储方式 数据结构 Redis的过期策略 数据淘汰策略 高可用 主从复制 分布式缓存 哨兵 缓存异常 缓存穿透 缓存雪崩 缓存与数据库数据一致性 ...
- Spark 部署即提交模式意义解析
Spark 的官方从 Cluster Mode Overview 中,官方向我们介绍了 cluster 模式的部署方式. Spark 作为独立进程在集群上运行,他们通过 SparkContext 进行 ...
- GoCN每日新闻(2019-11-11)
GoCN每日新闻(2019-11-11) GoCN每日新闻(2019-11-11) 1. Go的内存管理与回收 https://medium.com/a-journey-with-go/go-memo ...
- 终于明白为什么要加 final 关键字了！
阅读本文大概需要 2.8 分钟. 来源: www.jianshu.com/p/acc8d9a67d0c 在开发过程中,由于习惯的原因,我们可能对某种编程语言的一些特性习以为常,特别是只用一种语言作为日 ...
- 剑指offer：序列化二叉树
题目描述: 请实现两个函数,分别用来序列化和反序列化二叉树 思路分析: 这里一开始有点不明白题目的意思.实际上序列化应该指把二叉树用某种编码方式表示,这里一般是字符串的形式.而反序列就是将之前生成的序 ...
- 织梦Dedecms后台登陆密码忘记怎么办？
有时候长期不登陆后台或则初次建站的新手常常忘记后台登陆密码,不过不用着急,早就有人写好了密码重设工具. 下载解压为radminpass.php, 通过FTP传到网站根目录,然后访问 http:// ...