Ajax学习笔记

已于 2022-06-24 17:07:13 修改
阅读量363 收藏
点赞数
分类专栏： html css javascript 文章标签： ajax 学习 前端
于 2022-06-24 17:01:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53737524/article/details/125246887
版权

(100条消息) Ajax 请求的五大步骤_没有天赋全靠手打的博客-CSDN博客_ajax请求的五个步骤

 连接在同一个局域网

 navicat可以将数据转化为sql语句

 

 四种提交request的方式：

url，超链接，form表单，还有js提交请求

传统方式：提交一下，就会全部刷新一遍

原来提交的时候，如果一提交表单之后，界面就会刷新，用户原来的体验就会断掉

Ajax请求可以只刷新部分的界面，不会刷新整个界面

 可以多个线程，并不会之间相互去影响

异步：类似于多线程并发

 (108条消息) console.log有什么作用_hellowindowns的博客-CSDN博客_console.log()的作用

(108条消息) 常见的HTTP状态码(HTTP Status Code)说明_dufufd的博客-CSDN博客_status_code

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload=function (){
        var sub = document.getElementById("submit")
        sub.onclick = function (){
            // 构建xhr
            var xhr = new XMLHttpRequest()
            xhr.onreadystatechange = function (){
                //    回调函数会被执行多次，0 -> 1 1->2 2->3 3->4
                //     console.log(xhr.readyState)
                // if (this.readyState==4) {
                //     console.log("结束进程")
                // }
                // console.log(this.status)
                // alert(this.responseText)
                if (this.readyState == 4) {
                    var elementById = document.getElementById("divid");
                    elementById.innerText = this.responseText;
                }
            }
            //第三步开启通道
            xhr.open("GET","/ajax/ajaxrequest1",true)
            // 第四步发送请求
            xhr.send()
        }
    }
</script>

<!--点击按钮之后，发送ajax请求-->
<input type="button" id="submit">
<div id="divid"></div>
</body>
</html>

后端代码 

package com.wsy;

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

@WebServlet("/ajaxrequest1")
public class AjaxDemo extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//        String s = null;
//        s.toString();
        PrintWriter out = resp.getWriter();
        out.print("!!!!!nihaoa");

    }
}

readystate说的是ajax响应的状态值有五个 0 -1 -2 -3 -4 

而state说的是返回的状态值有200（表示的是成功）404表示的是找不到资源500表示后端代码有一些错误

ajax的核心对象就是XMLHttpreqquest的对象的responsetext响应的可能有多种，但是这里获得都是文本的形式

ajax的四个步骤：

第一步就是注册XMLHttpRequest的对象，下一步就是注册回调函数，第三步是用open函数来开启通道，下一步是调用send来发送请求

ajax提交数据：

最好采用onchange之后直接去写回调函数

get提交数据格式是url?name=value&name=value

获取ajax的请求数据

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function (){
     document.getElementById("buttons-hbox") .onclick = function (){
         var xhr = new XMLHttpRequest();
         //注册回调函数
         xhr.onreadystatechange = function (){
             if (this.readyState == 4) {
                 if (this.status == 200) {
                     alert(this.responseText)
                         var myspan =document.getElementById("myspan");
                         myspan.innerText = this.responseText;
                         console.log(this.status)
                     document.getElementById("mydiv").innerHTML = xhr.responseText

                 }else{
                     alert(this.status)
                 }
             }
         }
         xhr.open("GET","/ajax/ajaxrequest02?user=wsy&password=lz",true);
         xhr.send();
         // xhr.open("GET","/ajax/ajaxrequest1",true)
         // // 第四步发送请求
         // xhr.send()
     }
  }
</script>
<input type="button" id="buttons-hbox">
<span id="myspan"></span>
<div id="mydiv"></div>
</body>
</html>

后端代码

package com.wsy;

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

