Ajax相关总结

m0_62449576

已于 2023-09-24 21:28:39 修改

阅读量57

点赞数

文章标签： ajax okhttp 前端

于 2023-09-24 21:16:14 首次发布

本文链接：https://blog.csdn.net/m0_62449576/article/details/133252470

版权

Ajax

1.路径问题

相对路径
- ./ ：当前资源所在的目录
- …/：当前资源所在目录的上级目录
- /:以当前Tomcat服务器部署的路径作为参考，浏览器解析时，解析为http://ip:port/
绝对路径

http://IP：port/工程名/资源路径
文件路径的提取

格式：<base href="/Ajax_war_exploded（项目名）/">

2.Ajax

1.传统服务器与浏览器交互的请求发送方式

浏览器器地址中输入url地址
使用超链接发起请求
使用form表单提交
js中使用location.href
js中使用window.open

缺点：发起请求后，响应回来的内容会覆盖原有的页面

这些方式发起的请求，服务器响应回来什么内容，页面中就会显示什么内容，并且这些请求方式都是同步请求，浏览器发送请求后，一直等待服务器响应，服务器响应完成后，才继续向下执行。

2. Ajax进行请求发送

与传统的请求发送方式不同，ajax（Asynchronous JavaScript And XML）是 JavaScript的技术，由浏览器解析运行来实现网页局部刷新。

由xhr对象发起请求，响应页面不变。

//1.创建xhr对象
var xhr = new XMLHttpRequest();
//2.开启（建立）连接
xhr.open("GET", "AServlet",async(是否为异步请求，默认为true))
//3.发起请求
xhr.send();
//4.监听readyState（准备状态）的变化事件，一旦readyState发生变化，驱动函数执行
xhr.onreadystatechange = function (ev) {
     //readyState为4，服务端完整响应。 响应状态码为200，成功响应。
      //服务端成功且完整的响应
      if (xhr.readyState == 4 && xhr.status == 200){
      //响应的数据
      var text = xhr.responseText;
      //响应的XML数据
       var XML = xhr.responseXML;
      //执行相关操作
}

readyState的值表示的含义:

0：创建了xhr对象，还未建立连接
1：连接已经建立，但是还没有发送请求(调用send()之前)
2：请求已经发出，服务器正在处理
3：服务器响应中有数据可用，但是服务器还没有完全响应完
4：响应已经完成，浏览器已经接收到全部的响应内容

3.同步请求与异步请求

同步请求：浏览器发送请求后，一直等待服务器响应，服务器响应完成后，才继续向下执行。
- 浏览器发起的传统请求方式
- ajax发起的同步请求，由xhr对象发起，进行局部刷新页面。
异步请求：浏览器发送请求后，不需要等待服务器的响应，服务器响应后驱动函数执行。
ajax发送异步请求
- ajax设置是否异步请求
  
  xhr.open(“GET”, “AServlet”,async(是否为异步请求，默认为true))
  
  默认不设置时为true：异步
  
  false: 同步

4. get请求和post请求参数

get请求携带请求参数是
直接写在请求路径后面

xhr.open(“get”,“HelloServlet?name=lucy&age=18”);
post请求携带请求参数

需要设置请求头来提交请求参数，进行数据处理，以表单的方式提交。
```
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send("uname=ww&pwd=456");
```

5.ajax请求响应数据格式

响应数据为一个对象时

xhr对象相应回来的内容为文本或XML
- 1 设置响应内容类型为“text/plain(纯文本);charset=utf-8;”
  
  // (application/json;charset=utf-8)JSON格式字符串专用，后面使用JSON格式字符串可以设置为这个格式
- 2 通过xhr对象拿到响应数据 var text = xhr.responseText;
  
  重写对象的tostring后（{格式为：“name”:“zs”, “age”: 18, “sex”: “男”};），拿到的响应的数据为字符串
- 3 通过调用js中的全局函数eval（val），将字符串变成可运行的脚本,即可拿到e对象
```
var val  = "var  e = " + text;
```
响应数据为集合

例如集合中存储的为多个对象
- 1 设置响应内容类型为“text/plain(纯文本);charset=utf-8;”
- 2 通过xhr对象拿到响应数据 var text = xhr.responseText;
- 3 拿到的响应的数据 text 为字符串 [ 对象1，对象2，…]
- 4 通过调用js中的全局函数eval（val），将字符串变成可运行的脚本,即可拿到list集合
```
var val  = "var  list = " + text;
```
- 根据list集合的索引等可以拿到里面的值
响应数据为json格式字符串
- 使用工具类（gson，fastjson等）可以直接将拿到的Java对象变为js格式对象
- Gson gson = new Gson() // 创建Gson实例化对象
- String s = gson.tojson(e); //将Java对象变为js对象格式的字符串
  
  格式为：{“name”:“zs”, “age”: 18, “sex”: “男”};为特殊格式的字符串，即JSON格式的字符串
- 在Ajax中请求格式体中调用 JSON.parse(text); 将字符串解析为js对象
  
  注意：必须是JSON格式的字符串（如{“name”:“zs”, “age”: 18, “sex”: “男”};），才满足转换。
```
var parse = JSON.parse(text);
```