Ajax的基本操作

最新推荐文章于 2024-11-13 22:38:48 发布
最新推荐文章于 2024-11-13 22:38:48 发布
阅读量112 收藏 1
点赞数 1
分类专栏： 粉刷匠 文章标签： js ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44398687/article/details/112341087
版权
本文详细介绍了原生Ajax的GET和POST请求操作，包括创建XMLHttpRequest对象、设置请求方式、调用回调函数和发送请求。同时，通过示例展示了JQuery中使用ajax()、get()和post()进行Ajax请求的方法。强调了POST请求设置HTTP头的重要性。
摘要由CSDN通过智能技术生成

Ajax操作

一、原生Ajax

1.1 操作步骤
  1. 创建XMLHttpRequest对象。
  2. 设置请求方式。
  3. 调用回调函数。
  4. 发送请求。
1.2 GET请求操作

前台

<body>
    <div>
        <h4>请输入要添加的用户的信息：</h4><br>
        <form action="/addStudent" method="post">
            学号：<input name="studentNo" id="studentNo" type="text" onclick="clearInfo()" onblur="checkNo()"><span id="studentNo_info"></span><br><br>
            姓名：<input name="stuName" type="text"><br><br>
            年龄：<input name="stuAge" type="text"><br><br>
            <input type="submit" value="添加"><i></i><input type="reset">
        </form>
    </div>
</body>
<script type="text/javascript">
    function checkNo() {
        //1. 创建XMLHTTPRequest对象
        var xmlHTTP;
        if(window.XMLHttpRequest){
            //非IE
            xmlHTTP = new XMLHttpRequest();
        }else if (window.ActiveXObject){
            //IE
            xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
        }
        var parameter = document.getElementById("studentNo").value;
        console.log("parameter:"+parameter);
        //2. 设置请求方式
        xmlHTTP.open("get","/FindNO?studentNo="+parameter+"&time="+Math.random(),true);//添加时间随机参数，防止读取缓存
        //3. 调用回调函数
        xmlHTTP.onreadystatechange = function () {
            if(xmlHTTP.readyState == 4){
                var flag = xmlHTTP.responseText;
                if(xmlHTTP.status == 200){
                    //接收返回的内容
                    if(flag==1){
                        var obj = document.getElementById("studentNo_info");
                        obj.innerText = "学号已存在";
                    }
                }else{
                    alert("Ajax服务器返回错误");
                }
            }
        }
        //4. 发送请求
        xmlHTTP.send(null)
    }
    function clearInfo() {
        var obj = document.getElementById("studentNo_info");
        obj.innerText = "";
    }
</script>

GET请求的参数是在第二步的时候就拼接好了的，所以第四步发送时，send方法参数只需写null就好。

后台

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //1. 接收参数
        req.setCharacterEncoding("utf-8");//这种方式只对POST请求有效
        String studentNo = req.getParameter("studentNo");
        //2. 验证  注意:ajax请求处理完毕后，返回数据时使用PrintWriter输出流，且ajax默认返回原页面
        StudentService stuService = new StudentServiceImpl();
        Student student = stuService.findStuByNO(studentNo);
        resp.setContentType("text/html;charset=utf-8");//返回的值参数有中文的话，这个必须要有
        PrintWriter writer = resp.getWriter();
        if(student!=null){
            //用户名已存在
            writer.print(1);
        }else{
            //用户名不存在
            writer.print(0);
        }
    }
1.3 POST请求操作

前台

<body>
    <div>
        <h4>请输入要添加的用户的信息：</h4><br>
        <form action="/addStudent" method="post">
            学号：<input name="studentNo" id="studentNo" type="text" onclick="clearInfo()" onblur="checkNo()"><span id="studentNo_info"></span><br><br>
            姓名：<input name="stuName" type="text"><br><br>
            年龄：<input name="stuAge" type="text"><br><br>
            <input type="submit" value="添加"><i></i><input type="reset">
        </form>
    </div>
