02.原生JS实现异步请求

其他 2020-07-24 11:32:09 阅读次数: 0

1. 原生JS实现异步请求

  • 描述：原生JS的AJAX开发，通过XMLHttpRequest对象来完成异步发送请求和接受响应
  • 步骤：

    • 第一步：获取XMLHttpRequest对象

    • 第二步：和服务器进行连接

    • 第三步：发送请求数据

    • 第四步：接受服务器响应

    • 第五步：获取响应数据

      ```java
第一步：获取XMLHttpRequest对象

	# 兼容大多数浏览器

	var xhr = new XMLHttpRequest();

	# 兼容IE6浏览器

	var xhr = new ActiveXObject('Msxml2.XMLHTTP');

	# 兼容IE5.5及以下版本

	var xhr = new ActiveXObject('Mcrosoft.XMLHTTP');	
	
解决兼容性：
	function getXMLHttpRequest()
    {
        try
        {
            //解决大多数浏览器兼容问题
            return new XMLHttpRequest();
        }
        catch (e)
        {
            try
            {
                //解决IE6浏览器兼容问题
                return new ActiveXObject('Msxml2.XMLHTTP');
            }
            catch (e)
            {
                try
                {
                    //解决IE5.5及以下版本兼容问题
                    return new ActiveXObject('Mcrosoft.XMLHTTP');
                }
                catch (e)
                {
                    console.log("你用的啥浏览器");
                }
            }
        }
    }
    
第二步：和服务器进行连接
	xhr.open('GET', '/xxxxxx.do', true);
	-----请求方式
	-----请求资源
	-----是否开启异步机制
	
第三步：发送请求数据
	xhr.send(xxxxxxxxx);

	# GET请求

	GET请求的参数拼接在url后面，通常设置xhr.send(null)可以解决火狐浏览器兼容性

	# POST请求

	第一步：设置请求头	xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	第二步：设置请求数据	xhr.send('username=root&password=root');

第四步：接受服务器响应
	-----事件：onreadystatechange	监听xhr对象的状态变化(五种状态)
		-----0：刚创建完xhr的对象
		-----1：刚连接完服务器，但是没有发送请求
		-----2：发送完请求，但服务器还没有做出响应
		-----3：服务器已经做出响应，但还没有响应完成
		-----4：服务器响应已经完成(一般监听此状态)
	-----xhr.readyState == 4	判断是否为4状态
	-----xhr.status == 200		判断是否交互成功	状态码(200,404,500,302,304)
第五步：获取响应数据
	-----var text = xhr.responseText;				    获取纯文本(字符串)
	-----var xmlText = xhr.response.XML;				获取XML文本(document)
```

2. GET请求的TEXT交互

2.1 TextServlet.java

package zw.ajax.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;
import java.io.PrintWriter;

