前端servlet，Ajax，JavaScript等知识点汇总

servlet：

1.三种servlet的实现方法：

可以接收的协议有：GET，POST，HEAD，OPTIONS，PUT，DELETE，TRACE。

（1）实现Servlet接口：

实现接口就要实现它的所有方法

public class FirstServlet implements Servlet{
@Override
public void destroy() {
/*当容器检测到一个Servlet对象应该从服务器中被移除的时候，容器会调用该对象的destroy方法，以便让Servlet对象可以释放它所使用的资源，保存数据到持久化存储设备中，例如：将内存中的数据保存到数据库中，关闭数据库的连接。
*/
}
@Override
public ServletConfig getServletConfig() {
	return null;
}
@Override
public String getServletInfo() {
	return null;
}
@Override
public void init(ServletConfig arg0) throws ServletException {
	/*在Servlet实例化之后，Servlet容器会调用init()方法，来初始化该对象，主要是为了让Servlet对象在处理客户请求之前可以完成一些初始化工作，比如：建立数据库的连接，获取配置信息。*/
}

@Override
public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
/*容器调用service()方法来处理客户端的请求。*/
}

（2）继承GenericServlet类

重写抽象GenericServlet类中的service方法即可，在它自己的方法体内简单实现了其他四种方法，即GenericServlet类定义了一个通用的，不依赖具体协议的Servlet

public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
		res.setContentType("application/xml;charset=UTF-8");
		PrintWriter pw=res.getWriter();
			//写需要在浏览器上输出的内容
	}

（3）继承HttpServlet类

重写抽象的HttpServlet类中的doGet或者doPost方法即可。

HttpServlet继承自GenericServlet类，用于创建适合Web站点的HTTP Servlet，方便快速开发应用于Http协议的Servlet。

public class ThreeServlet extends HttpServlet{
    private static final long serialVersionUID = 1L;
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    /*自己编写的在浏览器上显示一个图片
        resp.setContentType("image/jpeg");
        try (BufferedInputStream bis=new BufferedInputStream(new FileInputStream("C:\\Users\\asus\\Desktop\\1.png"));
            OutputStream ous=resp.getOutputStream();){
            int date=-1;
            while((date=bis.read())!=-1) {
                ous.write(date);
            }
            ous.flush();

        } catch (Exception e) {
            e.printStackTrace();
        }
        */
}	}

注意：doPost和doGet方法，从request解析请求信息开始，根据http协议的格式进行解析，分发到不同的请求处理方法中，但是这两个方法都是被Service方法调用的。

1.doGet方法和doPost方法的区别(get:从指定的资源请求数据；post：提交要被处理的数据)

​ （1）form运行方式：

	当form框里面的method为get时，执行doGet方法,表单的数据集的值必须是ASCII字符
	当form框里面的method为post时，执行doPost方法，Post支持整个ISO10646字符集

​ （2）生成方式：

​ get方式：

1，直接在URL地址栏中输入URL。
2，网页中的超链接。
3，form中mothod为get
4.form中method为空时，默认是get提交
5.<image src=" ">访问图片
6.外部js,css文件的引入
7.在Javascript代码中访问资源
8.Ajax中设置请求为get方式
9.使用jsp相关标签访问资源

post方式：

form中method属性为post
Ajax中设置请求为post方式

（3）数据传送方式

get方法：

1.表单数据存放在URL地址后面，以key=value方式缀在url后面。所有get方式提交时HTTP中没有消息体
2.把参数数据队列加到提交表单的Action属性所指的URL中，值和表单内的各个字段一一对应，在URL中可以看到
3.请求可被缓存。
4.请求保留在浏览器历时记录中
5.请求可被收藏为书签

post方法：

1.表单数据存放在HTTP协议的消息体中以实体的方式传送到服务器。
2.通过post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。参数放在请求体部，用户看不到这个过程。
3.请求不可被缓存。
4.请求不保留在浏览器历时记录中
5.请求不可被收藏为书签

例：如果第三种实现servlet中的方法的方法用doPost方法，在浏览器中就不会显示出图片

（4）服务器获取数据的方式

Get方法：服务器采用request.QueryString来获取变量的值
	根据url后面的？进行截取，获取到表单参数的值
Post方法：服务器采用request.Form来获取数据

（5）传送的数据量：

