异步请求技术--Ajax(教你彻底学会Ajax，关键细节，原生Ajax，JQuery Ajax及其应用案例详解，最易懂最细的图文讲解！！！ 建议收藏！已经更新完毕)

已于 2024-07-12 13:25:18 修改
阅读量1.1k 收藏 5
点赞数 30
文章标签： ajax okhttp android javascript 前端
于 2024-07-12 10:22:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74301606/article/details/140318223
版权

目录

1.什么是Ajax

1.1 一图胜千言

 2.Ajax的通信原理

3.原生Ajax应用实例-验证用户名是否存在

4.JQuery操作Ajax

 4.1 Ajax方法

4.1.1Ajax方法的应用实例

4.2 JQuery的get和post函数

4.2.1 get方法的应用实例

4.2.2 post方法的应用

4.3JQuery的getJSON方法

4.3.1 getJSON的方法应用

5.总结什么时候改用什么常用的方法

1.什么是Ajax

1. AJAX 即 "Asynchronous Javascript And XML"( 异步 JavaScript 和 XML)
2. Ajax 是一种浏览器 异步发起请求 ( 指定发哪些数据 ) ， 局部更新页面 的技术

Ajax在线3文档 重点是XHR创建 XHR请求 XHR响应！等

1.1 一图胜千言

 2.Ajax的通信原理

具体解释：如上图所示。

相对于传统的web应用。Ajax技术就是多了Ajax引擎也就是XMLHttpRequest对象。

当前端中的表单要发送数据给后端的时候，前端会首先创建一个XMLHttpRequest对象。

然后指定你要传送的数据，而非整个form表单。 通过Http请求将数据发送给后端。

只不过XMLHttpRequest对象发送数据的时候是异步的！

什么是异步：就是当前端发送数据给后端时，前端界面不需要对响应进行等待挂机状态，前端界面依然可以做自己的事，这是很重要的。

后端界面通过Http响应发送给前端的XMLHttpRequest对象，再通过事件绑定机制，局部刷新前端界面！

简而言之呢，就可以看出Ajax引擎对象，作为两者数据交换的中间人，帮我完成异步局部刷新，指定发送数据等等操作！

3.原生Ajax应用实例-验证用户名是否存在

1) 点击验证用户名 , 使用 ajax 方式， 服务端验证该用户名是否是king是的话就说名用户已经占用输出对应的json数据
2) 对页面进行局部刷新 , 显示返回信息
具体结果如图所示

前端代码 整个是在Tomcat中间键运行的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <script type="text/javascript">
        window.onload = function ()
        {
            let checkButton = document.getElementById("checkButton");
            checkButton.onclick = function(){
                //先创建XMLHttpRequest对象
                let xhr = new XMLHttpRequest();

                //获取用户填写的用户名
                let uname = document.getElementById("uname").value;

                //准备发送指定的数据
                xhr.open("GET","CheckUserServlet?username="+uname,true)

                //在send函数调用前,要为Ajax引擎对象绑定事件
                //改事件表示当数据发送变化时,会触发这个事件
                xhr.onreadystatechange = function(){
                    if(xhr.status == 200 && xhr.readyState == 4)
                    {
                        //把返回的Json数据发送到div上
                        document.getElementById("div1").innerHTML = xhr.responseText;
                        //console.log(xhr.responseText);
                        // console.log("xhr=",xhr);
                        let responseText = xhr.responseText;
                        if(responseText != "")
                        {
                             document.getElementById("myres").value = "用户名不可用";
                        }else
                        {
                            document.getElementById("myres").value = "用户名可用";
                        }
                    }

                }
                //真正发送Ajax-Http请求
                //如果是post请求，参数应该写在send(String)里面
                xhr.send() //用于GET请求

            }
        }
    </script>
</head>
<body>
<h1>用户注册</h1>
<form action="#" method="post">
    用户名字:<input type="text" name="username" id="uname">
    <input type="button" id = "checkButton" onclick="checkUser();" value="验证用户名">
    <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
    用户密码:<input type="password" name="password"><br/><br/>
    电子邮件:<input type="text" name="email"><br/><br/>
    <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>
package com.sn.servlet;

import com.google.gson.Gson;
import com.sn.entity.User;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author ygd
 */
