阶段五-Day03-Ajax

一、JavaWeb中路径的说明

1. JavaWeb中的路径

在JavaWeb中, 路径分为相对路劲和绝对路径两种:

相对路径:

./ 表示当前目录

绝对路径:

完整的路径名

2. 在JavaWeb中/的不同意义

/斜杠如果被浏览器解析,得到的是

协议+本地ip+端口号

http://ip:port/

/斜杠如果被服务器解析, 得到是

协议+本地ip+端口号+项目路径

http://ip:port/工程路径/

特殊情况：response.sendRedirect(“”)；服务器不解析,把斜杆发给浏览器去解析，得到http://ip:port/

二、AJAX

1. 之前浏览器和服务器交互的请求发送方式

浏览器和服务器进行数据交互的基本流程为： http://localhost:8080/Ajax_war_exploded/PathServlet

1.浏览器发起http请求

2.服务器收到请求,对请求进行解析,创建请求和响应对象

3.服务器根据请求解析结果调用对应的资源处理请求

4.服务器将处理结果响应给浏览器

5.浏览器收到响应结果,对结果数据进行解析

6.浏览器将解析后的数据展示在页面

浏览器发送请求的方式:

1.在浏览器地址栏输入url地址后回车

2.使用超链接

3.使用form表单

4.在js代码中使用window.location.href(在当前页面打开,window可以省略)

5.在js代码中使用windows.open()(在新标签打开,window可以省略)

2.浏览器发送请求访问服务器方式存在的问题

新的响应结果会覆盖之前的内容

3. Ajax的介绍和使用

3.1 介绍

概念：

Ajax(Asynchronous Javascript And XML)是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。

作用：

实现了在当前网页中显示新的响应内容。（不会覆盖掉原有内容）

特点：

一种新的让浏览器发起http请求的技术
使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示
Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术
简单易用

3.2 ajax发送请求

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><!--传统请求:1.地址栏发起请求2.超链接发起请求3.location.href发起请求4.form发起请求5.window.open()方法(是在新标签页打开)缺点: 发起请求后,响应回来的内容覆盖原有的页面简单理解: document对象直接发起的请求, 响应回来什么内容,页面就会显示什么内容ajax请求:页面不变的情况下,发送请求,获取响应数据,将响应数据完成局部刷新ajax属于js的技术简单理解:xhr对象发起请求,页面不变--><script>function f() {//1.创建xhr对象var xhr = new XMLHttpRequest();//2.开启连接xhr.open("get","AServlet");//3.发起请求xhr.send();//4.监听readyState(状态码)的变化事件//,一旦readyState发生变化,启动函数执行xhr.onreadystatechange = function () {/** readyState:*   0:创建了xhr对象,还没有连接*   1:建立了连接,还没有发送请求*   2:发送了请求,服务端开始处理*   3:服务器响应,但没有响应完(通常仅完成了响应头中数据的处理)*   4:服务器完成了完整的响应* *///readyState为4，服务端完整响应。 响应状态码为200，成功响应。if (xhr.readyState == 4 && xhr.status == 200){//xhr.responseText(响应回来的文本)console.log(xhr.responseText);document.getElementById("sp").innerText = xhr.responseText;}}}</script>
</head>
<body>
<h3>ajax01.html</h3>
<button onclick="f()">请求</button>
<br>
<span id="sp"></span>
</body>
</html>

定义一个方法:

1.创建ajax请求对象

var xhr = new XMLHttpRequset()

2.开启连接

请求方式,请求路径

xhr.open("get","testServlet")

3.发起请求

xhr.send()

4.监听就绪状态码的变化

xhr.onreadystatechange = function(ev){

if (xhr.readyState == 4 && xhr.status == 200){

//获取响应数据

var responseText = xhr.responseText

}

4. 同步与异步请求

同步请求：

发送请求后，一直等待服务端的响应，获取到服务端响应后，再执行其他的逻辑代码。
- 浏览器直接发起
  - 在浏览器地址栏输入url，发起请求
  - 使用超链接，发起请求
  - 使用form表单，发起请求
  - 在js代码中使用window.location.href，发起请求
- ajax发起同步请求，有xhr对象发起请求
  - ajax与其他方式发送同步请求的区别: ajax可以局部刷新(由xhr对象发送请求)，其他的请求方式会刷新整张页面

异步请求：

发送请求后，不需要等待服务端的响应，继续按照顺序执行其他逻辑代码，监听到响应，自动调用指定的方法。

5. Ajax的同步和异步设置

Ajax执行步骤：

创建Ajax请求对象
建立连接
发送连接
监听状态变化及结果处理

设置ajax的同步异步：

通过设置Ajax请求对象open方法的async参数的值：

true：表示异步，默认值

false：表示同步

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f() {location.href = "CServlet";}//ajax发起同步请求function f1() {var xhr = new XMLHttpRequest();//默认是true,异步请求xhr.open("get","CServlet",false);xhr.send();var responseText1 = xhr.responseText;console.log("同步请求")console.log(responseText1);}//ajax发起异步请求function f2() {var xhr = new XMLHttpRequest();//默认是true,异步请求xhr.open("get","CServlet");xhr.send();//监听xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200){var responseText2 = xhr.responseText;console.log(responseText2);}}console.log("异步请求");}</script>
</head>
<body>
<!--同步请求: 浏览器发送请求之后,一直等待服务器的响应,服务器响应完成后,才继续向下执行比如:1.地址栏直接发起的请求2.超链接发起请求3.form表单发起请求4.location.href发起请求ajax也可以发送同步请求: 但是页面不变,局部刷新异步请求: 浏览器发送请求后,不需要等待服务器的响应,继续执行其他代码,服务器响应后会有结果可以是函数的执行
-->
<a href="CServlet">超链接</a>
<hr>
<form action="CServlet"><input type="submit">
</form>
<hr>
<button onclick="f()">location.href</button>
<hr>
<a href="javascript:void(0)" onclick="f1()">ajax同步请求</a>
<hr>
<a href="javascript:void(0)" onclick="f2()">ajax异步请求</a>
</body>
</html>

6. Ajax的get请求和post请求及请求参数

6.1 Ajax设置get请求方式及携带请求参数：

Ajax的get请求的请求参数是直接写在请求路径后面

使用?拼接,多个参数中间使用&隔开

HelloServlet?name=lucy&age=18

6.2 Ajax设置post请求方式及携带请求参数：

Ajax的post请求传递参数是需要单独写在send方法中，而且需要设置请求头，该请求头表示此次请求是以表单的方式提交

//请求方式是post请求，则需要设置请求头，这个请求头就表示是以表单方式提交数据
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=lily&age=15");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function f1() {//get方法传递参数var xhr = new XMLHttpRequest();xhr.open("get","DServlet?uname=zs&pwd=123");xhr.send();xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}}}function f2() {//post方法传递参数var xhr = new XMLHttpRequest();xhr.open("post","DServlet");//必须设置请求头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")xhr.send("uname=ww&pwd=456");xhr.onreadystatechange = function () {if (xhr.readyState == 4 && xhr.status == 200){var text = xhr.responseText;console.log(text);}}}</script>
</head>
<body>
<body>
<button onclick="f1()">get请求及传参</button>
<br>
<button onclick="f2()">post请求及传参</button>
<br>
<form action="aa" method="post"><input type="submit">
</form>
</body>
</body>
</html>

