ajax

时间：2021-04-23 00:01:36 阅读：26 评论：0 收藏：0 [点我收藏+]

Ajax

1 ajax概述

# 什么是ajax?
Asynchronous JavaScript and XML：异步的js或xml，以前用的比较多的是xml传递数据，现在基本用js传递数据
# 作用
局部刷新页面：当然单纯地使用原生的js做局部刷新如果碰到复杂的控件会相当麻烦，使用前端框架（layui，vue）会方便很多

2 js的ajax请求

注意事项

# 注意事项？
1 注：为什么低版本的ie不支持XMLHttpRequest？
因为最早开发网页动态脚本的是网景公司（已被甲骨文收购），微软公司觉得不错仿着做了一个
网页动态脚本语言，结果导致用不同的浏览器需要使用不同的脚本语言；最终万维网（W3C：经常
整一些技术规范的技术机构）确认了es特性，用的是JavaScript，其他公司开发浏览器也默认的
兼容JavaScript，只有微软这个头铁娃始终让ie浏览器坚持使用自己的脚本语言，虽然因为后来
大势所趋在新版本上妥协了，不过的ie的老版本就相当恶心了
?
2 注：为什么没有参数传递的时候要加一个随机唯一的无用参数？
因为浏览器缓存问题，如果你的请求地址每次发送都是不变的，浏览器会默认把第一次请求的数据
从缓存中拿出来给你，这样不管你怎么修改都是拿到第一次提交的数据
?
3 注：为什么不使用变量var，而使用变量let？
因为var是全局变量，直接绑定在window（属于BOM对象）上面的，而let是局部变量，在作用域中
用完即毁，下面关于var类型的注意说两点：
- 禁止在不同的js中用var来声明同一个变量名：
  因为如果一个页面需要引用多个js文件时，而这些js文件中又用var来声明同一个变量名，后面的
  变量值会覆盖掉之前的
- 禁止在if或for中使用var来声明变量，因为作为全局变量，出了if或for作用域还能使用
除了以上两点，var变量还是可以使用的，不过es6新加了let之后，每次使用var时会出现警告

2.1 get或post请求

前端页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的请求测试</title>
?
    <script>
        /* 错误信息编译 */
        ‘use strict‘;
?
        /* 请求发送 */
        function send(method){
            // 创建请求对象
            let xmlHttpRequest;
            if(window.XMLHttpRequest){
                // IE7+, Firefox, Chrome, Opera, Safari
                xmlHttpRequest = new XMLHttpRequest();
            }else{
                // IE6, IE5
                xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
            }
?
            switch (method) {
                case ‘get‘:
                    // 设置请求参数（‘请求方式‘,‘/上下文/请求路径?请求参数‘,开启)
                    xmlHttpRequest.open(‘get‘, ‘/myweb/ajax?time=‘+Math.random(), true);
                    // 请求发送（‘请求参数‘）
                    xmlHttpRequest.send();
                    break;
                case ‘post‘:
                    // 设置请求参数（‘请求方式‘,‘/上下文/请求路径‘,开启)
                    xmlHttpRequest.open(‘post‘, ‘/myweb/ajax‘, true);
                    /*
                     * 设置请求头
                     * 默认：application/x-www-form-urlencoded  --> 可上传文本数据
                     * 多元制：multipart/form-data  --> 可上传二进制数据（图片、视频、音频之类的）
                     */
                    xmlHttpRequest.setRequestHeader(‘Content-type‘,‘application/x-www-form-urlencoded‘);
                    // 请求发送（‘请求参数‘）
                    xmlHttpRequest.send(‘time=‘+Math.random());
                    break;
            }
?
            /*
             * 请求响应
             * readyState == 4 --> 响应已就绪
             * xmlHttpRequest.status == 200 --> 响应成功
             */
            xmlHttpRequest.onreadystatechange = function(){
                if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                    // 接收响应参数，用字符串接收，对象或数组转换成json字符串
                    let data = xmlHttpRequest.responseText;
                    // 数值渲染
                    document.getElementById(‘h2‘).innerText = data;
                }
            }
        }
    </script>
</head>
<body>
    <h2 id="h2">请用ajax填充我</h2>
    <button onclick="send(‘get‘)">get请求发送</button>
    <button onclick="send(‘post‘)">post请求发送</button>
</body>
</html>

后端业务

package com.qf.servlet;
?
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;
?
/**
 * ajax请求测试控制器
 */
@WebServlet("/ajax")
public class UserServlet extends HttpServlet {
?
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
?
        System.out.println("UserServlet get access");
        resp.getWriter().write("response success of get request");
    }
?
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
?
        System.out.println("UserServlet post access");
        resp.getWriter().write("response success of post request");
    }
}

3 jq的ajax请求

3.1 get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq的get请求测试</title>
?
    <!-- jQuery引入，大家可以引用自己的jQuery -->
    <script type="application/javascript" src="js/jquery-3.4.1.min.js"></script>