public class CheckUserServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String username = req.getParameter("username");
        System.out.println("username="+username);
        resp.setContentType("text/html;charset=utf-8");
        //验证用户名是否为king
        if("king".equals(username)){
            User king = new User(100, "king", "ss@qq.com");
            //将king转换成字符串
            String json = new Gson().toJson(king);
            resp.getWriter().write(json);
        }else{
            //
            resp.getWriter().write("");

        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

相应的具体文档信息： 

 

4.JQuery操作Ajax

原生的JQuery所存在的一些问题：

1. 编写原生的 Ajax 要写很多的代码，还要考虑浏览器兼容问题，使用不方便。(比如低版本你的Ajax引擎对象都创建不起来)
2. 在实际工作中，一般使用 JavaScript 的库 ( 比如 Jquery) 发送 Ajax 请求，从而解决这个
问题。
jQuery 库拥有完整的 Ajax 兼容套件。其中的函数和方法允许我们在不刷新浏览器的情况下从服务器加载数据。
JQuery操作Ajax的文档 ：文档

 4.1 Ajax方法

1. $.ajax 常用参数

● url： 请求的地址
● type : 请求的方式 get 或 post
● data : 发送到服务器的数据。将自动转换为请求字符串格式
● success: 成功的回调函数 【就是当ajax请求被成功处理，且相应返回的时候】
● error: 失败后的回调函数
● dataType: 返回的数据类型 常用 json 或 text【告诉Ajax对象数据类型，可以更好地处理数据】

4.1.1Ajax方法的应用实例

案例要求：

1) 点击验证用户名 , 使用 ajax 方式， 服务端验证该用户名是否是king是的话就说名用户已经占用输出对应的json数据
2) 对页面进行局部刷新 , 显示返回信息
具体结果如图所示
和上面的原生案例一样的效果，只不过用JQuery的Ajax应用。
一些小细节：

1. //为了防止你发送json数据的时候浏览器会报错xml解析错误！，于是定义一个
resp.setContentType("text/json;charset=utf-8");//浏览器会优先支持text/html;text/xml版本，如果你不写的话，虽然你发送的是JSON数据，但是浏览器依然不会以JSON解析会出错。

2. JQuery使用Ajax操作时，后端发回给前端一个JSON字符串，在Ajax方法中的succcess属性中的data参数会将JSON字符串自动转换成JSON对象。

前端界面展示：

后端代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script src="./script/jquery-3.6.0.min.js"></script>

  <script type="text/javascript">
  $(function (){
    //绑定事件
    $("#btn1").click(function () {
      //发出Ajax请求
      //指定参数的时候需要{}
      $.ajax({
        url:"/ajax/CheckUserServlet2",
        type:"POST",
        data:{
          //我们用JSON的数据格式去传送数据
          //传送日期是为了防止缓存，有些浏览器会觉得你的数据没变化，就不会发出POST请求
          username:$("#uname").val(),
          date:new Date()
        },
        error:function (){
          console.log("失败")
        },
        success:function (data,status,xhr){
          console.log("成功了");
          console.log("data=",data);
          console.log("status=",status);
          console.log("xhr",xhr);

          $("#div1").html(JSON.stringify(data))
          if("" === data.name)
          {
            $("#myres").val("用户名可用");
          }else
          {
            $("#myres").val("用户名以占用");
          }


        },
        dataType:"json"
      })
    })


  })


  </script>
</head>
<body>
<h1>用户注册-JQuery-Ajax技术</h1>
<form action="#" method="post">
  用户名字:<input type="text" name="username" id="uname">
  <input type="button" id = "btn1" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  用户密码:<input type="password" name="password"><br/><br/>
  电子邮件:<input type="text" name="email"><br/><br/>
  <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>
package com.sn.servlet;

import com.google.gson.Gson;
import com.sn.entity.User;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author sn
 */