@WebServlet("/ajaxrequest02")
public class AjaxDemo02 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String user = req.getParameter("user");
        String password = req.getParameter("password");
        System.out.println("user="+user+"password="+password);
        resp.getWriter().print("user="+user+"password="+password);
    }
}

自定义的数据的上传、

前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
  window.onload = function (){
     document.getElementById("buttons-hbox") .onclick = function (){
         var xhr = new XMLHttpRequest();
         //注册回调函数
         xhr.onreadystatechange = function (){
             if (this.readyState == 4) {
                 if (this.status == 200) {
                     alert(this.responseText)
                         var myspan =document.getElementById("myspan");
                         myspan.innerText = this.responseText;
                         console.log(this.status)
                     document.getElementById("mydiv").innerHTML = xhr.responseText

                 }else{
                     alert(this.status)
                 }
             }
         }
         xhr.open("GET","/ajax/ajaxrequest02?user="+document.getElementById("username").value+"&password="+document.getElementById("password").value,true);
         xhr.send();
         // xhr.open("GET","/ajax/ajaxrequest1",true)
         // // 第四步发送请求
         // xhr.send()
     }
  }
</script>
username<input type="text"  id="username"><br>
password<input type="password"  id="password"><br>
<input type="button" id="buttons-hbox">
<span id="myspan"></span>
<div id="mydiv"></div>
</body>
</html>

后端

package com.wsy;

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

@WebServlet("/ajaxrequest02")
public class AjaxDemo02 extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String user = req.getParameter("user");
        String password = req.getParameter("password");
        System.out.println("user="+user+"password="+password);
        resp.getWriter().print("user="+user+"password="+password);
    }
}

 大部分的浏览器都已经不存在Ajax GET的请求缓存问题

GET请求的结果会被缓存起来

第一次加载比较慢。第二次加载出来之后 图片之类的资源直接被缓存在浏览器里面了 post不会被浏览器缓存 路径一模一样就会走缓存 只要路径有所变化 就不会走缓存

优点是：可以直接从浏览器上面拿到资源，速度快

缺点是拿不到实时的资源

浏览器走缓存条件：

第一是一个GET请求第二个是路径没有发生变化

谷歌浏览器就不会走缓存，走缓存之后就不会加载后台的程序

解决办法：给请求的路径加一个时间戳，这个时间戳是随时变化，这样路径就会发生变化，那么就不会走缓存

发送Ajaxpost 请求:

前后端处理的方式不一样就会发出来405的错误，前端使用的是get请求后台使用的是post的请求就会发生这样的错误

 前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采用ajax-post的方法去发送请求</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        document.getElementById("mybtn").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("mybtn").innerText=this.responseText
                    }else {
                        alert(this.status)
                    }
                }
            }
            xhr.open("POST","/ajax/ajaxrequest03",true)
            xhr.send()
        }
    }
</script>
<button id="mybtn">发送post请求</button>
<div id="mydiv"></div>

</body>
</html>

后端

package com.wsy;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajaxrequest03")
public class AjaxDemo03 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().print("hello,world!");
    }
}

post提交数据的方式

放在send函数的小括号当中会自动进行提交

 但是这样是存在一定的问题的 ->后台拿不到数据

<form enctype="application/x-www-form-urlencoded"></form>

通过上面的那句话拿到后面application这个话

不加

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")

send里面的数据发送不过去，只有加上这句话才可以

前端代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>采用ajax-post的方法去发送请求</title>
</head>
<body>
<script type="text/javascript">
    window.onload = function (){
        document.getElementById("mybtn").onclick = function (){
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function (){
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        document.getElementById("mydiv").innerText=this.responseText
                    }else {
                        alert(this.status)
                    }
                }
            }
            xhr.open("POST","/ajax/ajaxrequest03",true)
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
            xhr.send("username="+document.getElementById("username").value+"password="+document.getElementById("password").value)
        }
    }
</script>
USERNAME<input type="text" id="username">
PASSWORD<input type="text" id="password">
<button id="mybtn">发送post请求</button>
<div id="mydiv"></div>
<form enctype="application/x-www-form-urlencoded"></form>
</body>
</html>