7. Ajax请求的响应数据格式及处理（重点）

使用json数据格式（特殊格式的字符串, 和js对象格式一致），它比较方便简单，而且也有好用的json工具包。json格式在浏览器可以直接解析成对象格式

Java对象的json字符串格式：

普通Java对象的json字符串格式：

User user = new User(1, "张三丰", 18, "北京");

{"id":1, "name":"张三丰", "age": 18, "address":"北京"}

Map集合对应的json字符串格式：

Map<String, Object> map = new HashMap<>();
map.put("key1", "value1");
map.put("key2", "value2");

{"key1":"value1", "key2":"value2"}

List集合对应的json字符串格式：

List<User> list = new ArrayList<>();
list.add(new User(1, "赵敏", 18, "北京"));
list.add(new User(2, "周芷若", 28, "上海"));

[{"id":1, "name":"赵敏", "age":18, "address":"北京"},{"id":2, "name":"周芷若", "age":28, "address":"上海"}
]

Ajax获取响应数据的方式：var 变量名 = xhr.responseText;

获取到的是普通字符串数据：直接使用
获取到的是json格式的字符串：使用js的eval()函数，将json格式的字符串转换为js对象

三、 jQuery封装的Ajax的使用

第一种：
```
$.ajax({type:“请求方式”,url:“请求地址”，data:“请求参数”，dataType:"服务器返回的数据类型"success:fundction(data){ //成功且完整响应自动调用的函数},error: function(){ //出现错误自动调用的函数}
})
```
dataType：用来指定服务器返回来的数据类型，可选值有如下：
- xml：表示服务器返回的是xml内容
- html：表示服务器返回的是html文本内容
- script：表示服务器返回的是script文本内容
- json：表示服务器返回的是json内容（重点）
- jsonp：表示使用jsonp形式调用函数，早期我们用它来解决跨域问题
- text：表示服务器返回的是纯文本字符串
第二种：
- $.get(“请求地址”，“请求参数”，回调函数, 返回的数据类型)
- $.post(“请求地址”，“请求参数”，回调函数, 返回的数据类型)