/**
 * @ClassName TextServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //设置response缓冲区字符集
        response.setCharacterEncoding("UTF-8");
        //设置请求响应头
        response.setHeader("Content-Type", "application/x-www-form-urlencoded");
        //获取输出流
        PrintWriter pw = response.getWriter();
        //向客户端写数据
        pw.println("Hello World");
        //关闭流资源
        pw.close();
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {

    }
}

2.2 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <script type="text/javascript">
      //获取XMLHttpRequest对象(解决浏览器兼容问题)
      function getXMLHttpRequest()
      {
        try
        {
          //解决大多数浏览器兼容问题
          return new XMLHttpRequest();
        }
        catch (e)
        {
          try
          {
            //解决IE6浏览器兼容问题
            return new ActiveXObject('Msxml2.XMLHTTP');
          }
          catch (e)
          {
            try
            {
              //解决IE5.5及以下版本兼容问题
              return new ActiveXObject('Mcrosoft.XMLHTTP');
            }
            catch (e)
            {
              console.log("你用的啥浏览器");
            }
          }
        }
      }

      function sendHandler()
      {
        //1.获得XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        //2.和服务器进行连接
        xhr.open('GET', '${pageContext.request.contextPath}/text', true);
        //3.发送请求数据
        xhr.send(null);
        //4.接受服务器响应
        xhr.onreadystatechange = function()
        {
          //交互成功
          if(xhr.status == 200 && xhr.readyState == 4)
          {
            //获取服务器返回字符串
            let data = xhr.responseText;
            //控制台打印输出字符串
            console.log(data);
          }
        }
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的GET请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

2.3 运行结果

在这里插入图片描述

3. POST请求的TEXT交互

3.1 TextServlet.java

package zw.ajax.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;
import java.io.PrintWriter;

/**
 * @ClassName TextServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/text")
public class TextServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //设置request和response缓冲区字符集
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        //获取请求参数
        String data = request.getParameter("data");
        //控制台打印请求字符串
        System.out.println("data = " + data);
        //设置请求响应头
        response.setHeader("Content-Type", "application/x-www-form-urlencoded");
        //获取输出流
        PrintWriter pw = response.getWriter();
        //向客户端写数据
        pw.println(data);
        //关闭流资源
        pw.close();
    }
}

3.2 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <script type="text/javascript">
      //获取XMLHttpRequest对象(解决浏览器兼容问题)
      function getXMLHttpRequest()
      {
        try
        {
          //解决大多数浏览器兼容问题
          return new XMLHttpRequest();
        }
        catch (e)
        {
          try
          {
            //解决IE6浏览器兼容问题
            return new ActiveXObject('Msxml2.XMLHTTP');
          }
          catch (e)
          {
            try
            {
              //解决IE5.5及以下版本兼容问题
              return new ActiveXObject('Mcrosoft.XMLHTTP');
            }
            catch (e)
            {
              console.log("你用的啥浏览器");
            }
          }
        }
      }

      function sendHandler()
      {
        //1.获得XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        //2.和服务器进行连接
        xhr.open('POST', '${pageContext.request.contextPath}/text', true);
        //3.发送请求数据
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send('data=Hello World');
        //4.接受服务器响应
        xhr.onreadystatechange = function()
        {
          //交互成功
          if(xhr.status == 200 && xhr.readyState == 4)
          {
            //获取服务器返回字符串
            var data = xhr.responseText;
            //控制台打印输出字符串
            console.log(data);
          }
        }
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的POST请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

3.3 运行结果

在这里插入图片描述

在这里插入图片描述

4. GET请求的JSON交互

  • 后台通过第三方fastjson-1.2.68.jar解析json数据

4.1 Student.java

package zw.ajax.domain;

import java.io.Serializable;
import java.util.Date;

/**
 * @ClassName Student
 * @Description 学生实体类
 * @Author 周威
 * @Date 2020-07-16 11:07
 * @Version 1.0
 **/
public class Student implements Serializable
{
    private String name;
    private Integer age;
    private String sex;
    private Date birthday;

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public Integer getAge()
    {
        return age;
    }

    public void setAge(Integer age)
    {
        this.age = age;
    }

    public String getSex()
    {
        return sex;
    }

    public void setSex(String sex)
    {
        this.sex = sex;
    }

    public Date getBirthday()
    {
        return birthday;
    }

    public void setBirthday(Date birthday)
    {
        this.birthday = birthday;
    }

    @Override
    public String toString()
    {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", birthday=" + birthday +
                '}';
    }
}

4.2 JsonServlet.java

package zw.ajax.servlet;

import com.alibaba.fastjson.JSON;
import zw.ajax.domain.Student;
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;
import java.util.Date;

/**
 * @ClassName JsonServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //创建一个student对象
        Student student = new Student();
        student.setName("tom");
        student.setAge(20);
        student.setSex("男");
        student.setBirthday(new Date());
        //设置response缓冲字符集
        response.setCharacterEncoding("UTF-8");
        //响应json字符串
        PrintWriter pw = response.getWriter();
        pw.println(JSON.toJSONString(student));
        pw.close();
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {

    }
}

4.3 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <script type="text/javascript">
      //获取XMLHttpRequest对象(解决浏览器兼容问题)
      function getXMLHttpRequest()
      {
        try
        {
          //解决大多数浏览器兼容问题
          return new XMLHttpRequest();
        }
        catch (e)
        {
          try
          {
            //解决IE6浏览器兼容问题
            return new ActiveXObject('Msxml2.XMLHTTP');
          }
          catch (e)
          {
            try
            {
              //解决IE5.5及以下版本兼容问题
              return new ActiveXObject('Mcrosoft.XMLHTTP');
            }
            catch (e)
            {
              console.log("你用的啥浏览器");
            }
          }
        }
      }

      function sendHandler()
      {
        //1.获得XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        //2.和服务器进行连接
        xhr.open('GET', '${pageContext.request.contextPath}/json', true);
        //3.发送请求数据
        xhr.send(null);
        //4.接受服务器响应
        xhr.onreadystatechange = function()
        {
          //交互成功
          if(xhr.status == 200 && xhr.readyState == 4)
          {
            //将服务器返回的json字符串转为json对象
            var data = JSON.parse(xhr.responseText);
            //控制台打印输出json对象
            console.log(data);
          }
        }
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的GET请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

4.4 运行结果

在这里插入图片描述

5. POST请求的JSON交互

  • 后台通过第三方fastjson-1.2.68.jar解析json数据

5.1 Student.java

package zw.ajax.domain;

import java.io.Serializable;
import java.util.Date;

/**
 * @ClassName Student
 * @Description 学生实体类
 * @Author 周威
 * @Date 2020-07-16 11:07
 * @Version 1.0
 **/
