异步请求ajax技术的理解

最新推荐文章于 2022-03-03 21:34:38 发布

改变自己2022

最新推荐文章于 2022-03-03 21:34:38 发布

阅读量310

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/qq_32527287/article/details/105346047

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

百度百科的解释：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

ajax是一门前端技术。此处主要是需要理解ajax的功能。

当我们构建一个网页，我们不需要每次都刷新整个页面。就比如，百度搜索框，我输入ajax时，会有一些关联提示。

这就是ajax技术的运用，输入时，没有刷新整个页面，而只是局部调用后台业务接口，处理之后显示。

ajax的对象

ajax的使用也很简单，就是ajax原生的对象 XMLHttpRequest 的使用。

var xmlhttp = new XMLHttpRequest();

向服务端发送请求

使用该对象的open() send()

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

获得响应

responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

onreadystatechange 事件

可以通过改属性绑定一个函数，当readyState发生改变则调用该函数。

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

上面这些都是对ajax的底层的理解，现在各大前端框架，已经把ajax的使用封装起来，使用起来非常方便。

例如jQuery中的一些异步请求方法：

$.post() ：post方式请求

$.get() ：get方式请求

$.ajax() ：

$.getJSON()：

详细的https://www.jquery123.com/category/ajax/shorthand-methods/

一个简单使用：

前台ajax的使用代码,导入jQuery之后，调用jQuery.ajax()，组装正确的入参，就成功使用了ajax的异步调用。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>$Title$</title>
<%--    导入jquery代码，这个是已经下载到本地的--%>
    <script src="${pageContext.request.contextPath}/statics/jquery-3.4.1.js"></script>
<%--      ajax的简单运用--%>
    <script type="text/javascript">
      // onbur事件触发之后的执行逻辑
        function doOnBlur() {
          /*url:异步请求的url，向后端请求的地址
          data:传递给后端的参数，例如，此处把输入框的值传递过去
          success：请求成功之后的处理逻辑，一个函数*/
          jQuery.ajax({
            url:"${pageContext.request.contextPath}/doOnBlur",
            data:{name:jQuery("#ajaxName").val()},
            success:function (data) {
                alert(data)
                console.log(data)
            }
          });
        }
    </script>
  </head>


  <body>
<%--  输入框，绑定了一个事件，onblur--%>
  <input id="ajaxName" type="text" name="ajaxName" onblur="doOnBlur()" >


  <button onclick="doSearch()">搜索</button>


  </body>
</html>

改变自己2022

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
异步请求ajax技术的理解

百度百科的解释：Ajax 即“AsynchronousJavascriptAndXML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。ajax是一门前端技术。此处主要是需要理解ajax的功能。当我们构建一个网页，我们不需要每次都刷新整个页面。就比如，百度搜索框，我输入ajax时...
复制链接

扫一扫