首页 > 其他分享 >Ajax

Ajax

时间：2024-05-12 22:45:04浏览次数：27  
标签：function 请求 AJAX Ajax html 服务器 data

Ajax笔记

1. Ajax简介

  • AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）。
  • AJAX不是一种新的编程语言，而是一种使用现有标准的新方法。它是一种用于从网页访问Web服务器的技术。
  • AJAX允许您在不重新加载页面的情况下向服务器发出请求。
  • AJAX可以与服务器通信，交换数据和更新页面，而无需刷新页面。
  • AJAX可以发送和接收各种格式的信息，包括JSON，XML，HTML和文本文件。
  • 使用ajax技术的网页，通过在后台服务器进行少量的数据交换，就可以实现异步局部更新。

简而言之，就是使用XMLHttpRequest对象与服务器进行通信。

AJAX的两个主要功能使您可以执行以下操作：

  • 向服务器发出请求，而无需重新加载页面
  • 从服务器接收和处理数据

2. AJAX如何工作？

为了执行AJAX通信，JavaScript使用一个XMLHttpRequest对象向服务器发出HTTP请求并作为响应接收数据。所有现代浏览器都支持该XMLHttpRequest对象。

AJAX通信原理图：

AJAX如何运作

3. AJAX操作步骤

  1. 网页中发生了一个事件（即页面已加载或单击了按钮）
  2. XMLHttpRequest对象由JavaScript创建
  3. XMLHttpRequest对象将请求发送到Web服务器
  4. 服务器处理请求
  5. 服务器将响应发送回网页
  6. 响应由JavaScript读取
  7. HTML DOM由JavaScript更新

总结：以上都是原生AJAX介绍

4、jQuery AJAX 方法

常用的jQuery AJAX 方法列表

方法 描述
$.ajax() 执行异步 AJAX 请求
$.post() 使用 AJAX 的 HTTP POST 请求从服务器加载数据
$.get() 使用 AJAX 的 HTTP GET 请求从服务器加载数据
load() 从服务器加载数据，并把返回的数据放置到指定的元素中

4.1、$.ajax()方法

jQuery.ajax(...)
        部分参数：
        url：请求地址,
        type：请求方式，GET、POST（1.9.0之后用method）,
        data：要发送的数据,
        success：成功之后执行的回调函数(全局),
        headers：请求头,
        contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8"),
        async：是否异步,
        timeout：设置请求超时时间（毫秒）,
        beforeSend：发送请求前执行的函数(全局),
        complete：完成之后执行的回调函数(全局),
        error：失败之后执行的回调函数(全局),
        accepts：通过请求头发送给服务器，告诉服务器当前客户端可接受的数据类型,
        dataType：将服务器端返回的数据转换成指定类型,
        "xml": 将服务器端返回的内容转换成xml格式,
        "text": 将服务器端返回的内容转换成普通文本格式,
        "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行,
        "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式,
        "json": 将服务器端返回的内容转换成相应的JavaScript对象,
        "jsonp": JSONP 格式使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数,

4.2、$.post()方法

$.post(url, [data], [successs], [type])

  • url:请求的URL地址
  • data:请求携带的参数
  • successs:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text,_default

4.3、$.get()方法

$.get(url, [data], [successs], [type])

  • url:请求的URL地址
  • data:请求携带的参数
  • successs:载入成功时回调函数
  • type:设置返回内容格式，xml, html, script, json, text,_default

4.4、通用方法

  1. html文件

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            },'json');
        });

        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery-server', {a:100, b:200}, function(data){
                console.log(data);
            });
        });

        $('button').eq(2).click(function(){
            $.ajax({
                //url
                url: 'http://127.0.0.1:8000/jquery-server',
                //参数
                data: {a:100, b:200},
                //请求类型
                type: 'GET',
                //响应体结果
                dataType: 'json',
                //成功的回调
                success: function(data){
                    console.log(data);
                },
                //超时时间
                timeout: 2000,
                //失败的回调
                error: function(){
                    console.log('出错啦!!');
                },
                //头信息
                headers: {
                    c:300,
                    d:400
                }
            });
        });
    </script>
