AJAX请求

最新推荐文章于 2022-06-08 14:58:01 发布

想成为大牛的渣渣

最新推荐文章于 2022-06-08 14:58:01 发布

阅读量124

点赞数

分类专栏： JavaWeb 文章标签： ajax javascript

本文链接：https://blog.csdn.net/qq_45702658/article/details/120538055

版权

JavaWeb 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

什么是AJAX请求

AJAX即“Asychronous JavaScript And XML”（异步JavaScript和XML）,是指一种创建交互式网页应用的网页开发技术。

ajax是一种浏览器通过js异步发起请求。局部刷新更新页面的技术。

原生的AJAX请求实例

XMLHttpRequest对象用于和服务器交换数据

向服务器发送请求

如需发送请求到服务器，使用XMLHttpRequest对象的open()和send()方法
xmlhttp.open(“GET”,“test1.txt”,true);
xmlhttp.send();
open(mehtod,url,async) 规定请求的类型、URL以及是否异步处理请求。method：请求的类型：GET或POST，url：文件在服务器上的位置，sync：true（异步）或者false（同步）
send(string) 将请求发送到服务器：string：仅用于POST请求

Ajax服务器响应

如需获得来自服务器的响应，使用XMLHttpRequest对象的reponseText或responseXML属性。
responseText：获得字符串形式的响应数据
responseXML:获得XML形式的响应数据

Ajax-onreadystatechange事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当readyState改变时，就会触发onreadystatechange事件。
readyState属性有XMLHttpRequest的状态信息。
下面是XMLHttpRequest对象的三个重要的属性：
onreadystatechange：存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState：存有XMLHttpRequest的状态。从0到4发生变化。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
status：200----OK
404未找到页面

ajax.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta  http-equiv="content-type" content="text/html;charset=UTF-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <title>Title</title>
  <script type="text/javascript">
    function ajaxRequest(){
      // 1. 我们首先要创建一个XMLHttpRequest
      var xmlhttprequest= new XMLHttpRequest();

      // 2.调用open方法设置请求参数
      xmlhttprequest.open("GET","http://localhost:8080/JavaWEB/ajax?action=ajaxMethod",true);

      // 4.在send方法前绑定onreadystatechange事件，处理请求完成后的操作
      xmlhttprequest.onreadystatechange=function (){
        if(xmlhttprequest.readyState==4 && xmlhttprequest.status==200){

          //将json字符串转化为json对象
          var jsonObj=JSON.parse(xmlhttprequest.responseText);
          document.getElementById("div01").innerHTML="姓名："+jsonObj.name+",年龄："+jsonObj.age+",性别："+jsonObj.sex;
        }
      }
      // 3. 调用send方法发送请求

     xmlhttprequest.send();

    }
  </script>
</head>
<body>
  <button onclick="ajaxRequest()">ajax request</button>
  <div id="div01">


  </div>
</body>
</html>

BaseServlet

package com.cc.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.Method;

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: 你的名字
 * @Date: 2021/06/24/20:27
 * @Description:
 */
public abstract class BaseServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");
        String action = req.getParameter("action");
        try {
            //获取action业务鉴别字符串，获取相应的业务 方法反射对象
            Method method = this.getClass().getDeclaredMethod(action,HttpServletRequest.class,HttpServletResponse.class);
            //System.out.println(method);
            //调用目标业务方法
            method.invoke(this,req,resp);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

AjaxServlet

package com.cc.servlet;

import com.cc.pojo.Student;
import com.google.gson.Gson;

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

/**
 * Created with IntelliJ IDEA.
 *
 * @Author: 你的名字
 * @Date: 2021/09/29/8:00
 * @Description:
 */
public class AjaxServlet extends BaseServlet {

    protected void ajaxMethod(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("ajax请求过来了");
        Student student = new Student("张三", 25, "男");

        Gson gson = new Gson();

        String s = gson.toJson(student);

        resp.getWriter().write(s);

    }
}

想成为大牛的渣渣

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
AJAX请求

什么是AJAX请求AJAX即“Asychronous JavaScript And XML”（异步JavaScript和XML）,是指一种创建交互式网页应用的网页开发技术。ajax是一种浏览器通过js异步发起请求。局部刷新更新页面的技术。
复制链接

扫一扫