Get方法：数据量长度有限制，一般不超过2kb。因为是参数传递，且在地址栏中，故数据量有限制。

Post方法：适合大规模的数据传送。因为是以实体的方式传送的。

（6）安全性

Get方法：安全性差。因为是直接将数据显示在地址栏中，浏览器有缓冲，可记录用户信息。所以安全性低。

Post方法：安全性高。因为post方式提交数据时是采用的HTTP post机制，是将表单中的字段与值放置在HTTP HEADER内一起传送到ACTION所指的URL中，用户是看不见的。

（7）在用户刷新时

Get方式：不会有任何提示

Post方式：会弹出提示框，问用户是否重新提交。

（8）编码类型

get:application/x-www-form-urlencoded
post:application/x-www-form-urlencoded or multipart/form-data。为二进制数据使用多重编码。

注意：

• 使用Get方法的场景：做数据查询/自己测试代码查看是否获得数据。
• 使用Post方法的场景：在做数据添加，修改或删除时，为了数据的保密性，使用Post方法。

2.两种资源定位方式：

1.tomcat3.0之前必须使用配置文件web.xml

<servlet>
	<servlet-name>servlet名称</servlet-name> 		
	<servlet-class>全类名</servlet-class>  
	 <load-on-startup>5</load-on-startup>       
	 /*，可以不进行配置，这里是设置这个servlet中的Init()的执行时间，正数（0-10）init()方法会随着服务器的启动而执行，如果设置一个负数，Init()方法会随着访问servlet而执行，默认是负数，随着访问servlet而执行init()；*/
    </servlet>
  <servlet-mapping>
  		<servlet-name>servlet名称</servlet-name>
  		<url-pattern>servlet资源路径</url-pattern>   
  		/* 如果为非通配路径，必须以/开始，/*/
  </servlet-mapping>

2.使用注解的方式

servlet3.0以上版本可以使用注解的方式来配置servlet的资源路径

在类上面使用 @WebServlet(name=“three”,url-pattern={"/three.do"})字符数组，可以写多个

或者 简写为@WebServlet("/资源路径")

注意：

一个Servlet可以定义多个访问路径 ： @WebServlet({"/xxx","/xxxx","/xxxxx"})
      路径定义规则：
       1. /xxx：路径匹配
  @WebServlet({"/test","/test2","/test3"}) //多个访问路径
       2. /xxx/xxx:多层路径，目录结构
   WebServlet("/user/delete")  //多层路径
       3. *.do：扩展名匹配
    @WebServlet("*.ation") //扩展名匹配，此种方式是在struts1、struts2里面使用的

---

3.Servlet生命周期：

1.创建

4.servlet在运行期间是单例模式

web容器中单例模式：servlet对象在第一次创建之后就维护这个对象，再次调用service方法时，从容器中找出这个对象用来调用方法。

1.饿汉式单例模式

定义：一个类有且仅有一个实例，并且自行实例化向整个系统提供

5.接收参数

（1）.接收单一的参数值，即一个key=value,使用getParameter方法

例：

String name = req.getParameter("name");

（2）.接收多指，即一个参数名对应多个值，如页面中的多选框

例：

String[] like = req.getParameterValues("like"); 
System.out.println(Arrays.toString(like));

（3）.获取请求中携带的所有参数名，getParameterNames

（不知道传过来什么值，可以用这个遍历一下查看）

Enumeration<String> names = req.getParameterNames(); 
while(names.hasMoreElements()){ 
String paramName = names.nextElement(); 
System.out.println(paramName); 
} 

（4）.获取请求中携带的所有参数和对应的值，getParameterMap

Map<String, String[]> map = req.getParameterMap();
for(String key:map.keySet()){ 
System.out.println(key+" : "+Arrays.toString(map.get(key))); 
}

（5）.接收其他的参数：

例：req.getMethod();

​ req.getHeaders();

.获取multipart/form-data的数据

首先需要先配置servlet支持Multipar请求

1. web.xml
   < servlet>
   < multipart-config>
   < max-file-size>…
   < /multipart-config>
   < /servlet>

