1.ajax简单实现异步交互

Posted 2021-01-22 xxcxxc

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1.ajax简单实现异步交互相关的知识，希望对你有一定的参考价值。

效果：点击获取信息

testAjax.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function getName(){
        var xmlHttp;
        //判断浏览器是否兼容
        if(window.XMLHttpRequest){
            xmlHttp = new XMLHttpRequest();
        }else{
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlHttp.onreadystatechange = function(){
            //判断返回状态
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
                document.getElementById("name").value = xmlHttp.responseText;
            }
            
        }
        xmlHttp.open("get","getAjaxName",true);
        xmlHttp.send();
        
    }
</script>
</head>
<body>
<div style="text-align:center;">
    <input type="button" value="获取ajax信息" onclick="getName()"><input type="text" name="name" id="name">
</div>
</body>
</html>

GetAjaxNameServlet.java

package com.xxc.ajax;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class GetAjaxNameServlet extends HttpServlet{

    /**
     * 
     */
    private static final long serialVersionUID = 1L;
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // TODO Auto-generated method stub
        this.doPost(req, resp);
    }
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        PrintWriter out = resp.getWriter();
        out.println("返回的信息");
        out.flush();
        out.close();
    }

}

web.xml

<servlet>
      <servlet-name>GetAjaxNameServlet</servlet-name>
      <servlet-class>com.xxc.ajax.GetAjaxNameServlet</servlet-class>
  </servlet>
  <servlet-mapping>
      <servlet-name>GetAjaxNameServlet</servlet-name>
      <url-pattern>/getAjaxName</url-pattern>
  </servlet-mapping>

以上是关于1.ajax简单实现异步交互的主要内容，如果未能解决你的问题，请参考以下文章

Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题

AJAX和JSON—ajax

Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？以及 HTTP状态码

前端面试题之手写promise

Ajax简单学习总结

爬虫1.5-ajax数据爬取