AJAX相关知识

com.dongsheng

于 2022-10-07 12:12:23 发布

阅读量218

点赞数 1

文章标签： ajax javascript servlet

本文链接：https://blog.csdn.net/m0_55381502/article/details/127192850

版权

1.AJAX概述

1）AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的。

2）AJAX可以做到页面的局部刷新

2.XMLHttpRequest对象

XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。
XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。

创建XMLHttpRequest对象

var xhr = new XMLHttpRequest();

XMLHttpRequest对象的方法
- open(method, url, async, user, psw) :
  
  method：请求类型 GET 或 POST
  
  url : 资源路径
  
  async：true（异步）或 false（同步）
  
  user：可选的用户名称
  
  psw：可选的密码
  
  send() ：将请求发送到服务器，用于 GET 请求
  
  send(string) ：将请求发送到服务器，用于 POST 请求

XMLHttpRequest对象的属性
- onreadystatechange : 定义当 readyState 属性发生变化时被调用的函数
- readyState : 保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
- responseText : 以字符串返回响应数据
- status : 返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"

3.AJAX GET请求

<script type="text/javascript">
    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            //1. 创建AJAX核心对象
            var xhr = new XMLHttpRequest();
            //2. 注册回调函数
            xhr.onreadystatechange = function(){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        // 通过XMLHttpRequest对象的responseText属性可以获取到服务器响应回来的内容。
                        // 并且不管服务器响应回来的是什么，都以普通文本的形势获取。（服务器可能响应回来：普通文本、XML、JSON、HTML...）
                        // innerHTML属性是javascript中的语法，和ajax的XMLHttpRequest对象无关。
                        // innerHTML可以设置元素内部的HTML代码。（innerHTML可以将后面的内容当做一段HTML代码解释并执行）
                        //document.getElementById("myspan").innerHTML = this.responseText
                        document.getElementById("mydiv").innerHTML = this.responseText
                        // innerText也不是AJAX中的，是javascript中的元素属性，和XMLHttpRequest无关。
                        // innerText也是设置元素中的内容，但是即使后面是一段HTML代码，也是将其看做一个普通字符串设置进去。
                        //document.getElementById("myspan").innerText = this.responseText
                    }else{
                        alert(this.status)
                    }
                }
            }
            //3. 开启通道
            xhr.open("GET", "/ajax/ajaxrequest2", true)
            //4. 发送请求
            xhr.send()
        }
    }
</script>

AJAX get请求如何提交数据呢？
- get请求提交数据是在“请求行”上提交，格式是：url?name=value&name=value&name=value....
- 其实这个get请求提交数据的格式是HTTP协议中规定的，遵循协议即可。

4. AJAX GET请求的缓存问题

对于低版本的IE浏览器来说，AJAX的get请求可能会走缓存。存在缓存问题。对于现代的浏览器来说，大部分浏览器都已经不存在AJAX get缓存问题了。
什么是AJAX GET请求缓存问题呢？
- 在HTTP协议中是这样规定get请求的：get请求会被缓存起来。
- 发送AJAX GET请求时，在同一个浏览器上，前后发送的AJAX请求路径一样的话，对于低版本的IE来说，第二次的AJAX GET请求会走缓存，不走服务器。
POST请求在HTTP协议中规定的是：POST请求不会被浏览器缓存。
GET请求缓存的优缺点：
- 优点：直接从浏览器缓存中获取资源，不需要从服务器上重新加载资源，速度较快，用户体验好。
- 缺点：无法实时获取最新的服务器资源。
浏览器什么时候会走缓存？
- 第一：是一个GET请求
- 第二：请求路径已经被浏览器缓存过了。第二次发送请求的时候，这个路径没有变化，会走浏览器缓存。
如果是低版本的IE浏览器，怎么解决AJAX GET请求的缓存问题呢？
- 可以在请求路径url后面添加一个时间戳，这个时间戳是随时变化的。所以每一次发送的请求路径都是不一样的，这样就不会走浏览器的缓存问题了。
- 可以采用时间戳："url?t=" + new Date().getTime()
- 或者可以通过随机数："url?t=" + Math.random()
- 也可以随机数+时间戳....

5. AJAX POST请求

// 4. 发送AJAX POST请求
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded") // 设置请求头的内容类型。模拟form表单提交数据。
// 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。
xhr.send("username="+username+"&password="+password)

6.AJAX乱码问题

对于tomcat9来说呢？
- 响应中文的时候，会出现乱码，怎么解决？
```
response.setContentType("text/html;charset=UTF-8");
```
- 发送ajax post请求的时候，发送给服务器的数据，服务器接收之后乱码，怎么解决？
```
request.setCharacterEncoding("UTF-8");
```

7.AJAX跨域问题

跨域是指从一个域名的网页去请求另一个域名的资源。比如从百度(百度一下，你就知道)页面去请求京东(京东(JD.COM)-正品低价、品质保障、配送及时、轻松购物！)的资源。
通过超链接或者form表单提交或者window.location.href的方式进行跨域是不存在问题的
在一个域名的网页中的一段js代码发送ajax请求去访问另一个域名中的资源，由于同源策略的存在导致无法跨域访问，那么ajax就存在这种跨域问题。

同源还是不同源

区分同源和不同源的三要素
- 协议
- 域名
- 端口
协议一致，域名一致，端口号一致，三个要素都一致，才是同源，其它一律都是不同源

8. AJAX跨域解决方案

方案1：设置响应头

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080"); // 允许某个
response.setHeader("Access-Control-Allow-Origin", "*"); // 允许所有

方案2：jsonp
- jsonp不是一个真正的ajax请求。只不过可以完成ajax的局部刷新效果。可以说jsonp是一种类ajax请求的机制。
- jsonp不是ajax请求，但是可以完成局部刷新的效果，并且可以解决跨域问题。
- 注意：jsonp解决跨域的时候，只支持GET请求。不支持post请求。
- ```
<script type="text/javascript" src="http://localhost:8081/b/jsonp2?fun=sayHello"></script>
// 通过导入javascript的标签中的src属性发送请求实现跨域
```

jQuery封装的jsonp

$.ajax({
    type : "GET",
    url : "跨域的url",
    dataType : "jsonp", // 指定数据类型
    jsonp : "fun", // 指定参数名（不设置的时候，默认是："callback"）
    jsonpCallback : "sayHello" // 指定回调函数的名字
                               // （不设置的时候，jQuery会自动生成一个随机的回调函数，
                               //并且这个回调函数还会自动调用success的回调函数。）
})