</body>
</html>

  2. js文件

    //jQuery 服务
app.all('/jquery-server', (request, response) => {
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    // response.send('Hello jQuery AJAX');
    const data = {name:'尚硅谷'};
    response.send(JSON.stringify(data));
});

5、实例

案例一：鼠标离开输入框的时候，可以看到发出了一个ajax的请求

使用最原始的HttpServletResponse处理

  1. 编译一个html文件

    <html>
<head lang="en">
   <meta charset="UTF-8">
   <title>test_ajax01</title>
</head>
<body>

<script type="text/javascript">
    <!-- 获取时间戳 -->
   window.onload = function(){
       var myDate = new Date();
       document.getElementById('currentTime').innerText = myDate.getTime();
  };
	<!-- 获取地址 -->
   function LoadPage(){
       var targetUrl =  document.getElementById('url').value;
       console.log(targetUrl);
       document.getElementById("iframePosition").src = targetUrl;
  }

</script>

<div>
   <p>请输入要加载的地址：<span id="currentTime"></span></p>
   <p>
       <input id="url" type="text" value="https://www.baidu.com/"/>
       <input type="button" value="提交" onclick="LoadPage()">
   </p>
</div>

<div>
   <h3>加载页面位置：</h3>
   <iframe id="iframePosition" style="width: 100%;height: 500px;"></iframe>
</div>

</body>
</html>

  2. 编写一个AjaxController

    @Controller
public class AjaxController {

   @RequestMapping("/a1")
   public void ajax1(String name , HttpServletResponse response) throws IOException {
       if ("admin".equals(name)){
           response.getWriter().print("true");
      }else{
           response.getWriter().print("false");
      }
  }
}

  3. 导入jquery，编写index.jsp测试

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
 <head>
   <title>$Title$</title>
    <%-- 导入jquery --%>
  <%--<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>--%>
     <%-- 本地导入 --%>
   <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
     
   <script>
       function a1(){
           $.post({
               url:"${pageContext.request.contextPath}/a1",
               data:{'name':$("#txtName").val()},
               success:function (data,status) {
                   alert(data);
                   alert(status);
              }
          });
      }
   </script>
 </head>
 <body>

<%--onblur：失去焦点触发事件--%>
用户名:<input type="text" id="txtName" onblur="a1()"/>

 </body>
</html>

  4. 启动tomcat测试！打开浏览器的控制台，当我们鼠标离开输入框的时候，可以看到发出了一个ajax的请求！是后台返回给我们的结果！测试成功！

案例二：获取一个集合对象，展示到前端页面

  1. 创建实体类user.java

    @Data
@AllArgsConstructor
@NoArgsConstructor
public class User {
   private String name;
   private int age;
   private String sex;
}

  2. 创建一个集合对象

    @RequestMapping("/a2")
public List<User> ajax2(){
   List<User> list = new ArrayList<User>();
   list.add(new User("秦疆1号",3,"男"));
   list.add(new User("秦疆2号",3,"男"));
   list.add(new User("秦疆3号",3,"男"));
   return list; //由于@RestController注解，将list转成json格式返回
}

  3. 创建一个前端页面

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>test_ajax02</title>
</head>
<body>
<!-- 创建一个按钮 -->
<input type="button" id="btn" value="获取数据"/>
    
<!-- 创建一个由姓名、年龄和性别组成的表格 -->
<table width="80%" align="center">
   <tr>
       <td>姓名</td>
       <td>年龄</td>
       <td>性别</td>
   </tr>
    <!-- 通过tbody定义一个id选择器，用来展示数据-->
   <tbody id="content">
   </tbody>
</table>

<!-- 导入jquery -->
<script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
    
