当前位置： 首页>大数据>正文

AJAX概述

大数据2024-10-20 05:16:02

AJAX（Asynchronous Javascript And Xml）

百度关于ajax的介绍

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: HTML 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

AJAX本质

  • AJAX不能称为一种技术，它是多种技术的综合产物。
  • AJAX代码属于WEB前端的JS代码。和后端的java没有关系，后端也可以是php语言，也可以是C语言。
  • AJAX可以让浏览器发送一种特殊的请求，这种请求可以是：异步的

为什么要发送异步的请求

我们来假设一下这样一个业务场景：

在互联网开荒的2G时代，Jack非常喜欢在知名二次元网站Bilibili上观看电影，有一天，Jack在B站观看《肖申克的救赎》这部影片时，界面弹出一个小框，需要大会员才能观看完整电影，Jack二话不说，立刻冲了一个大会员，并进行登录，如果此时我们重新加载页面，Jack当前电影的缓存就要重新从0加载，让他一夜回到解放前。此时如果登录会员账户这个操作不会影响已经加载好的网页，那么Jack的用户体验就会提高许多，我们可以用ajax发送异步请求来解决这个问题。

异步与同步的区别

  • 什么是异步，什么是同步？
    • 假设有t1和t2线程，t1和t2线程并发，就是异步。
    • 假设有t1和t2线程，t2在执行的时候，必须等待t1线程执行到某个位置之后t2才能执行，那么t2在等t1，显然他们是排队的，排队的就是同步。
    • AJAX是可以发送异步请求的。也就是说，在同一个浏览器页面当中，可以发送多个ajax请求，这些ajax请求之间不需要等待，是并发的。

AJAX的效果

  • AJAX 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
  • AJAX可以更新网页的部分，而不需要重新加载整个页面。（页面局部刷新）
  • AJAX可以做到在同一个网页中同时启动多个请求，类似于在同一个网页中启动“多线程”，一个“线程”一个“请求”。
  • AJAX概述,第1张
    对AJAX异步请求的理解.png

AJAX同步与异步的区别

  • AJAX同步请求
  • AJAX概述,第2张
    AJAX同步请求.png
  • AJAX异步请求
  • AJAX概述,第3张
    AJAX异步请求.png

XMLHttpRequest对象

  • XMLHttpRequest对象是AJAX的核心对象，发送请求以及接收服务器数据的返回，全靠它了。

  • XMLHttpRequest对象，现代浏览器都是支持的，都内置了该对象。直接用即可。

  • 创建XMLHttpRequest对象

    • var xhr = new XMLHttpRequest();

  • XMLHttpRequest对象的方法

方法 描述
abort() 取消当前请求
getAllResponseHeaders() 返回头部信息
getResponseHeader() 返回特定的头部信息
open(method, url, async, user, psw) 规定请求method：请求类型 GET 或 POSTurl：文件位置async：true（异步）或 false（同步）user：可选的用户名称psw：可选的密码
send() 将请求发送到服务器，用于 GET 请求
send(string) 将请求发送到服务器，用于 POST 请求
setRequestHeader() 向要发送的报头添加标签/值对
  • XMLHttpRequest对象的属性
属性 描述
onreadystatechange 定义当 readyState 属性发生变化时被调用的函数
readyState 保存 XMLHttpRequest 的状态。0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪
responseText 以字符串返回响应数据
responseXML 以 XML 数据返回响应数据
status 返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"
statusText 返回状态文本（比如 "OK" 或 "Not Found"）

AJAX GET请求

AJAX请求四步法

  1. 第一步：创建AJAX核心对象

    我们通常页面加载完毕，并且某个事件发生后才需要发送ajax请求，显然，这部分代码要在具体事件注册函数中

    var xhr = new XMLHttpRequest();

  2. 第二步：注册回调函数

    onreadystatechange函数在readystate属性变化时调用，

    具体的readystate属性值对应的是，发送请求后服务器对该请求的处理所处的一个阶段，见下图

AJAX概述,第4张
XMLHttpRequest的readyState属性.png

我们通常在readystate == 4时（请求已完成且响应已就绪的）注册好相应的函数

通常，我们还会使用http状态码status来选择响应成功之后进行的操作

xhr.onreadystatechange = function(){
    if (this.readyState == 4) {
        if (this.status == 200) {
           
        }else{
            alert(this.status)
        }
    }
}

  1. 打开服务器与浏览器之间的通道

    xhr.open("GET", "/项目名/请求路径?name=value&name=value", true)
// true --> 开启异步
// false --> 开启同步

  2. 发送请求

     xhr.send()

AJAX get请求如何提交数据呢？

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

后端处理AJAX的GET请求

与正常处理前端发送的请求一致

@WebServlet("/前端访问的路径")
public class AjaxRequest2Servlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        // 设置响应的内容类型以及字符集
        response.setContentType("text/html;charset=UTF-8");
        // 获取响应流
        PrintWriter out = response.getWriter();
        // 响应
        out.print("<font color='red'>后端处理AJAX的get请求</font>");
    }
}

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()
    • 也可以随机数+时间戳....

AJAX POST请求

AJAX POST请求和GET请求的代码区别？只是前端代码有区别，后端代码没有区别

  1. AJAX的post请求需要提前设置好请求头

    // 设置请求头的内容类型。模拟form表单提交数据
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")

  2. send()发送请求的时候需要将参数信息写入

    // 获取表单中的数据
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// send函数中的参数就是发送的数据，这个数据在“请求体”当中发送。    
xhr.send("username="+username+"&password="+passwor

https://www.xamrdz.com/bigdata/7br1995200.html

相关文章：