</body>
<script type="text/javascript">
    function checkNo() {
        //1. 创建XMLHTTPRequest对象
        var xmlHTTP;
        if(window.XMLHttpRequest){
            //非IE
            xmlHTTP = new XMLHttpRequest();
        }else if (window.ActiveXObject){
            //IE
            xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2. 设置请求方式
        xmlHTTP.open("post","/FindNo",true);//添加时间随机参数，防止读取缓存
        //3. 调用回调函数
        xmlHTTP.onreadystatechange = function () {
            if(xmlHTTP.readyState == 4){
                var flag = xmlHTTP.responseText;
                console.log("flag:"+flag);
                if(xmlHTTP.status == 200){
                    //接收返回的内容
                    if(flag==1){
                        var obj = document.getElementById("studentNo_info");
                        obj.innerText = "学号已存在";
                    }
                }else{
                    alert("Ajax服务器返回错误");
                }
            }
        }
        //4. 发送请求
        var parameter = document.getElementById("studentNo").value;
        var params = "studentNo="+parameter;//添加时间随机参数，防止读取缓存
        xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");//向请求添加HTTP头，POST有数据一定要加
        xmlHTTP.send(params)//有参数就写参数，没有直接写null
    }
    function clearInfo() {
        var obj = document.getElementById("studentNo_info");
        obj.innerText = "";
    }
</script>

tips:

！！！POST请求一定要设置HTTP头,不然后台接收不到传来的参数xmlHTTP.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

后台

参照GET方式

二、JQuery中的Ajax

三种方式：

  1. 用ajax()
<body>
    <div>
        <h4>请输入要添加的用户的信息：</h4><br>
        <form action="/addStudent" method="post">
            学号：<input name="studentNo" id="studentNo" type="text" onfocus="clearInfo()"><span id="studentNo_info"></span><br><br>
            姓名：<input name="stuName" type="text"><br><br>
            年龄：<input name="stuAge" type="text"><br><br>
            gao：<input type="text" id="hello">
            <input type="submit" value="添加"><i></i><input type="reset">
        </form>
    </div>
</body>
<script type="text/javascript" src="/js/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
    function clearInfo() {
        var obj = document.getElementById("studentNo_info");
        obj.innerText = "";
    }
    $(function () {
        $("#studentNo").blur(function () {
            var parameter = $(this).val();
            $.ajax({
                url:"/FindNo",
                data:"studentNo="+parameter+"&time="+Math.random(),
                type:"get",
                data_type:"text",
                success:function (result) {
                    if(result==1){
                        $("#studentNo_info").text("用户已存在");
                    }
                },
                error:function () {
                    alert("出错啦...")
                }
            });
        });
    })
</script>
  1. 用get()
$.get("/FindNo","studentNo="+parameter+"&time="+Math.random(),function (result) {
    if(result==1){
    	$("#studentNo_info").text("用户已存在");
    }
})
  1. 用post()
$.post("/FindNo","studentNo="+parameter+"&time="+Math.random(),function (result) {
    if(result==1){
    	$("#studentNo_info").text("用户已存在");
    }
})

get()和post()虽然简洁，但是 功能也没有ajax()多，例如，ajax还可以设置error错误回调函数。

厨子老林
关注
专栏目录
ajax基本步骤,基本Ajax操作的几个基本步骤
weixin_35914648的博客
08-05 1285
J avaScript的功能这么强~没想到啊！！AJAX 基本概念Asynchronous Javascript and XML一、典型流程1、 客户端触发异步操作区别于B->S->B的同步提交模式，有等待时间，异步式在客户操作同时又AJAX引擎与服务器交互，更加人性化和快捷2、 创建新的XMLHttpRequest对象AJAX技术的核心与服务器交互的类3、 与Server进行连接通过...
Ajax基本操作实例
09-27
**Ajax基本操作实例** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个页面的情况下与服务器交换数据并更新部分网页的技术。它通过JavaScript实现局部刷新，极大地提升了用户体验。在这个实例中，...
Ajax请求基本操作
兮动人
11-21 955
文章目录1. Ajax 请求的基本操作2. Ajax 设置请求参数3. Ajax 发送 post 请求4. Ajax - post 设置请求体5. Ajax 设置请求头信息 1. Ajax 请求的基本操作 使用 express 作为服务端响应 server.js //1. 引入express const express = require('express'); //2. 创建应用对象 const app = express(); //3. 创建路由规则 // request 是对请求报文的封装 /
AJAX基本操作(二)——post请求以及设置请求头信息
weixin_44691513的博客
02-03 3254
文章目录post请求:设置请求头信息 post请求: 后端代码: //1. 引入express const express = require('express'); //2. 创建应用对象 const app = express(); //3. 创建路由规则 // request 是对请求报文的封装 // response 是对响应报文的封装 app.post('/server', (request, response)=>{ //设置响应 response.setHeader(
AJAX操作
m0_46483779的博客
03-05 686
目录 AJAX请求的基本操作 要引入express框架 对其基本设置 在进行数据的AJAX操作 给AJAX设置请求参数 设置请求头信息 AJAX-服务器响应JSON数据 1-AJAX请求的基本操作 1.要引入express框架 2.对其基本设置 //1.引入express const express = require('express'); //2.创建应用对象 const app = express(); //3.创建路由规则 //request 是...
AJax的基本操作
LongKai_G
11-11 1332
Ajax AJAX： 1. 概念： ASynchronous JavaScript And XML 异步的JavaScript 和 XML 异步和同步：客户端和服务器端相互通信的基础上** 客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。 客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加
Ajax的基本运用
haibianxiatain的博客
04-25 3145
目录 1.什么是Ajax 2.为什么使用Ajax 3.Ajax的常用方法 3.1:open() 3.2:send() 4.Ajax常用属性 4.1:readyState 4.2:onreadystatechange 4.3:responseText 5:代码实战 1.什么是Ajax AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整.
Ajax请求的基本操作（get）
weixin_42541725的博客
02-16 7250
Ajax请求的基本操作（get）
Ajax 请求的基本步骤
m0_51528800的博客
05-20 3546
Ajax 请求的基本步骤 Ajax 请求的基本步骤一、Ajax的定义二、Ajax的工作原理三、Ajax请求的基本步骤1、创建XMLHttpRequest对象2、创建HTTP请求3、设置响应HTTP 请求状态变化的函数4、设置获取服务器返回数据的语句5、发送HTTP请求 一、Ajax的定义 Ajax：即异步 JavaScript 和XML。Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行
Ajax请求的基本操作（post）
weixin_42541725的博客
02-22 897
Ajax请求的基本操作（post）
ajax--XML、AJAX简介、express框架使用、AJAX操作的基本步骤
qq_51476492的博客
06-08 1121
AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。最开始AJAX进行数据交换的格式是XML，服务器端给客户端返回的结果就是XML格式的字符串，前端的JS在接到这个结果后对其内容进行解析，把数据提取出来并对数据进行处理。现在AJAX不用XML，而是JSON，JSON更加简洁，在数据转换方面更加容易。，比如服务器端将数据使用XML的形式传给客户端（前端），而HTML的作用是在。{“name”:“孙悟空”,“age”:18,“gender”:“男”}XML与HTML类似，不同的是HTML中。
ajax基本通用代码示例
10-22
在提供的文件中，给出了一个基本的AJAX通用代码示例。这段代码展示了如何通过JavaScript创建和发送XMLHttpRequest对象，用于异步地从服务器获取数据。下面详细解释代码中涉及的关键知识点。 1. 创建XMLHttpRequest...
Ajax概念及基本使用.rar_Ajax概念及基本使用_sidesbel
09-20
**Ajax 概念** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个网页的情况下，能够更新部分网页的技术。Ajax 不是新的编程语言，而是一种使用现有技术（如JavaScript、XML、HTML、CSS等）的新方法。...
Ajax基本原理.pdf
01-01
Ajax的基本原理包括以下几个关键组成部分： 1. **异步通信**：Ajax的关键特性是异步性，这意味着用户可以继续与页面交互，而后台数据请求和处理不会阻塞用户界面。通过XMLHttpRequest对象，JavaScript可以在后台与...
JQuery中Ajax的操作完整例子
10-20
本文主要介绍JQuery中Ajax操作的完整实例，包括JQuery中Ajax操作的基本概念和使用方法。同时，还涉及了Java软件开发中后台代码封装的框架、前台页面效果实现所用的JavaScript以及jQuery的优势，最后提出了处理大数据...
Mock.js生成随机数据，拦截 Ajax 请求
gklcsdn的博客
11-13 644
Mock.js提供了一个Mock.mockurl：要拦截的请求 URL，支持字符串或正则表达式。method：请求类型，比如"get""post"，不区分大小写。data：要返回的模拟数据格式。定义数据结构：通过 JSON 模板定义结构，并使用占位符生成随机数据。拦截请求：通过Mock.mock拦截指定的 URL 请求。自定义生成规则：通过 Mock.js 的占位符生成丰富的数据类型，包括字符串、数值、数组、日期、图片等。模拟延迟：使用Mock.setup模拟网络延迟。
Ajax 获取进度和中断请求
最新发布
weixin_44646763的博客
11-13 150
JS 中 Ajax 获取进度和中断请求
【JavaWeb】JSON介绍及入门案例
2302_78914800的博客
11-13 150
JSON是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，而且很多语言都提供了对JSON的支持，这使得JSON成为理想的数据交换格式JSON由键值对组成，并且由花括号包围。每个键由引号引起来，键和值之间使用冒号进行分隔，多组键值对之间使用逗号进行分隔"key1":12,"key5":{},"key6":[{},{}]
Javaweb—Ajax与jQuery请求
Java技术加油站的博客
11-13 288
浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作。Ajax: 全称Asynchronous JavaScript And XML，异步的JavaScript和XML。的技术，如：搜索联想、用户名是否可用的校验等等。的情况下，与服务器交换数据并。
Ajax基本对象详解：属性、方法与DOM操作
本资源主要介绍了Ajax基本对象的属性和方法，包括标准的XMLHttpRequest操作、用于处理XML的DOM元素属性以及遍历XML的DOM元素方法。此外，还提到了动态创建内容时所用的W3C DOM属性和方法。 Ajax，全称Asynchronous ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值