后端代码

package com.wsy;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/ajaxrequest03")
public class AjaxDemo03 extends HttpServlet {
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String username = req.getParameter("username");
        String password = req.getParameter("password");
        System.out.println("username="+username+"password="+password);
        resp.getWriter().print("username="+username+"password="+password);
    }
}

这里必须还是得有这个&不然还是得出错 

王墨鱼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
记录一下http发起请求XHR状态显示（错误：已阻止）的原因
qq_16785561的博客
11-17 1883
360浏览器添加的广告拦截插件，网站访问地址为带端口号的地址（http://127.0.0.1:5500/），post传输参数带base64超长的情况下，请求会显示如下图，状态栏提示（错误：已阻止）出现这种情况可能是浏览器把带端口号的访问路径，路径携带参数，传输超长的数据导致。
xhr.send()老是出错，这问题怎么解决
hpjhgx的博客
05-11 860
js 拦截网络请求 进行预处理
岁月染过的梦的博客
02-10 2693
js 网络请求拦截器 xhr和fetch请求拦截
ajax 阻止默认提交,jQuery验证插件：在对ajax调用servlet时，submitHandler不会阻止默认提交-返回false无效...
weixin_31695145的博客
08-05 282
我有一个使用jquery和servlet的简单表单。jQuery对Servlet进行Ajax调用，然后Servlet进行一些服务器端计算，然后通过jQuery在同一页面上显示结果。我不希望表单进行默认的提交(并转到servlet)，因为我想停留在同一页面上并动态显示结果。它完全按照我想要的方式工作：HTML：jQuery的：form.submit (function(event) {$.ajax(...
submit 不触发ajax,提交表单不jQuery的AJAX调用停止提交表单不jQuery的AJAX调用停止(submit fo...
weixin_31207855的博客
08-05 268
我有以下代码：$.ajax({type: "POST",async: false,url: "CheckIdExist",data: param,success: function(result) {if (result == true){return false;}},error: function(error) {alert(error);return false;}});如果AJAX返回值为...
ajax学习笔记
11-30
ajax学习笔记。。。。。。。。。。。。。。。。。。。。。。
Ajax学习笔记整理
10-22
Ajax: Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据
jQuery+AJAX学习笔记
10-10
jQuery+AJAX学习笔记
16ajax学习笔记1
08-08
在本篇16ajax学习笔记1中，我们将探讨Ajax的基础概念、使用方法以及jQuery库中的Ajax实现。 1、发送请求： Ajax的首要任务是创建XMLHttpRequest对象，这是浏览器提供的API。在JavaScript中，我们可以通过new ...
ajax问题
斜光的博客
05-31 403
ajax的写法 xhr.readyState 未初始化，还没有调用send()方法 载入，已调用send()方法 载入完成，send()方法执行完成，已经接收到全部响应内容 交互，正在解析响应内容 完成，响应内容解析完成，可以在客户端调用 const xhr = new XMLHttpRequest(); xhr.open("get", "/api", true); xhr.onreadystatechange = function() { if (xhr.readyState === 4 &
网页报错404原因及解决方法
qq_63665506的博客
03-11 3万+
网页报错404原因及解决方法
关于xhr.send( noContent || s.data == null ? null : s.data );错误解决
求知路上的同行者的博客
03-26 4748
关于xhr.send( noContent || s.data == null ? null : s.data );错误解决 报错代码：xhr.send( noContent || s.data == null ? null : s.data ); 我在js中写好代码之后，页面加载的时候就会报上述的错误，我检查了好几遍代码都没有错误，我也是直接懵了，然后就一直百度检查，上面都是各种各样的解决办法，...
JS 小坑 - AJAX请求的小坑，请求接口404
Yuval的博客
11-18 1555
背景：公司需要帮助其他项目修改源码，但是跑起来发现无法正常发送请求，请求全部为404状态。后端也确定了对请求的接口进行了处理。前端js设置的url也看起来很正常。 思考： 1.确认后端接口的地址（确定了代表后端是没有问题的） 2.404代表找不到接口，那么就要从前端入手了，一般都是url出问题。 解决： 在JavaScript中看到AJAX请求的地址没有异样，对了几遍接口也是没问题的。 ...
代理请求： Request failed with status code 404
热门推荐
m0_60237095的博客
11-14 5万+
第一中可能：React中将你安装的proxy 或者是 createProxyMiddleware重新安装一遍 可能是因为 版本过低的原因 vue中包这种错误： 网上找了很多例子，都无法解决这个问题，无意中看到一篇文章，原来是与mock冲突，在main.js中将mock注释掉即可。 在公司后台还没有开发完成的情况下，前端使用json-sever搭建mock服务器，模拟本地json数据。具体步骤参照具体看此文章，文章写得很好很详细，根据文章步骤即可。 另一种原因： 用postman..
登陆的js文件
qq_36109477的博客
12-19 310
//登陆验证方法 function login(){ var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { alert("用户名不能为空"); return fal...
AJAX的send()出现404not found
weixin_54574094的博客
06-07 899
在Idea上运用AJAX+servlet进行异步操作。当鼠标焦点离开username的输入框后，XMLHTTPRequest向服务器发送请求，从而判断该账号是否存在，并且返回前端进行提示。在xmlhtto.send()方法中出现Failed to load resource: the server responded with a status of 404（）的异常。 如下图所示： 对应代码： 原因分析： 说明此时的路径出现了问题。即发送的路径有问题，这里/testuname是路径。首先检查是否与s
前端加载404(Not Found)问题常用的解决方法
你好！我是派大星，一个热爱分享的个人博客作者。我的博客致力于分享关于前端开发的知识、见解和经验。通过我的文章，实用技巧和个人心得。无论是解决问题、获取新知识，还是激发创造力和热情，我的目标是为读者提供有价值的内容和启发思考的观点。
04-19 9278
前端404问题是指在页面中访问不存在的资源时出现的页面404错误
Ajax学习笔记pink老师
最新发布
07-29
您好！对于学习Ajax，我可以为您提供一些学习笔记。以下是一份简要的Ajax学习笔记，希望对您有所帮助： 1. 什么是Ajax？ - Ajax全称为Asynchronous JavaScript and XML（异步JavaScript和XML），是一种用于创建交互式Web应用程序的技术。 - 它通过在后台与服务器进行数据交换，实现在不刷新整个页面的情况下更新部分页面内容。 2. Ajax的优点： - 异步处理：可以在后台发送和接收数据，而无需刷新整个页面。 - 提高用户体验：通过部分更新页面内容，可以提供更快的响应时间和更流畅的用户体验。 - 减轻服务器负担：只更新需要的部分内容，减少了不必要的数据传输和服务器负载。 3. Ajax的基本原理： - 使用XMLHttpRequest对象向服务器发送请求，并接收响应。 - 通过JavaScript在前端处理响应数据。 - 更新页面内容，以显示最新的数据。 4. Ajax的核心技术： - XMLHttpRequest对象：用于与服务器进行数据交换。 - JavaScript：用于处理响应数据和更新页面内容。 - XML或JSON：用于传输数据格式。 5. Ajax的使用步骤： - 创建XMLHttpRequest对象。 - 定义请求类型、URL和是否异步。 - 发送请求并接收响应。 - 处理响应数据并更新页面内容。 6. 常见的Ajax框架和库： - jQuery：一个流行的JavaScript库，提供了简化Ajax开发的方法和函数。 - Axios：一个基于Promise的HTTP客户端，用于浏览器和Node.js。 - Fetch API：一种用于发送和接收网络请求的新标准。 这只是Ajax学习的一些基本概念和步骤，您可以进一步深入学习Ajax的相关知识和实践。希望这些笔记对您有所帮助！如有更多问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值