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>

原文地址:https://www.cnblogs.com/alex-xxc/p/10011283.html

时间: 2024-11-29 09:45:40

1.ajax简单实现异步交互的相关文章

Ajax异步交互基础

1. ajax是什么? * asynchronous javascript and xml:异步的js和xml * 它能使用js访问服务器,而且是异步访问! * 服务器给客户端的响应一般是整个页面,一个html完整页面!但在ajax中因为是局部刷新,那么服务器就不用再响应整个页面!而只是数据! > text:纯文本 > xml:大家都熟悉!!! > json:它是js提供的数据交互格式,它在ajax中最受欢迎! 2. 异步交互和同步交互 * 同步: > 发一个请求,就要等待服务器的

Ajax与ashx异步请求的简单案例

Ajax与ashx异步请求的简单案例: 前台页面(aspx): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat=

spring mvc 和ajax异步交互完整实例

Spring MVC 异步交互demo: 1.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

ajax异步交互梳理

最近在学习ajax,开始的时候感觉步骤有些混乱,老是记不住,自己梳理了下,觉得很好玩,就顺便记下来. ajax异步交互的步骤: 1.创建XMLHttpRequest核心对象 2.与服务器建立连接(open) 3.向服务器端发送请求(send) 4.接收服务器端的响应数据onreadystatechange 如同生意场上一样,A公司(客户端)有事情求B公司(服务器端)帮忙,于是 1.先在内部选定了一个主题XMLHttpRequest(创建核心对象), 2.委托open,与位于url地址的B公司接洽

异步交互之Ajax原生编写

一提到异步交互大家就会说ajax,仿佛ajax这个技术已经成为了异步交互的代名词.那下面将研究ajax的核心对象! 利用ajax实现异步交互无非4步: 1.创建ajax核心对象 2.与服务器建立连接 3.向服务器发送请求 4.接收服务器响应的数据 看似神秘的异步交互当明确这4步后,也许在大家脑海里已经有了初步的思路了 首先我们创建ajax的核心对象,由于浏览器的兼容问题我们在创建ajax核心对象的时候不得考虑其兼容问题,因为要想实现异步交互的后面步骤都基于第一步是否成功的创建了ajax核心对象.

spring mvc 和ajax异步交互完整实例(转自CSDN) 附下载地址

spring mvc 和ajax异步交互完整实例 spring MVC 异步交互demo: demo下载地址:http://download.csdn.net/download/quincylk/9521375 1.jsp页面: [java] view plain copy print? <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-

ajax 异步交互

<script>     $(function(){         $("#sub").click(function () {             $.ajax({                 url: 'CheckPvUv.php',                 data: {                     act:'login',                     un:$("#un").val(),          

325 AJAX介绍,XMLHttpRequest对象,实现Ajax的异步交互步骤,服务器端通信状态

* Asynchronous JavaScript and Xml \* 直译中文 - javascript和XML的异步 \* (不严格的定义)客户端与服务器端进行交互,而无需刷新当前页面的技术,称之为Ajax. * Ajax实现的是B/S架构下的异步交互 * 实现异步交互的技术: \* <iframe src="">元素 * 同步与异步的区别 * 同步交互 \* 执行速度相对比较慢 \* 响应的是完整的HTML页面 * 异步交互 \* 执行速度相对比较快 \* 响应的是

Ajax 简单实例,其实就是js里面内容有些不同而已(转载)

这些时间,瞎子也看得见,AJAX正大踏步的朝我们走来.不管我们是拥护也好,反对也罢,还是视而不见,AJAX像一阵潮流,席转了我们所有的人. 关于AJAX的定义也好,大话也好,早有人在网上发表了汗牛充栋的文字,在这里我也不想照本宣科. 只想说说我感觉到的一些优点,对于不对,大家也可以和我讨论: 首先是异步交互,用户感觉不到页面的提交,当然也不等待页面返回.这是使用了AJAX技术的页面给用户的第一感觉. 其次是响应速度快,这也是用户强烈体验. 然后是与我们开发者相关的,复杂UI的成功处理,一直以来,