public class Student implements Serializable
{
    private String name;
    private Integer age;
    private String sex;
    private Date birthday;

    public String getName()
    {
        return name;
    }

    public void setName(String name)
    {
        this.name = name;
    }

    public Integer getAge()
    {
        return age;
    }

    public void setAge(Integer age)
    {
        this.age = age;
    }

    public String getSex()
    {
        return sex;
    }

    public void setSex(String sex)
    {
        this.sex = sex;
    }

    public Date getBirthday()
    {
        return birthday;
    }

    public void setBirthday(Date birthday)
    {
        this.birthday = birthday;
    }

    @Override
    public String toString()
    {
        return "Student{" +
                "name='" + name + '\'' +
                ", age=" + age +
                ", sex='" + sex + '\'' +
                ", birthday=" + birthday +
                '}';
    }
}

5.2 JsonServlet.java

package zw.ajax.servlet;

import com.alibaba.fastjson.JSON;
import zw.ajax.domain.Student;
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.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.Date;

/**
 * @ClassName JsonServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 9:45
 * @Version 1.0
 **/
@WebServlet("/json")
public class JsonServlet extends HttpServlet
{
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        
    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        //设置request、response缓冲字符集
        request.setCharacterEncoding("UTF-8");
        response.setCharacterEncoding("UTF-8");
        //获取请求的json字符串
        String jsonText = readAsText(request.getInputStream(), "UTF-8");
        //解析json字符串
        Student student = JSON.parseObject(jsonText, Student.class);
        System.out.println("student = " + student);
        //响应json字符串
        PrintWriter pw = response.getWriter();
        pw.println(JSON.toJSONString(student));
        pw.close();
    }

    //读取TCP Stream流
    private String readAsText(InputStream is, String charset) throws IOException
    {
        ByteArrayOutputStream bo = new ByteArrayOutputStream(4096);
        byte[] data = new byte[1024];
        while (true)
        {
            int len = is.read(data);
            // 连接已经断开
            if(len < 0)
            {
                break;
            }
            // 数据未完
            if(len == 0)
            {
                continue;
            }
            // 缓存起来
            bo.write(data, 0, len);
            // 上限, 最多读取16KB
            if(bo.size() > 1024*16)
            {
                break;
            }
        }
        return bo.toString(charset);
    }
}

