Ajax-CSDN博客

本文链接：https://blog.csdn.net/weixin_44966712/article/details/103150617

Ajax：

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。（通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新）

XMLHttpRequest是AJAX的基础

1）创建XMLHttpRequest对象
为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象（用于和服务器交换数据）。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2）向服务器发送请求
如果是get请求
在这里插入图片描述
如果是post请求

3)异步（true/false）
AJAX 指的是异步 JavaScript 和 XML
XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true
4）服务器响应
XMLHttpRequest 对象的 responseText 或 responseXML 属性。
如果来自服务器的响应并非 XML，使用 responseText 属性
如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，使用 responseXML 属性
在这里插入图片描述 4）onreadystatechange事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

使用Ajax进行get/post请求

jsp中
1）如果是执行get请求

<h3><a href="" onclick="get()">使用Ajax方式发送Get请求</a></h3>

写明javascript的功能

<script type="text/javascript">
        function get() {
            //1. 创建xmlhttprequest 对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 发送请求
            xmlhttp.open("GET" ,"AjaxTest?name=aa&age=18" ,true );
            //3. 获取响应数据 注册监听的意思。
            //一会准备的状态发生了改变，那么就执行 = 号右边的方法
            xmlhttp.onreadystatechange = function(){
                //前半段表示 已经能够正常处理。  再判断状态码是否是200(能正常处理且状态码为200)
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
                    //弹出响应的信息
                    alert(xmlhttp.responseText);
                }
            }
            xmlhttp.send();
        }
    </script>

2）如果是执行post请求

<h3><a href="" onclick="post()">使用Ajax方式发送Post请求</a></h3>

function post() {
            //1. 创建对象
            //1. 创建xmlhttprequest 对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            //2. 发送请求
            xmlhttp.open( "POST", "AjaxTest?name=aa&age=18", true );
            //3.想获取服务器传送过来的数据， 加一个状态的监听。
            xmlhttp.onreadystatechange=function(){
                if(xmlhttp.readyState==4 && xmlhttp.status == 200){
                    alert("post："+xmlhttp.responseText);
                }
            }
            //如果使用的是post方式带数据，那么 这里要添加头， 说明提交的数据类型是一个经过url编码的form表单数据
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            //带数据过去  ， 在send方法里面写表单数据。
            xmlhttp.send("name=aobama&age=19");
        }
    </script>

在servlet中获取

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println("收到了一个请求..." +name+"="+age);


        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().write("收到了请求...");
    }

3）改变内容

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <script type="text/javascript">
        function loadXMLDoc()
        {
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function(){
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET","<%=basePath %>/ajax/test1.txt",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>