2. 注解
   在Servlet上添加@MultipartConfig(maxFileSize=)

   取值：

   1. 非文件类值：
      req.getParameter(paramName）
   2. 文件：
      req.getPart(paramName)
      req.getParts();

6.出现乱码的情况

1.传参

（1）.如果是GET请求中携带的参数，出现乱码，

可以在Tomcat服务器的server.xml文件中进行配置。
因为是GET请求的参数在写在URI后的，所以需要在在 <Connector> 中加入新的属性URIEncoding="XXX"

（2）.如果是GET请求中携带的参数，出现乱码。

调用 setCharacterEncoding 方法设置获取参数时使用

的编码

req.setCharacterEncoding("UTF-8")

2.写回数据，即在浏览器页面上显示乱码

//设置响应中的编码为UTF-8
resp.setCharacterEncoding("UTF-8"); 
//告诉浏览器当前响应中的内容的类型，和内容的编码为UTF-8
resp.setContentType("text/plain;charset=UTF-8"); 

7.用表单发送数据的编码格式

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

默认地，表单数据会编码为 “application/x-www-form-urlencoded”。就是说，在发送到服务器之前，所有字符都会进行编码（空格转换为 “+” 加号，特殊符号转换为 ASCII HEX 值）。

1.在发送前编码所有字符（默认）

一般用于字符文本的编码，以key=value的形式

application/x-www-form-urlencoded

2.不对字符编码。在使用包含文件上传控件的表单时，必须使用该值。

上传文件，图像等数据文件，只能用于post的请求

multipart/form-data

3.空格转换为 “+” 加号，但不对特殊字符编码。

text/plain

8.项目路径：

1.javax.servlet.http.HttpServletRequest 接口，表示http协议的请求

getContextPath() ，获取项目的根路径（默认是项目名）

getServletPath() ，获取当前访问的servlet地址

getRequestURL() ，获取当前请求的URL地址

getRequestURI() ，获取当前星期的URI地址

req.getContextPath() = /servlet-test 
req.getServletPath() = /path 
req.getRequestURL() = http://127.0.0.1:8989/servlet-test/path 
req.getRequestURI() = /servlet-test/path 

2.javax.servlet.ServletContext 接口，表示Servlet上下文环境，代表了整个web项目，是非常重要的一个对象

getContextPath() ，获取当前项目的根路径（默认就是项目名）

getRealPath(String path) ，获取一个资源在服务器中的绝对路径

getResourcePaths(String path) ，获取一个路径下面的所有资源

contextPath = /servlet-test 
realPath = D:\briup\apache-tomcat-8.5.58\webapps\servlet-test\ 
/META-INF/ 
/hello.html 
/WEB-INF/ 
/index.html

AJAX相关知识点：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

一种使用现有标准的新方法，在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

工作原理：

XMLHttpRequest是AJAX的对象，用于在后台与服务器交换数据。

创建对象的语法：

variable=new XMLHttpRequest();

老版本浏览器，IE5，IE6:

variable=newActiveXObject(“Microsoft.XMLHTTP”);

var xmlhttp; 
if (window.XMLHttpRequest) {   
//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码    xmlhttp=new XMLHttpRequest(); 
} else {   
// IE6, IE5 浏览器执行代码    
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }

1.ajax-向服务器发送请求：

使用XMLHttpRequest对象的open()和send（）方法。

xmlhttp.open("GET","ajax_info.txt",true);
	open（method,url,async）
	method:请求的类型，get或post
	url:文件在服务器上的位置
	async:true(异步)或false（同步）
xmlhttp.send();
	send(String)
	string:仅用于post请求

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();

使用Post请求：

​ 无法使用缓存文件（更新服务器上的文件或数据库）

​ 向服务器发送大量数据（POST 没有数据量限制）

​ 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

如果需要像HTML表单那样post数据，使用setRequestHeader()添加HTTP头，然后在send（）方法中规定希望发送的数据

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("fname=Henry&lname=Ford");

setRequestHeader(header,value)
	header:规定头的名称
	value：规定的头的值

Get请求：

//可能得到的是缓存的结果
xmlhttp.open("GET","/try/ajax/demo_get.php",true); 
xmlhttp.send();

为避免得到是缓存的结果，像url添加一个唯一的id:

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); 
xmlhttp.send();

//如果希望通过get发送信息，像url添加信息
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();

2.AJAX–服务器响应：

获得来自服务器的响应，使用XMLHttpRequest 对象的 responseText 或 responseXML 属性。