5.3 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <script type="text/javascript">
      //获取XMLHttpRequest对象(解决浏览器兼容问题)
      function getXMLHttpRequest()
      {
        try
        {
          //解决大多数浏览器兼容问题
          return new XMLHttpRequest();
        }
        catch (e)
        {
          try
          {
            //解决IE6浏览器兼容问题
            return new ActiveXObject('Msxml2.XMLHTTP');
          }
          catch (e)
          {
            try
            {
              //解决IE5.5及以下版本兼容问题
              return new ActiveXObject('Mcrosoft.XMLHTTP');
            }
            catch (e)
            {
              console.log("你用的啥浏览器");
            }
          }
        }
      }

      function sendHandler()
      {
        //1.获得XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        //2.和服务器进行连接
        xhr.open('POST', '${pageContext.request.contextPath}/json', true);
        //3.发送请求数据
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        let jsonObject = {name:"tom", age:100, sex:"男", birthday:new Date()};
        let jsonText = JSON.stringify(jsonObject);
        xhr.send(jsonText);
        //4.接受服务器响应
        xhr.onreadystatechange = function()
        {
          //交互成功
          if(xhr.status == 200 && xhr.readyState == 4)
          {
            //将服务器返回的json字符串转为json对象
            var data = JSON.parse(xhr.responseText);
            //控制台打印输出json对象
            console.log(data);
          }
        }
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的POST请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
  </body>
</html>

5.4 运行结果

在这里插入图片描述

在这里插入图片描述

扫描二维码关注公众号，回复： 11429616 查看本文章

6. 文件异步上传

  • 前台：通过FormData封装文件上传
  • 后台：Servlet通过第三方commons-fileupload-1.4.jar和commons-io-2.7.jar进行文件的读写

6.1 FileServlet.java

package zw.ajax.servlet;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.apache.commons.io.FileUtils;
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.*;
import java.util.List;

/**
 * @ClassName FileServlet
 * @Description 异步请求处理Servlet类
 * @Author 周威
 * @Date 2020-07-16 13:57
 * @Version 1.0
 **/
@WebServlet("/file")
public class FileServlet extends HttpServlet
{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
    {
        boolean status = false;

        try
        {
            //创建磁盘文件项工厂类
            DiskFileItemFactory dfif = new DiskFileItemFactory();
            //创建核心解析对象
            ServletFileUpload up = new ServletFileUpload(dfif);
            //解析request
            List<FileItem> list = up.parseRequest(request);
            for (FileItem fileItem : list)
            {
                if (fileItem.isFormField())
                {
                    //普通表单域
                }
                else
                {
                    //文件表单域
                    String fileName = fileItem.getName();
                    File file = new File("D://Idea//upload", fileName);
                    //进行文件读写操作
                    InputStream is = fileItem.getInputStream();
                    FileUtils.copyInputStreamToFile(is, file);
                }
            }
            status = true;
        }
        catch (FileUploadException e)
        {
            e.printStackTrace();
            status = false;
        }

        //进行响应
        if(status)
        {
            response.setCharacterEncoding("UTF-8");
            PrintWriter pw = response.getWriter();
            pw.println("上传成功");
            pw.close();
        }
        else
        {
            response.setCharacterEncoding("UTF-8");
            PrintWriter pw = response.getWriter();
            pw.println("上传失败");
            pw.close();
        }
    }
}

6.2 index.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>测试</title>
    <meta http-equiv="Content-Type" content="text/html;charsetr=utf-8"/>
    <meta name="author" content="周威"/>
    <script type="text/javascript">
      //获取XMLHttpRequest对象(解决浏览器兼容问题)
      function getXMLHttpRequest()
      {
        try
        {
          //解决大多数浏览器兼容问题
          return new XMLHttpRequest();
        }
        catch (e)
        {
          try
          {
            //解决IE6浏览器兼容问题
            return new ActiveXObject('Msxml2.XMLHTTP');
          }
          catch (e)
          {
            try
            {
              //解决IE5.5及以下版本兼容问题
              return new ActiveXObject('Mcrosoft.XMLHTTP');
            }
            catch (e)
            {
              console.log("你用的啥浏览器");
            }
          }
        }
      }

      function sendHandler()
      {
        //1.获得XMLHttpRequest对象
        var xhr = getXMLHttpRequest();
        //2.和服务器进行连接
        xhr.open('POST', '${pageContext.request.contextPath}/file', true);
        //3.发送请求数据
        var data = new FormData();
        data.append("file", document.getElementsByName("file")[0].files[0]);
        xhr.send(data);
        //4.接受服务器响应
        xhr.onreadystatechange = function()
        {
          //交互成功
          if(xhr.status == 200 && xhr.readyState == 4)
          {
            //获取服务器返回字符串
            var data = xhr.responseText;
            //控制台打印输出字符串
            console.log(data);
          }
        }
      }
    </script>
  </head>
  <body>
    <%-- 通过按钮发送异步的POST请求 --%>
    <button type="button" onClick="sendHandler()">发送请求</button>
    <input name="file" type="file"/>
  </body>
</html>

6.3 运行结果

在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/qq_43625140/article/details/107393681
今日推荐
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
《2024 年一季度互联网投融资运行情况》研究报告
报告：Django 仍然是 74% 开发者的首选
周排行
laravle中orm简单的增删改查
文本分类 特征选取之CHI开方检验
Spark核心编程-WordCount
大数据开发实战系列之电信客服(1)
读书笔记 - 把时间当作朋友 by 李笑来
python 笔记--if else
SpringBoot/Mybatis/Druid, 多数据源MultiDataSource配置思路
排序三个整数
redis集群搭建【2】-Windows中Redis集群搭建
STM32F030驱动TM1650点亮4联数码管
每日归档
更多
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022