初学者——Servlet学习5—Js

JS

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

2. 导入jQuery插件。

3. 在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"];//赋值数组5
    array.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中用的最多）

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

1. form表单请求
2. AJAX请求
3. webSocket
4. 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，get
         type:"post", ；
            //data——给后台发请求时传的参数
         data:"username=t&pwd=1234", 
            //成功时的回调   只要请求回的是200就会进入
         success:function (data) { 
             alert(data)
         },
            //失败时的回调   除非后台出错回一个500才会进入，否则进入success
         error: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对一般包括下面三个：

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

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

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

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

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