其中：

responseText 获得字符串形式的响应数据。

实例：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据。

需要进行相应的解析XML文件

3.AJAX–事件：

onreadystatechange事件：

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

readyState:存有XMLHttpRequest的状态，从0到4发生变化

​ 0：请求未初始化（还没有调用open）

​ 1：服务器连接已建立（请求已经建立，但是还没有发送，即还没有调用send（））

​ 2：请求已接收（正在处理中，通常可以从响应中获取内容头）

​ 3：请求处理中（通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成）

​ 4：请求已完成，且响应已就绪（可以获取并使用服务器的响应了）

status:

​ 200:“OK”

​ 404:“未找到页面”

**

xmlhttp.status的值及解释：**
100——客户必须继续发出请求 
101——客户要求服务器根据请求转换HTTP协议版本 
200——交易成功 
201——提示知道新文件的URL 
202——接受和处理、但处理未完成
  203——返回信息不确定或不完整
  204——请求收到，但返回信息为空
  205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件
  206——服务器已经完成了部分用户的GET请求
  300——请求的资源可在多处得到
  301——删除请求数据
  302——在其他地址发现了请求数据
  303——建议客户访问其他URL或访问方式 
304——客户端已经执行了GET，但文件未变化
  305——请求的资源必须从服务器指定的地址得到 
306——前一版本HTTP中使用的代码，现行版本中不再使用 
307——申明请求的资源临时性删除 
400——错误请求，如语法错误 
401——请求授权失败
  402——保留有效ChargeTo头响应
  403——请求不允许
  404——没有发现文件、查询或URl
  405——用户在Request-Line字段定义的方法不允许
  406——根据用户发送的Accept拖，请求资源不可访问
  407——类似401，用户必须首先在代理服务器上得到授权
  408——客户端没有在用户指定的饿时间内完成请求
  409——对当前资源状态，请求不能完成
  410——服务器上不再有此资源且无进一步的参考地址
  411——服务器拒绝用户定义的Content-Length属性请求
  412——一个或多个请求头字段在当前请求中错误 
413——请求的资源大于服务器允许的大小
  414——请求的资源URL长于服务器允许的长度 
415——请求资源不支持请求项目格式 
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段 
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求

  **合起来**

500——服务器产生内部错误 
501——服务器不支持请求的函数 
502——服务器暂时不可用，有时是为了防止发生系统过载 
503——服务器过载或暂停维修 
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长 
505——服务器不支持或拒绝支请求头中指定的HTTP版本 

1xx:信息响应类，表示接收到请求并且继续处理 
2xx:处理成功响应类，表示动作被成功接收、理解和接受 
3xx:重定向响应类，为了完成指定的动作，必须接受进一步处理 
4xx:客户端错误，客户请求包含语法错误或者是不能正确执行 
5xx:服务端错误，服务器不能正确执行一个正确的请求
xmlhttp.readyState==4 && xmlhttp.status==200的解释：请求完成并且成功返回

回调函数：

回调函数是一种以参数形式传递给另一个函数的函数，如果网站上存在多个AJAX任务，那么应该为XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。

该函数调用应该包含url以及onreadystatechane事件时执行的任务（每次调用可能不尽相同）

javaScript:

1.完整的JavaScript包含三个部分

ECMAScript规范，描述了该语言的语法和基本对象的定义

文档对象模型（DOM），描述处理网页内容的方法

浏览器对象模型（BOM），描述与浏览器进行交互的方法

2.Javascript语言的特点：

解释执行的脚本语言；基于对象的语言；简单性；弱语言；事件驱动（在页面上的操作使用JavaScript）；动态性（javaScript可以直接对用户或客户输入做出响应，无须经过web服务程序）；安全性（JavaScript不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互。从而有效地防止数据的丢失）；跨平台性（依赖于浏览器本身，与操作环境无关）

3.在页面中使用JavaScript的作用：

1. 动态改进网页的设计布局(操作页面中的标签元素)

2. 验证表单

3. 检测浏览器、控制浏览器的行为

4. 创建cookies

5. 处理页面中触发的事件

6. 在使用ajax的时候也要用到JavaScript

   4.位置：

   直接写到页面中

   放置在HTML页面的或者标签中

5.输出：

alert（）弹出一个弹框

console.log()将信息输出到控制台

