AJAX 讲解

最新推荐文章于 2024-09-01 19:13:21 发布

一个很懒的人

最新推荐文章于 2024-09-01 19:13:21 发布

阅读量111

点赞数

分类专栏： Java 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_43715360/article/details/113742922

版权

Java 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

AJAX

文章末尾含有示例代码！！！

简介：

原理：

XMLHttpReuest 对象：

XMLHttpReuest请求：

XMLHttpReuest get请求：
XMLHttpReuest post请求：

readyState

XMLHttpReuest 响应：
如需获得来自服务器的响应，请使用XMLHttpRequest对象的responseText或 responseXML属性。

代码示例：

get 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color: aqua}
    </style>
</head>
<body>
    <button id="btn">填充数据</button>
    <div id="res"></div>

    <script type="text/javascript">

<!--        获取页面控件-->
        var btn=document.getElementById("btn");
        var res=document.getElementById("res");

        //为按钮注册监听事件
        btn.addEventListener("click",function () {
                <!--        1.创建对象-->
                var xhr=new XMLHttpRequest();
                xhr.open("get","data");
                xhr.send();

                //    2.判断请求状态
                xhr.onreadystatechange=function () {
                    if(xhr.readyState==4&&xhr.status==200){
                        //完成对div的赋值
                        res.innerHTML=xhr.responseText;
                    }
                }
        })

    </script>
</body>
</html>

post 请求：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #res{width: 600px; heigth:200px; font-size: 50px; font-weight: bold; line-height: 200px;background-color: aqua}
    </style>
</head>
<body>
<button id="btn">填充数据</button>
<div id="res"></div>

<script type="text/javascript">

    <!--        获取页面控件-->
    var btn=document.getElementById("btn");
    var res=document.getElementById("res");

    //为按钮注册监听事件
    btn.addEventListener("click",function () {
        <!--        1.创建对象-->
        var xhr=new XMLHttpRequest();
        xhr.open("post","data");
        //修改请求头信息
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        //发送时携带数据
        xhr.send("name=zss&age=20");

        //    2.判断请求状态
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                //完成对div的赋值
                res.innerHTML=xhr.responseText;
            }
        }
    })

</script>
</body>
</html>

servlet 服务器：

package com.qf;

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(value = "/data")
public class serviceDataServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String name=req.getParameter("name");
        String age=req.getParameter("age");

        String mess="hello ajax!!"+name+" "+age;
        PrintWriter printWriter=resp.getWriter();

        printWriter.write(mess);
        printWriter.flush();
        printWriter.close();
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        doGet(req,resp);
    }
}