AJAX实战：利用XMLHttpRequest实现异步局部刷新-优快云博客

本文链接：https://blog.youkuaiyun.com/xiaoping__/article/details/117199797

文章目录

概述
ajax中使用xmlHttpRequset对象
示例

概述

ajax是用来做局部刷新的

局部刷新使用的核心对象是异步对象（xmlHttpRequest）
这个异步对象是存在浏览器内存中的，使用javascript语法创建和使用xmlHttpRequest对象

同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

ajax中使用xmlHttpRequset对象

1.创建异步对象

var xmlHttp=new XMLHttpRequest();

2.给这个异步对象绑定事件

onreadyStatechange

当异步对象发起请求，获取了数据都会出发这个事件，这个事件需要指定一个函数，在函数中处理状态的变化

xmlHttp.onreadystatechange=function () {
          //处理Http.onreadyst理服务器端返回的数据，更新当前页面

          if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            alert(xmlHttp.responseText);    
          }
        }

readyState 属性

0 描述一种"未初始化"状态;此时，已经创建一个xmlhttprequest对象，但是还没有初始化。
1 描述一种"发送"状态;此时，代码已经调用了xmlhttprequest open()方法并且xmlhttprequest已经准备好把一个请求发送到服务器。
2 描述一种"发送"状态;此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3 描述一种"正在接收"状态;此时，已经接收到http响应头部信息，但是消息体部分还没有完全接收结束。
4 描述一种"已加载"状态;此时，响应已经被完全接收。

3.初始异步请求对象

异步的方法open

xmlHttp.open(“请求方式”，“服务器端的访问地址”，同步|异步请求（默认是true）)；
xmlHttp.open("get","bmiAjax",true);

4.使用异步对象发送请求

xmlHttp.send();

获取服务器端返回的数据

responseText :获得字符串形式的相应数据

responseXML:获取XML形式的相应数据（了解即可）

示例

index.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>局部刷新-ajax</title>
    <script text="text/javascript">
      //使用内存中的异步对象，代替浏览器发起请求。异步对象使用js创建和管理
      function doAjax() {
        //1.创建异步对象
        var xmlHttp=new XMLHttpRequest();
        //2.绑定事件
        xmlHttp.onreadystatechange=function () {
          //处Http.onreadyst理服务器端返回的数据，更新当前页面

          if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
            //alert(xmlHttp.responseText);
            var data =xmlHttp.responseText;
            //更新dom对象，更新页面数据
            document.getElementById("mydata").innerText=data;
          }
        }

        //3.初始请求数据
        xmlHttp.open("get","bmiAjax",true);
        var name=document.getElementById("name").value;
        var w=document.getElementById("w").value;
        var h=document.getElementById("h").value;

        var param="name="+name+"&w="+w+"&h="+h;
        //alert("param="param);
        xmlHttp.open("get","bmiAjax?"+param,true);
        //4.发起请求
        xmlHttp.send();
      }

    </script>

  </head>
  <body>
    <p>局部刷新ajax-</p>
    <div>
      姓名：<input type="text" id="name" /><br>
      体重：<input type="text" id="w" /><br>
      身高：<input type="text" id="h" /><br>
      <input type="submit" value="计算bmi" onclick="doAjax()"/>
    </div>
    <br>
    <br>
    <div id="mydata">等待加载数据。。。。</div>

  </body>
</html>

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
         version="4.0">
    
    <servlet>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <servlet-class>com.node.controller.BmiAjaxServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>BmiAjaxServlet</servlet-name>
        <url-pattern>/bmiAjax</url-pattern>
    </servlet-mapping>
    
</web-app>

BmiAjaxServlet.java

package com.node.controller;

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.io.PrintWriter;

public class BmiAjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("====接收了ajax的请求=====");

        String strName=request.getParameter("name");
        String weight=request.getParameter("w");
        String height=request.getParameter("h");

        String msg="name : "+strName+"weight : "+weight+"height : "+height;

        //响应ajax需要的数据，使用HttpServletResponse输出数据
        PrintWriter pw=response.getWriter();
        pw.println(msg);
        pw.flush();
        pw.close();
    }
}

效果：更新了一段文字