document.write():将值输出到页面

6.变量类型

可以使用全局函数 typeof() 来判断一个变量的数据类型，只能判断基础数据类型。对于使用内置构造函数创建的对象，均返回object

javaScript拥有动态类型的特点，这意味着相同的变量可用作不同的类型。

如：给变量x赋不同类型的值，那么变量x的类型也随之变化。

（1）字符串

字符串可以使用单引号或双引号，

可以使用字符串中的一些内置函数。

（2）数组：

1. 数组的长度是可变的
2. 数组里面放的数据类型也可以不同
3. 数组的长度是和所使用到的数组中最大下标相关联的

创建数组的时候，可以指定长度也可以不指定：

var a1 = new Array(4); 
var a2 = [1,3,4,"tom"]; JavaScript中，一对中括号可以用来代表数组，java中是用一对大括号
var a3 = new Array(); 
var a4 = [];

在js中，数组对象还有push方法，可以直接把数据存到数组中，而不需要控制下标：arr.push(“briup”);

（3）对象类型：

自定义对象：

var person= {
firstname:"John", 
lastname:"Doe", 
id:5566 
};

（4）函数

function（）{ return ;}

可以直接在JavaScript中调用，也可以在事件中调用函数。

在JavaScript中，有全局函数 eval() ，可以解析字符串，将运算式子，解析为执行结果

var x = "(5+5)*3-4"; 
console.log(eval(x)); 

特别情况，这三种情况，if会自动判断a是否有值，如果没值就直接返回false

//var a; 
//var a = null; 
var a = ""; 
if(a){
console.log(a); 
} 

JavaScript中，还有一种for-in循环，可以专门循环遍历出对象中的属性和值java中要获取对象中属性和值，需要使用反射

