Ajax详解

幽默涵养miss u

已于 2022-11-28 16:12:18 修改

阅读量586

点赞数

文章标签： ajax javascript java

于 2022-09-22 18:48:38 首次发布

本文链接：https://blog.csdn.net/weixin_53455615/article/details/126990288

版权

一、JavaWeb中的路径问题

/ 斜杠如果被浏览器解析，得到的地址是：http://ip:port/

/ 斜杠如果被服务器解析，得到的地址是：http://ip:port/工程路径/

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

jsp中获取项目路径

${pageContext.request.contextPath}

为页面中的所有路径配置前置

<base href="前置路径">

二、AJAX

（1）简介：AJAX(Asynchronous Javascript And XML) 是由浏览器解析运行的基于JavaScript实现的网页局部刷新的技术。

（2）用处：在当前网页中显示新的响应内容。（不会覆盖掉原有内容）

（3）特点：

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

（4）Ajax基本使用

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
    <script src="jquery.js"></script>
    <script>
      $(function () {
        $("input:first").blur(function () {
          var val = $(this).val();

          //1.创建Ajax请求对象
          var xhr = new XMLHttpRequest();
          //2.建立连接
          xhr.open("get", "CheckUNameServlet?uname=" + val);
          //3.发送请求
          xhr.send();
          /*
          * readystate:
          *   0:创建了Ajax请求对象，还没有建立连接
          *   1.建立了连接，还没有发送
          *   2.服务器开始处理请求
          *   3.服务器向浏览器响应不完整，常用在获取响应头中的数据
          *   4.服务器向浏览器响应完整
          * */
          //4.监听就绪状态的变化
          xhr.onreadystatechange = function (ev) {
            //判断就绪状态 4 和 响应状态码 200
            if(xhr.readyState == 4 && xhr.status == 200){
              //接收响应的数据
              var responseText = xhr.responseText;
            }
          }
        })
      })
    </script>
  </head>
  <body>
    <form action="">
      <input type="text">
    </form>
  </body>
</html>

三、同步和异步请求

同步请求：

发送请求后，一直等待服务端的响应，获取到服务端响应，再执行其他的逻辑代码。
1. 在浏览器地址栏输入url，发起请求
2. 使用超链接，发起请求
3. 使用form表单，发起请求
4. 在js代码中使用window.location.href，发起请求
5. ajax发起同步请求

异步请求：

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

设置ajax的同步异步：

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

true：表示异步，默认值

false：表示同步

四、请求方式

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

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

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

五、JSON

使用json数据格式（特殊格式的字符串, 和js对象格式一致），服务器响应Java对象数据给浏览器时，可以使用json字符串的格式。

（1）将获取到的JSON格式的字符串转换为对象

//方式一：获取响应数据
var data = ajax.responseText;

//使用eval函数将json格式的字符串转为js对象，后端传递的是list集合转为js对象后就是js中的数组了
eval("var arr = " + data);、

//方式二：只能转换{“id”:1 , "name": "zs"}，不能转换{id:1 , name:"zs"}

var arr = JSON.parse(data);

（2）在服务端将类转换为JSON格式的字符串

Gson gson = new Gson();
String jsonStr = gson.toJson(list);

（3）获取form表单中的所有数据

var serialize = $("form").serizlize();

（4）jackson转换工具使用

ObjectMapper objectMapper = new ObjectMapper();

//json->java

Car car = objectMapper.readValue(json, Car.class);

//java->json

String json = objectMapper.writeValueAsString(car);

六、jQuery封装的Ajax

（1）使用格式

$.ajax({
type:“请求方式”,
url:“请求地址”，
data:“请求参数”，//参数是JSON格式的

// 例如数据类型设置为json，那么可以将json格式的字符串自动转换为js对象，及data会是一个js对象，如果服务器响应的是普通的字符串，会自动调用error中的函数
   dataType:"服务器返回的数据类型",

success:fundction(data){ //成功且完整响应自动调用的函数

       },
error: function(){ //出现错误自动调用的函数

}
})