首页 > 其他分享 >AJAX_概念与AJAX_实现_原生JS方式1

AJAX_概念与AJAX_实现_原生JS方式1

时间:2023-02-23 15:14:27浏览次数:33  
标签:原生 username 网页 异步 JS AJAX import servlet

AJAX_概念

      1.概念:ASynchronous JavaScript And   xml  异步的JavaScript和xml

          1.异步和同步:客户端和服务器端相互通信的基础上

            客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。

            客户端不需要等待路服务器响应。在服务器处理请求的过程中,客户端可以进行其他的操作  

            Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

            通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
            传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

          

            提升用户的体验

提升用户的体验

    

 

 

        

     

AJAX_实现_原生JS方式1

      实现方式:

        1.原生的js实现方式

            

 

  

  

 

 

 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script>

    //定义方法
    function  fun() {
      //发送异步请求
      //1.创建核心对象
      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. 建立连接
      /*
          参数:
              1. 请求方式:GET、POST
                  * get方式,请求参数在URL后边拼接。send方法为空参
                  * post方式,请求参数在send方法中定义
              2. 请求的URL:
              3. 同步或异步请求:true(异步)或 false(同步)

       */
      xmlhttp.open("GET","ajaxServlet?username=tom",false);

      //3.发送请求
      xmlhttp.send();

      //4.接受并处理来自服务器的响应结果
      

    }

  </script>


</head>
<body>

<input type="button" value="发送异步请求" onclick="fun();">

<input>
</body>
</html>

 

package cn.itcast.web.servlet;

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;

@WebServlet("/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.获取请求参数
        String username = request.getParameter("username");

       /* //处理业务逻辑。耗时
        try {
            Thread.sleep(5000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/
        //2.打印username
        System.out.println(username);

        //3.响应
        response.getWriter().write("hello : " + username);


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }
}

 

 

        2.JQuery实现方式

          1.$.ajax()

          2.$.get()

          3.$.post()    


标签:原生,username,网页,异步,JS,AJAX,import,servlet
From: https://www.cnblogs.com/x3449/p/17147429.html

相关文章

  • js计算树形数据最大层级数
    已知树形结构数据通过递归方式结合Math.max方法计算出树形结构最大层级数。consttreeData=[{title:"0-0",key:"0-0",children:[{......
  • node.js实现国标GB28181设备接入sip服务器解决方案SkeyeVSS国标视频云平台
    GB28181接入服务器是SkeyeVSS接入GB28181设备/平台的信令交互服务器,GB28181将SIP定位为联网系统的主要信令基础协议,并利用SIP协议的有关扩展,实现了对非会话业务的兼顾,例如......
  • 在线客服系统复制聊天链接,JS实现复制文本函数
    客服系统(gofly.v1kf.com)后台有这个功能,可以直接复制文本信息,JS实现的函数  functioncopyToClipboard(text){vardummy=document.createElement("input");//......
  • js浮点数精确计算函数(加,减,乘,除)
    js浮点数精确计算函数(加,减,乘,除)//浮点数加法运算functionFloatAdd(arg1,arg2){varr1,r2,m;try{r1=arg1.toString().split(".")[1].length}catch(e){r......
  • json库使用之removeMember
    工作中可能会遇到这种情况:想用json变量的内容但又不需要用全部,想把不需要的项删除掉。此时removeMember派上了用场。removeMember有好几个重载的版本,这里只讲3个常用的版......
  • nodejs 修改端口号 process.env.PORT(window环境下)
    nodejs修改端口号process.env.PORT(window环境下)各个环境下,nodejs设置process.env.PORT的值的命令,如下1.linux环境下:PORT=1234nodeapp.js使用上面命令每次都需......
  • 861~863实现JQuery 的ajax(),其他键值,get(),post()实现方式
    2.JQuery实现方式1.$.ajax()语法:$.ajax({键值对}); //使用$.ajax()发送异步请求 $.ajax({url:"ajaxServlet1111"......
  • node.js快速入门
    一.NodeJS简介1.1了解NodeJS简单的说Node.js就是运行在服务端的JavaScript。Node.js是一个基于ChromeJavaScript运行时建立的一个平台。Node.js是一个事件驱动I/......
  • Node.js 入门
    本文摘自cnodejs.org,收集的比较全就直接拿过来了,帮助nodejs前端初学者初步了解nodejs的相关基础知识,为后面进一步学习打下基础。    本文摘自cnodejs.org,收集的比......
  • vue3+antd+jsx 实现表格行数据排序的动画效果
    ------------恢复内容开始------------vue3的写法转载https://blog.csdn.net/qq_51898604/article/details/128973430因为ant-design表格组件没有封装拖拽排序的方法,需......