var person={
fname:"John", 
lname:"Doe", 
age:25 
};
for (x in person){ 
console.log(x+":"+person[x]); 

for-in循环也可以遍历数组：

var arr = [1,3,4,5];
for(x in arr){ 
console.log(x+" : "+arr[x]); 
} 

JavaScript中的void关键字，用于取消跳转

< a href=“javascript:void(0);”>点我没有反应的!

（5）日期类型

JavaScript中，有日期类型Date，可以使用创建对象，获取一个日期时间

7.DOM（Document Object Model）

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）在JavaScript中，可以用 document 对象来表示浏览器创建出来的文件对象模型。

1.查找HTML元素：

//通过 id 找到 HTML 元素,返回某一个元素对象,默认id是唯一的（经常使用） 
document.getElementById("..."); 
//通过name找到 HTML 元素,返回一个集合 
document.getElementsByName("..."); 
//通过标签名找到 HTML 元素,返回一个集合 
document.getElementsByTagName("..."); 
//通过class找到 HTML 元素,返回一个集合 
document.getElementsByClassName("...");

2，操作元素

.验证（重点）

在表单提交的时候，可以使用JavaScript，对表单中的数据进行验证，验证通过则让表单继续提交，验证不通过则不让表单提交

<body>
<form name="f" action="#" method="POST" onsubmit="return jsCheck()"> 
<input type="text" name="username"> 
<input type="submit" value="提交"> 
</form> 
<script type="text/javascript">
function jsCheck(){ 
if(!document.f.username.value.trim()){ 
alert("用户名不能为空"); 
return false 
}
return true; 
} 

8.BOM（Browser Object Model）

浏览器对象模型 ,JavaScript中可以使用 window 对象，来操作浏览器的行为

1.打开/关闭新页面

//新建一个窗口，并访问指定地址 
window.open("http://www.baidu.com"); 
//新建窗口打开一个链接地址，高为100,宽为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动 条，不可调整大小，无地址栏，无状态栏 
window.open("http://www.baidu.com","newwindow","height=100,width=400,top=0,left=0, toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no"); 
//关闭当前窗口
window.close();

2，控制页面跳转

window.location ，用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

//window.location.href 属性返回当前页面的 URL 
console.log(window.location.href); 
//和点击一个超链接的效果一样 window.location.href = "http://www.baidu.com"

window.history ，包含浏览器的历史

//与在浏览器点击后退按钮相同 
window.history.back(); 
//与在浏览器中点击按钮向前相同 
window.history.forward(); 
//后退三次 
window.history.go(-3); 

3.定时调用

setInterval(function,time) ，函数会返回一个定时编号，并且每间隔指定时间调用一次指定函数

clearInterval(id) ，根据定时调用编号，清除掉次定时调用的任务

<body>
<div id="dd">10</div> 
<script type="text/javascript"> 
var div = document.getElementById("dd"); 
var id = setInterval(function(){ 
var num = div.innerHTML; 
if(num == 0){ 
clearInterval(id); 
return; 
}
div.innerHTML = num-1; 
},1000); 
</script> 
</body>

setInterval 函数的第一个参数，传入了一个匿名函数，第二个参数的单位是毫秒

4.延迟调用：

<body>
<div id="dd"></div> 
<script type="text/javascript"> 
var div = document.getElementById("dd"); 
setTimeout(function(){ 
div.innerHTML = "hello briup"; 
},5000); 
</script> 
</body>

setTimeout 函数的第一个参数，传入了一个匿名函数，第二个参数的单位是毫秒

JQuery相关知识：

jQuery是一个JavaScript库，简化了JavaScript编程

包含的功能：

HTML:元素选取  元素操作  事件函数
HTML DOM:遍历和修改
CSS 操作
JavaScript特效和动画
AJAX      
除此之外，Jquery还提供了大量的插件

JQuery语法：

1.基础语法： $(*selector*).*action*()

例：$(this).hide() - 隐藏当前元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

$("#test").hide() - 隐藏 id=“test” 的元素

2.文档就绪事件：

$(document).ready(function(){
//jQuey代码
})
$(function(){
//jquery代码
})

这是为了防止文档在完全加载（就绪）之前运行juery代码，即在DOM加载完成后才可以对DOM进行操作，如果在文档没有完全加载之前就运行函数，操作可能失败

javaScript入口函数：

window.onload=function(){
//执行代码
}

jQuery 入口函数与 JavaScript 入口函数的区别：

jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。

JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

jQuery事件：

事件：页面对不同访问者的响应叫做事件

事件处理程序：当在HTML中发生某些事件时所调用的方法。

JQuery–AJAX:

通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

1.jQuery load()方法：从服务器加载数据，并把返回的数据放入被选元素中

一般用于避免多页面情形下的代码重复，利用load()方法，将重复的部分（如导航栏）放入单独的文件中导入。

导入的方法：

//1.当前文件中要插入的地方使用此结构：
<div class="include" file="***.html"></div>

//2.***.html中放入内容，用html格式仅仅因为会有编辑器的书写辅助。。

//3.代码：
$(".include").each(function() {
    if (!!$(this).attr("file")) {
        var $includeObj = $(this);
        $(this).load($(this).attr("file"), function(html) {
            $includeObj.after(html).remove(); //加载的文件内容写入到当前标签后面并移除当前标签
        })
    }
});
或者在index文件里只写重复部分，剩下的一股脑放各自单独文件 load() 进来~

jQuery load()语法：

$(selector).load(URL,data,callback);
例：
$("#div1").load("demo_test.txt #p1");

必需的 URL 参数规定希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

例：

jQuery-AJAX get()和post()方法：

1.$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.get(*URL*,*callback*);

例：

$(document).ready(function(){
	$("button").click(function(){
		$.get("/try/ajax/demo_test.php",function(data,status){
			alert("数据: " + data + "\n状态: " + status);
		});
	});
});

$.get() 的第一个参数是我们希望请求的 URL（“demo_test.php”）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

2.$.post() 方法通过 HTTP POST 请求向服务器提交数据。

$.post(*URL,data,callback*);

URL和URI之间的区别：

URL+URN=URI

URL：统一资源定位符，主要用于链接网页，网页组件或网页上的程序，借助于（http,ftp,mailto等协议）来检索位置资源

getRequestURL() ，获取当前请求的URL地址
req.getRequestURL() = http://127.0.0.1:8989/servlet-test/path 

URI: 统一资源标识符：用于定位项目的标识，此处单词标识符表示无论使用的方法是什么（URL或URN），都要将一个资源与其他资源区分开来。

getRequestURI() ，获取当前请求的URI地址
req.getRequestURI() = /servlet-test/path 

URN:统一资源名称

注意：、URL指定要使用的协议类型，而URI不涉及协议规范

---

XML和HTML的区别：

HTML：超文本标记语言，

是一种描述性语言，用html 可以创建能在互联网上传输的信息页，是构成网页文档的主要语言,它是由很多的标签组成，具有简易性、与平台无关性两大要点。网页就是经过浏览器解析HTML文件后显示的页面

XML：可扩展标记语言

	是Internet环境中跨平台的、依赖于内容的技术，是当前处理结构化文档信息的有力工具，满足了Web内容发布与交换的需要，适合作为各种存储与共享的通用平台。
   使用xml 标记语言可以做到数据或数据结构在任何编程语言环境下的共享，一般用于配置和数据结构定义

相同点：

  html和xml 都是标记语言，都是基于文本编辑和修改的。
  都是用于操作系统或数据结构，结构上大致相同。
  都可以通过DOM 变成方式来访问。
  都可以通过CSS来改变外观

区别：

1.设计的目标不同：

HTML：显示数据，如何更好的显示数据，焦点是数据外观

XML：描述数据，什么是数据，如何存放数据，焦点是数据的内容

2.语法：

xml要求更加严格（严格要求嵌套、配对，并遵循DTD的树形结构；
区分大小写；属性值必须分装在引号中； 所有的属性都必须带有相应的值；空白部分不会被解析器自动删除；）

3.数据和显示的关系：

HTML：内容描述与显示方式整合为一体

xml:内容描述与现实方式分离。

Http协议介绍：

1.常用字段介绍：

1.Connection: keep-alive

要求服务器不要关闭TCP连接，以便请求复用，服务器同样回应这个字段

2.Content-Type 字段

这些数据类型总称为MIME type，每个值包括一级类型和二级类型，之间用斜杠分隔。

例：

Content-Type: text/html; charset=utf-8

• - text/plain
  - text/html
  - text/css
  - image/jpeg
  - image/png
  - image/svg+xml
  - audio/mp4
  - video/mp4
  - application/javascript
  - application/pdf
  - application/zip
  - application/atom+xml
  

  客户端请求时，可以使用Accept字段声明自己可以接收那些数据格式。

  例：Accept: / 表示可以接收任何格式的数据

3.Content-Encoding 字段

由于发送的数据可以是任何格式，因此可以把数据压缩后再发送。Content-Encoding字段说明数据的压缩方法。

1. 1. Content-Encoding: gzip
   2. Content-Encoding: compress
   3. Content-Encoding: deflate
   

   客户端请求，用Accept-Encoding字段说明自己可以接受哪些压缩方法。

   例：

   Accept-Encoding: gzip, deflate
   

4.HTTP/1.1版本介绍：

（1）引入了持久连接（persistent connection），即TCP连接默认不关闭，可以被多个请求复用，不用声明Connection: keep-alive。解决了1.0版本的keepalive问题，1.1版本加入了持久连接，一个TCP连接可以允许多个HTTP请求

客户端在最后一个请求时，发送Connection: close，明确要求服务器关闭TCP连接。

（2）加入了管道机制。在同一个TCP连接里，允许多个请求同时发送，增加了并发性，进一步改善了HTTP协议的效率

5.Content-Length 字段

一个TCP连接现在可以传送多个回应，势必就要有一种机制，区分数据包是属于哪一个回应的。这就是Content-length字段的作用，声明本次回应的数据长度。

例：Content-Length: 3495 告诉浏览器，本次回应的长度是3495个字节，后面的字节就属于下一个回应了，但是效率不高

6.分块传输编码 Transfer-Encoding

1.1版本后就可以使用这个字段，产生一块数据，就发送一块，采用"流模式"（stream）取代"缓存模式"（buffer）。

只要请求或回应的头信息有Transfer-Encoding字段，就表明回应将由数量未定的数据块组成。

例：

Transfer-Encoding: chunked

2.HTTP协议的请求格式：

1部分: 请求行 
	Method URL 【参数】 Http1.1
2部分: 请求头部/消息报头 

3部分: \r\n 

4部分: 请求正文

写在最后：
这片包含很多零碎的各方面的知识点，有我自己的理解也有参照网上其他大神的笔记，主要是自己目前找工作时，所遇到的一些知识点，后面还会继续更新，初次写博文，有不对之处，欢迎大家在评论区提出，大家一起学习，共同进步！