<script>
	<!-- 通过鼠标点击事件，发送post请求 -->
   $(function () {
       <!--点击事件-->
       $("#btn").click(function () {
           <!-- 发送post请求 -->
           $.post("${pageContext.request.contextPath}/a2",function (data) {
               console.log(data)
               var html="";
               for (var i = 0; i <data.length ; i++) {
                   html+= "<tr>" +
                       "<td>" + data[i].name + "</td>" +
                       "<td>" + data[i].age + "</td>" +
                       "<td>" + data[i].sex + "</td>" +
                       "</tr>"
              }
               $("#content").html(html);
          });
      })
  })
</script>
</body>
</html>

    成功实现了数据回显！

案例三：输入框后面存在实时提示

  1. 编译一个Controller

    @RequestMapping("/a3")
public String ajax3(String name,String pwd){
   String msg = "";
   //模拟数据库中存在数据
   if (name!=null){
       if ("admin".equals(name)){
           msg = "OK";
      }else {
           msg = "用户名输入错误";
      }
  }
   if (pwd!=null){
       if ("123456".equals(pwd)){
           msg = "OK";
      }else {
           msg = "密码输入有误";
      }
  }
   return msg; //由于@RestController注解，将msg转成json格式返回
}

  2. 编译写一个前端页面 login.jsp

    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
   <title>test_ajax03</title>
   <script src="${pageContext.request.contextPath}/statics/js/jquery-3.1.1.min.js"></script>
    
   <script>

       function a1(){
           $.post({
               url:"${pageContext.request.contextPath}/a3",
               data:{'name':$("#name").val()},
               success:function (data) {
                   if (data.toString()=='OK'){
                       $("#userInfo").css("color","green");
                  }else {
                       $("#userInfo").css("color","red");
                  }
                   $("#userInfo").html(data);
              }
          });
      }
       function a2(){
           $.post({
               url:"${pageContext.request.contextPath}/a3",
               data:{'pwd':$("#pwd").val()},
               success:function (data) {
                   if (data.toString()=='OK'){
                       $("#pwdInfo").css("color","green");
                  }else {
                       $("#pwdInfo").css("color","red");
                  }
                   $("#pwdInfo").html(data);
              }
          });
      }

   </script>
</head>
<body>
<p>
  用户名:<input type="text" id="name" onblur="a1()"/>
   <span id="userInfo"></span>
</p>
<p>
  密码:<input type="text" id="pwd" onblur="a2()"/>
   <span id="pwdInfo"></span>
</p>
</body>
</html>

    测试一下效果，动态请求响应，局部刷新

    image-20240512222439824

案例四：获取百度接口的小Demo

  1. 编写一个HTML文件

    <!DOCTYPE HTML>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
   <title>JSONP百度搜索</title>
    
    <!-- CSS样式 -->
   <style>
       #q{
           width: 500px;
           height: 30px;
           border:1px solid #ddd;
           line-height: 30px;
           display: block;
           margin: 0 auto;
           padding: 0 10px;
           font-size: 14px;
      }
       #ul{
           width: 520px;
           list-style: none;
           margin: 0 auto;
           padding: 0;
           border:1px solid #ddd;
           margin-top: -1px;
           display: none;
      }
       #ul li{
           line-height: 30px;
           padding: 0 10px;
      }
       #ul li:hover{
           background-color: #f60;
           color: #fff;
      }
   </style>
    
   
   <script>
       // 2.步骤二
       // 定义demo函数 (分析接口、数据)
       function demo(data){
           var Ul = document.getElementById('ul');
           var html = '';
           // 如果搜索数据存在 把内容添加进去
           if (data.s.length) {
               // 隐藏掉的ul显示出来
               Ul.style.display = 'block';
               // 搜索到的数据循环追加到li里
               for(var i = 0;i<data.s.length;i++){
                   html += '<li>'+data.s[i]+'</li>';
              }
               // 循环的li写入ul
               Ul.innerHTML = html;
          }
      }

       // 1.步骤一
       window.onload = function(){
           // 获取输入框和ul
           var Q = document.getElementById('q');
           var Ul = document.getElementById('ul');

           // 事件鼠标抬起时候
           Q.onkeyup = function(){
               // 如果输入框不等于空
               if (this.value != '') {
                   // ☆☆☆☆☆JSONPz重点☆☆☆☆☆☆☆☆
                   // 创建标签
                   var script = document.createElement('script');
                   //给定要跨域的地址 赋值给src
                   //这里是要请求的跨域的地址 我写的是百度搜索的跨域地址
                   script.src = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+this.value+'&cb=demo';
                   // 将组合好的带src的script标签追加到body里
                   document.body.appendChild(script);
              }
          }
      }
   </script>