public class CheckUserServlet2 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
       //得到我们的JQuery-Ajax的参数
        String username = req.getParameter("username");
        System.out.println("username="+username);
        Gson gson = new Gson();
        //为了防止你发送json数据的时候浏览器会报错xml解析错误！，于是
        resp.setContentType("text/json;charset=utf-8");//浏览器会优先支持text/html;text/xml版本
        if("king".equals(username)){
            User king = new User(100, "king", "ss@qq.com");
            resp.getWriter().write(gson.toJson(king));


        }else{
            //返回一个空的User
            User user = new User(1, "", "");
            resp.getWriter().write(gson.toJson(user));
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

4.2 JQuery的get和post函数

1. $.get 和 $.post 常用参数
● url: 请求的 URL 地址
● data: 请求发送到服务器的数据
● success: 成功时回调函数
● dataType: 返回内容格式，xml, html, script, json, text
2. 说明：$.get 和 $.post 底层还是使用$.ajax()方法来实现异步请求

4.2.1 get方法的应用实例

还是上述列子只改变前端代码

细节说明

1. $.get()默认是get请求，不需要指定请求的方式

2. 不需要指定参数名

3. 填写的实参顺序是 url,data,success回调函数，返回的数据格式

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script src="./script/jquery-3.6.0.min.js"></script>

  <script type="text/javascript">
  $(function (){
    //绑定事件
    $("#btn1").click(function () {
     

      $.get("/ajax/CheckUserServlet2",{
        username:$("#uname").val(),
        date:new Date()
      }, function (data,status,xhr){
        console.log("成功了");
        console.log("data=",data);
        console.log("status=",status);
        console.log("xhr",xhr);

        $("#div1").html(JSON.stringify(data))
        if("" === data.name)
        {
          $("#myres").val("用户名可用");
        }else
        {
          $("#myres").val("用户名以占用");
        }


      },"json")
    })


  })


  </script>
</head>
<body>
<h1>用户注册-JQuery-Ajax技术</h1>
<form action="#" method="post">
  用户名字:<input type="text" name="username" id="uname">
  <input type="button" id = "btn1" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  用户密码:<input type="password" name="password"><br/><br/>
  电子邮件:<input type="text" name="email"><br/><br/>
  <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.2.2 post方法的应用

就当对于上述的get方法只改变方法名即可，其余的都一样 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script src="./script/jquery-3.6.0.min.js"></script>

  <script type="text/javascript">
  $(function (){
    //绑定事件
    $("#btn1").click(function () {
      $.post("/ajax/CheckUserServlet2",{
        username:$("#uname").val(),
        date:new Date()
      }, function (data,status,xhr){
        console.log("成功了");
        console.log("data=",data);
        console.log("status=",status);
        console.log("xhr",xhr);

        $("#div1").html(JSON.stringify(data))
        if("" === data.name)
        {
          $("#myres").val("用户名可用");
        }else
        {
          $("#myres").val("用户名以占用");
        }

      },"json")
    })

  })


  </script>
</head>
<body>
<h1>用户注册-JQuery-Ajax技术</h1>
<form action="#" method="post">
  用户名字:<input type="text" name="username" id="uname">
  <input type="button" id = "btn1" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  用户密码:<input type="password" name="password"><br/><br/>
  电子邮件:<input type="text" name="email"><br/><br/>
  <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

4.3JQuery的getJSON方法

1. $.getJSON 常用参数
●  url: 请求发送的哪个 URL
● data: 请求发送到服务器的数据
● success: 请求成功时运行的函数
2. 说明： $.getJSON 底层使用 $.ajax() 方法来实现异步请求

4.3.1 getJSON的方法应用

相较于get和post请求更简洁少了dataType的属性！ 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <script src="./script/jquery-3.6.0.min.js"></script>

  <script type="text/javascript">
  $(function (){
    //绑定事件
    $("#btn1").click(function () {
     
      $.getJSON("/ajax/CheckUserServlet2",{
        username:$("#uname").val(),
        date:new Date()
      }, function (data,status,xhr){
        console.log("成功了");
        console.log("data=",data);
        console.log("status=",status);
        console.log("xhr",xhr);

        $("#div1").html(JSON.stringify(data))
        if("" === data.name)
        {
          $("#myres").val("用户名可用");
        }else
        {
          $("#myres").val("用户名以占用");
        }
      })
    })


  })


  </script>
</head>
<body>
<h1>用户注册-JQuery-Ajax技术</h1>
<form action="#" method="post">
  用户名字:<input type="text" name="username" id="uname">
  <input type="button" id = "btn1" value="验证用户名">
  <input style="border-width: 0;color: red" type="text" id="myres"><br/><br/>
  用户密码:<input type="password" name="password"><br/><br/>
  电子邮件:<input type="text" name="email"><br/><br/>
  <input type="submit" value="用户注册">
</form>
<h1>返回的 json 数据</h1>
<div id="div1"></div>
</body>
</html>

5.总结什么时候改用什么常用的方法

一般情况下用get和post方法，因为参数更少更简洁

如果是get请求返回的格式是JSON的最适合的是getJSON方法

Ajax方法比较大，参数很多，当然适用于所有范围，你习惯用的话也可以用

 本文章通过学习老韩视频的学习心得，如有版权问题，博主会及时删除。

欢迎小伙伴去看老师视频            老韩

酸奶代码
关注
  • 30
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS实现AJAX异步请求
qq_37035987的博客
07-01 697
3、打开通道，XMLHttpRequest对象的open(method,url,async,user,psw)方法，method：请求类型GET或POST，url请求路径，async异步true同步flase，user和psw为帐号和密码，可以不用填写，只有在服务器需要时才能访问的情况下填写。浏览器把请求交给浏览器内置对象XMLHttpRequest，由XMLHttpRequest对象发起，接收，解析服务器响应的数据，并把数据更新到浏览器指定的位置，从而实现页面局部刷新。服务器响应的 JSON格式数据。
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
热门推荐
qq_36609655的博客
07-02 1万+
第1章Html   Html：超级文本标记语言（HyperText Markup Language），在浏览器上运行的一种标记语言。 就是给文本加上含有语义的标签。 接下来应该学习更多具体语义标签： 一、结构（固定的结构）   &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;bod...
使用JavaScript和Ajax发出异步请求
loyos的专栏
08-03 1016
多数 Web 应用程序都使用请求/响应模型从服务器上获得完整的 HTML 页面。常常是点击一个按钮，等待服务器响应，再点击另一个按钮，然后再等待，这样一个反复的过程。有了 Ajax 和 XMLHttpRequest 对象，就可以使用不必让用户等待服务器响应的请求/响应模型了。本文中，Brett McLaughlin 介绍了如何创建能够适应不同浏览器的 XMLHttpRequest 实例，建立和发送
Js Ajax 异步请求
m0_69914454的博客
02-25 437
异步请求 什么是网络 物理层面将网络区分为几种网络结构： 局域网：工作在一个局部范围的多台计算机，一般计算机数量不会特别多； 大部分情况下都是几十台计算机 城域网：广义上指代工作在一个城市的计算机网络体系 广域网：广义上指代的全球互联网络 为什么要是用网络 使用网络，可以让工作在不同地域的计算机实现数据共享和数据通信，提高 生产力 网络数据共享 约定数据通信格式 网络协议：约定传输的是什么数据，什么数据格式 ip 地址：约定传输到那台计算机 网络端口：约定传输给那个程序 网络路径：
js原生 Ajax 简易异步请求
aj951225的博客
05-01 358
一、js原生请求过程 //兼容浏览器 var XML= null; // 根据浏览器的不同情况进行创建 if(window.XMLHttpRequest){ // 表示除IE外的其他浏览器 XML= new XMLHttpRequest(); }else{ // 表示IE浏览器 XML= new ActiveXObject('Microsoft.XMLHttp'); } var aj
AJAX异步请求&JSON数据格式
weixin_58545784的博客
07-17 3445
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。 JSON是一种轻量级的数据交换格式。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效益。
JQUERY插件--ajax搜索
03-14
**jQuery 插件：Ajax 搜索技术详解** 在现代网页开发中，实时、无刷新的用户体验已经成为提升网站质量的关键因素之一。jQuery 插件利用 Ajax（异步 JavaScript 和 XML）技术，可以实现在用户输入时动态搜索并显示...
jquery中文文档
07-16
jQuery简化了Ajax操作，`$.ajax()`, `$.get()`, `$.post()`等方法使异步请求变得易如反掌。`$.getJSON()`专门用于获取JSON数据，`$.load()`则用于加载远程HTML片段。 六、jQuery扩展 jQuery的插件生态系统丰富，...
web前端页面优化详解
weixin_44465584的博客
03-08 4767
一：web前端页面优化： 1.web页面的具体是什么？前身？ web前端页面作为呈现给用户看的页面，也就是浏览器可以解析出资源的通过一定程序而出现的页面，对于可以开发人员，很好懂：就是HTML（Hyper Text Markup Language【超文本标记语言】）+CSS（Cascading Style Sheets【表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集...
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4954
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
js写AJAX 异步调用 －实现回调
07-29
1、自己手写的javascript ajax异步调用 并回调js函数传参。 2、异步调用并实现xsl 解析xml
【Javascript】AJAX发送异步请求总结
weixin_42115131的博客
07-13 1534
本文介绍了AJAX发送异步请求的过程。
传统方式实现AJAX异步获取数据，局部刷新
luotuocihb的专栏
07-11 768
本文演示一个非AJAX实现局部刷新的小例子： 1.在ASP.NET项目中创建一个Web Form,命名为AJAXTest1.aspx，并在其中加入两个控件，如下：                   2.添加如下JS代码：         function btnClick() {             var xmlHttp = new ActiveXObject("M
AJAX （异步的JavaScript 和 XML）
最新发布
/*多学习 不油腻*/
04-17 1496
主要内容：1.AJAX用于异步交互、网页动态加载与局部更新。2.实现注册时用户名校验并提示的功能.3.使用jQeury实现AJAX（jQuery对AJAX技术进行了封装和简化）。
AJAX异步调用的登录验证JS
weixin_40898531的博客
06-16 1094
$(function(){ $('#login').click(loginAction); $('#count').blur(checkName); $('#password').blur(checkPassword);});function getKey()  {      if(event.keyCode==13){      $('#login').click();    }     }f...
ajax 获取一步数据,ajax异步获取数据
weixin_29505425的博客
08-05 320
function createXHR(){if( typeof XMLHttpRequest != "undefined" ){return new XMLHttpRequest();} else if( typeof ActiveXObject != "undefined" ){var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","M...
AJAX异步请求数据
Java学习博客
09-09 541
使用AJAX异步提交的方法向后台请求数据
js与ajax中异步调用的简单理解
zhoutengtengsonw的专栏
04-17 1979
function connectServer(callback) { if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHtt
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值