?
    <script>
        /* 页面加载完成后 */
        $(function(){
            // 添加按钮点击事件
            $(‘#btn‘).click(function(){
                // get请求发送
                let url = ‘/myweb/ajax?time=‘+Math.random();
                $.get(url, function(data){
                    // 响应数据渲染
                    $(‘#h2‘).text(data);
                });
            });
        });
    </script>
</head>
<body>
    <h2 id="h2">请用ajax填充我</h2>
    <button id="btn">get请求发送</button>
</body>
</html>

后端代码

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf-8");
    resp.setContentType("text/html;charset=utf-8");
?
    System.out.println("UserServlet get access");
    resp.getWriter().write("response success of get request");
}

3.2 post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的post请求测试</title>
?
    <!-- jQuery引入，大家可以引用自己的jQuery -->
    <script type="application/javascript" src="js/jquery-3.4.1.min.js"></script>
?
    <script>
        /* 页面加载完成后 */
        $(function(){
            // 添加按钮点击事件
            $(‘#btn‘).click(function(){
                // get请求发送
                let url = ‘/myweb/ajax‘;
                let data = {
                    name: ‘zhangsan‘,
                    password: ‘123456‘
                }
                $.post(url, data, function(data){
                    // 响应数据渲染
                    $(‘#h2‘).text(data);
                });
            });
        });
    </script>
</head>
<body>
    <h2 id="h2">请用ajax填充我</h2>
    <button id="btn">post请求发送</button>
</body>
</html>

后端代码

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    req.setCharacterEncoding("utf-8");
    resp.setContentType("text/html;charset=utf-8");
?
    String name = req.getParameter("name");
    String password = req.getParameter("password");
?
    System.out.println("UserServlet post access");
    resp.getWriter().write("name-->"+name+", password-->"+password);
}

3.3 ajax请求（推荐使用）

注意事项

- contentType: ‘application/json‘  
  请求内容转换成了json字符串格式，后端必须使用json相关jar解析才能使用，或者在SpringMVC框架中可以使用@RequestBody注解
  来转换
  = 可以去掉，这样后台就可以正常接收了，不过在restful风格中使用put请求时如果参数过多且格式有问题的话需要用到这个
- dataType: ‘json‘ 
  返回内容从json字符串格式转换成对象、数组或字符串，后端必须将数据转换成json字符串后才能返回，注意：在这里必须用相关jar包
  转换的json字符串才能使用，自己直接手写的不算，会跑到error中去

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js的ajax请求测试</title>
?
    <!-- jQuery引入，大家可以引用自己的jQuery -->
    <script type="application/javascript" src="js/jquery-3.4.1.min.js"></script>
?
    <script>
        /* 页面加载完成后 */
        $(function(){
            // 添加按钮点击事件
            $(‘#btn1‘).click(function(){
                // get请求发送
                $.ajax({
                    url: ‘/myweb/ajax?time=‘+Math.random(),
                    type: ‘get‘,
                    contentType: ‘application/json‘,
                    dataType: ‘json‘,
                    success: function(data){
                        $(‘#h2‘).text(data);
                    },error: function(){
                        // 跳转错误页面
                        console.log(‘error page‘);
                    }
                });
            });
?
            $(‘#btn2‘).click(function(){
                // post请求发送
                $.ajax({
                    url: ‘/myweb/ajax‘,
                    type: ‘post‘,
                    data: ‘time=‘+Math.random(),
                    contentType: ‘application/json‘,
                    dataType: ‘json‘,
                    success: function(data){
                        $(‘#h2‘).text(data);
                    },error: function(){
                        // 跳转错误页面
                        console.log(‘error page‘);
                    }
                });
            });
        });
    </script>
</head>
<body>
    <h2 id="h2">请用ajax填充我</h2>
    <button id="btn1">get请求发送</button>
    <button id="btn2">post请求发送</button>
</body>
</html>

后端代码

package com.qf.servlet;
?
import com.alibaba.fastjson.JSON;
import com.fasterxml.jackson.databind.ObjectMapper;
?
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;
?
/**
 * ajax请求测试控制器
 */
@WebServlet("/ajax")
public class UserServlet extends HttpServlet {
?
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
?
        System.out.println("UserServlet get access");
?
        String msg = "response success of get request";
        // 需要导入jackson的jar包
        ObjectMapper mapper = new ObjectMapper();
        String msgJson = mapper.writeValueAsString(msg);
?
        resp.getWriter().write(msgJson);
    }
?
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
?
        System.out.println("UserServlet post access");
?
        String msg = "response success of post request";
        // 需要导入fastjson的jar包
        String msgJson = JSON.toJSONString(msg);
?
        resp.getWriter().write(msgJson);
    }
}

ajax

原文：https://www.cnblogs.com/lll919397/p/14691233.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)