</head>

<body>
<input type="text" id="q" />
<ul id="ul">

</ul>
</body>
</html>

标签：function,请求,AJAX,Ajax,html,服务器,data
From： https://www.cnblogs.com/magicYue/p/18188324

相关文章

  • AJAX
    AJAX刷新特点:异步提交,局部刷新前端代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><metaname="viewport"content="width=device-width,initial-......
  • .Net Razor Ajax Post Get处理
    Talkischeap,Showmethecode..cshtmlletpdata={"weight":50,"origin":originSel.value,"destination":destinationSel.value};letr=awaitaxios.post("/search?handler=list",pdata).catch(()=>null......
  • Ajax技术
    Ajax技术一、Ajax技术简介什么是Ajax？AJAX=异步JavaScript+XML。AJAX是一种用于创建快速动态网页的技术（客户端）。通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（......
  • Ajax
    AjaxAjax就是异步的JS和XMLAjax的一个最大的特点就是无需刷新页面便可向服务器传输或读写数据（又称无刷新更新页面），这一特点主要得益于XMLHTTP组件XMLHttpRequest对象。在不刷新页面的情况下，向服务器发送请求，获取数据进行处理。核心：XMLHttpRequest对象，提供发送HTTP请求和......
  • Ajax异步请求
    1.需求准备一个注册页面ajax.html,当鼠标点击输入框的时候提示“请输入用户名”，输入用户名后，点击输入密码或者其他空白处的时候提示“用户名可以使用”或者“用户名以重复，请重新输入用户名”。1.1准备页面1.2当鼠标点击输入框的时候提示“请输入用户名”（1）根据id获得input标签......
  • 快速了解AJAX
    1、AJAX的概念ajax的全称AsynchronousJavaScriptandXML(异步JavaScript和XML)。ajax是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新......
  • 介绍Ajax
    1.什么是Ajax基于web标签的html+css可以使用dom进行动态的显示和交互使用XML和XSLT(是一种用于将XML文档转换任意文本的描述语言)进行数据的交换和操作使用XMLHttpRequest进行异步的数据查询和检索等操作。。。2.什么是异步（Asynchr......
  • AJAX 原理
    一、AJAX原理-XMLHttpRequest定义：关系：axios内部采用XMLHttpRequest与服务器交互。好处：掌握使用XHR与服务器进行数据交互，了解axios内部原理。1.1使用XMLHttpRequest：步骤：1.创建XMLHttpRequest对象2.配置请求方法和请求url......
  • AJAX 入门
    一、AJAX概念和axios使用定义：概念：AJAX是浏览器与服务器进行数据通信的技术。怎么用AJAX？1.先使用axios[æk‘sioʊs]库，与服务器进行数据通信        基于XMLHttpRequest封装、代码简单、月下载量在14亿次        Vue、......
  • Django框架之Ajax基础
    一、JSON知识回顾1、什么是JSONJSON（JavaScriptObjectNotation）是一种轻量级的数据交换格式，通常用于在网络之间传输数据。它基于JavaScript的语法，但是独立于编程语言，因此几乎所有编程语言都支持解析和生成JSON数据。JSON数据采用键值对的形式来组织数据，其中键是字符串，值可以是......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99