初学者——Servlet学习5

JS

jQuery简单介绍
jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。
导入jQuery插件。
在html页面关联jQuery

<script type="text/javascript" src="js/jquery-3.4.js"></script>

JS中的基本操作

JS是一个弱类型语言，我们只需要定义变量，然后给变量赋值，你赋值是什么类型，那么这个变量就是什么类型。
js是面向对象语言。
变量、方法的定义

 //在js中所有变量都用var定义var a = 1;var b = false;var c = ["a","b"];//赋值数组5array.push("sdd");//可以通过push方法往数组里加值//运算符与Java相似//在js中===判断值和类型相等  ==判断值相等for(var i=0; i<10; i++) {//向网页上输出document.write("当前是" + i+"次<br>");}//向控制台上输出console.log("helloworld");//定义方法function foo(a) {console.log(a);}foo(123);

对象的创建

//创建一个user对象
var user = {username: "hhh",pwd:"123",foo:function (a) {alert(a);}
};

在html中单引号和双引号可以互换，但是不能混用；
任何一个JS执行的基础都是html。

JS的常用操作 DOM BOM

操作两个对象 ——>文档流对象浏览器对象

文档流对象DOM

document最主要是获得当前页面中的任何元素，获得元素后改变元素中内部的内容，改属性或改value或innerText或innerHTML —— document动态填充过程

innerHTML 和innerText
innerHTML把内容按html解析的内容转成字符串输出在页面， innerHTML返回的是标签内的 html内容，包含html标签。
innerText返回的是标签内的文本值，不包含html标签。

示例：

var b = document.getElementById('container');//获取html中id是container的标签b.setAttribute("name","lll");//设置标签的属性b.innerText = "我是DOM";

想给一个前端页面添加或去掉一些内容就是用DOM，如果想要浏览器做一些事，比如监听鼠标事件等就用BOM。

浏览器对象BOM

以on开头的都是BOM对象的回调动作。

window中包含document,可以拿出document，document不能拿出window

简单操作

console.error(window.location.href);//location获得当前浏览器地址，document和window获得的location其实是同一个东西window.location.href = "http://www.baidu.com";//跳转到指定页面window.open("http://www.baidu.com");//打开一个新页面window.resizeTo(100,100);//是通过window.open打开的才能获得完整控制权，resize改变浏览器大小window.location.reload();//刷新当前的页面window.alert("dfgh");//给一个警示框提示一个内容window.confirm("hjk");//一个确认框importClass导入一个脚本window.moveTo(300,400);//把你打开的内容挪过去，一般只有你open打开的页面才行，例如弹窗广告window.onkeydown = function (ev) {//onkeydown键盘事件alert(ev.code);
}

xss攻击：我在我这边上传一个脚本在你浏览器执行，在上传脚本的时候设置一个页面跳转过程，页面跳转通过window.location.href控制，使你的页面跳转到指定页面，这个页面是做好的和你要访问的页面一摸一样的页面，
你一进入这个页面，就会被捕获。

网络请求（在JS中用的最多）

前端向后台发送请求：四种方式
常用前两种

form表单请求
AJAX请求
webSocket
RPC

AJAX请求

AJAX是异步的javascript和XML；

form表单是一个同步的过程，当form表单提交的时候，页面是一定要切换的，同时，页面当中正在执行的某些个动作会立刻停止；

当发送的请求是异步的时候，他不会影响当前界面的跳转过程。
页面可以保留在当前过程，AJAX请求发出去以后，等待后台给一个返回，拿到了返回，才决定是修改当前页面内容还是页面跳转等，如果返回的内容没有说进行页面跳转，就还留在当前页面，就继续干页面当前正在做的事情，它不需要等待这个请求执行完，再去执行其他的过程。

现在AJAX基本不会用原生的请求，而是使用第三方框架将请求发出去。——jQuery插件

$就是将Window和document整合到一起的一个对象，称为jQuery的根对象。

1、AJAX发送请求的方式

 function test() {//AJAX请求$.ajax({//url——访问的地址  url:"/web/login.do",  //type——只有两个值——post，gettype:"post", ；//data——给后台发请求时传的参数data:"username=t&pwd=1234", //成功时的回调   只要请求回的是200就会进入success:function (data) { alert(data)},//失败时的回调   除非后台出错回一个500才会进入，否则进入successerror:function (data) {  }});}

一般来说，get请求会把参数缀到后面，一般带敏感信息就不会使用get请求，而使用post请求。

2、AJAX其他发送请求的方式

这时候一定是按照get请求发送的，不用再加type
$.get({        url:"/web/login.do",   data:"username=t&pwd=1234",          success:function (data) { alert(data)},         error:function (data) {  }});这时候一定是按照post请求发送的，不用再加type$.post({        url:"/web/login.do",           data:"username=t&pwd=1234",          success:function (data) { alert(data)},       error:function (data) {  }});

如果想让一打开就发送AJAX 请求，就直接$.ajax，不用封装在方法里。它就是方便我们操作DOM和BOM的。

3、其他操作

id选择器
var a = $ ('#container');//拿出container的id （ .是class，#是id）
//对单标签的操作a.val("sss");
//val() —— 不传参数时拿的是value值，当传参数时，就改变这个value值，val一般是拿的是input里的，即带value的标签//对双标签的操作
var b =a.text();//拿出其中的文本内容  a.text("dfsd");设置里面的文本
var b = a.html();//拿出其中带标签的内容  a.html(" ");设置里面的html
var b = a.attr("type","text");//当只有一个参数type时拿出它的type；当有两参数时改变它类型，如这条就是将type类型变为text
console.log(b);calss选择器
var a = $('.container')[1];//当里面写class选择器时后面一定要加[],因为id只有一个而class可能有多个

JSON (Javascript object navigator)

导入fastjson.jar包。
json对象里面放的是k-v对，每个k-v对使用逗号隔开

{
key:value,
key : value，
……
}

回复的是这样的 key --value 对
回复的k-v对一般包括下面三个：

status—>int 这个业务执行成功与否
info —>string 执行不成功的话通知一下哪不成功
data—>Object 返回的数据

json对象<--------->字符串

//从字符串解析JSON对象
JSON.parseObject();
//从字符串解析JSON数组JSON.parseArray();
//将JSON对象/数组转化为字符串JSON.toJSONString();

总结前端<——>后端方式

前端往后端发送的方式两种：
1.同步
2.异步
后端往前端发送方式三种：
第一种：直接返回一个数据字符串
第二种：重定向
第三种：转发