阶段五-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实现的网页局部刷新的技术。

作用：

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

特点：

1. 一种新的让浏览器发起http请求的技术

2. 使用ajax发起的请求，响应结果不会自动的覆盖原有内容，而是可以在原有页面内容上继续显示

3. Ajax是一门基于JavaScript的技术，由浏览器解析运行，所以是一种前端（客户端）技术

4. 简单易用

3.2 ajax发送请求

    
    
    
    


ajax01.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执行步骤：

1. 创建Ajax请求对象

2. 建立连接

3. 发送连接

4. 监听状态变化及结果处理

设置ajax的同步异步：

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

true：表示异步，默认值

false：表示同步

    
    
    



超链接


    


location.href

ajax同步请求

ajax异步请求

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");

    
    
    



get请求及传参


post请求及传参



    

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 map = new HashMap<>();
  map.put("key1", "value1");
  map.put("key2", "value2");
  ​
  {"key1":"value1", "key2":"value2"}

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

  List 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;

1. 获取到的是普通字符串数据：直接使用

2. 获取到的是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(“请求地址”，“请求参数”，回调函数, 返回的数据类型)

回调函数主要是用来处理服务器对我们的响应结果。

返回的数据类型这个参数用来设置服务器返回来的数据类型，可以是xml, html, script, json, text。

• 第三种：

  • $.getJSON("请求地址", "请求参数", "回调函数")

这种方式要求服务器返回的数据类型得是json格式的。

• 第四种：

  • $.getScript("请求地址", "回调函数")

  这种方式是发送ajax请求获取一个js文件。