首页 > 其他分享 >AJAX的概念以及原生JS方式

AJAX的概念以及原生JS方式

时间:2022-08-20 14:58:05浏览次数:61  
标签:原生 异步 网页 请求 JS username AJAX xmlhttp 客户端

AJAX的概念

概念: ASynchronous JavaScript And XML 异步的JavaScript 和 XML

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

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

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

 

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

  通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

  传统的网页(不使用 Ajax)如果需要更新内容,必须重载整个网页页面。

  提升用户的体验

 

 

 

 

 

 

原生的JS实现方式

html页面:

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //定义方法
        function fun() {
            //发送异步请求
            //1、创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest) {
                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",true)
            //3.发送请求
            xmlhttp.send();
            //4、接收并处理来自服务器的响应结果
            //获取方式:xmlhttp.responseText
            //什么时候获取?当服务器响应成功后获取

            //xmlhttp对象的就绪状态改变时,触发事件onreadystatechange
            xmlhttp.onreadystatechange = function() {
                //判断readyState就绪状态是否为4,判断status响应状态码是否为200
                if (this.readyState == 4 && this.status == 200) {
                    //获取服务器的响应结果
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            };

        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
    <input>
</body>
</html>

 

AjaxServlet类:

@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();
        }
        System.out.println(username);

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

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

 

标签:原生,异步,网页,请求,JS,username,AJAX,xmlhttp,客户端
From: https://www.cnblogs.com/xjw12345/p/16607612.html

相关文章

  • 使用JS 递归函数 输出 斐波那契数列 (return 返回值使用时的注意点 )
      functionaee(i){  if(i==0){    return0;  }  if(i==1){    return1;  }  if(i>=2){ ***//......
  • AJAX概念和AJAX实现原生JS方式
    AJAX概念概念:ASynchronous JavaScript And XML 异步的JavaScript 和 XML1.异步和同步:客户端和服务器端相互通信的基础上同步:客户端必须等待服务器端......
  • 让人纠结的PG字段json类型
    PostgreSQL确实牛逼得很。PostgreSQL有个json数据类型。当你用json类型设定表的字段时,你用select语句相当爽。问题是当你使用中间件时如FireDAC等,进行数据保存时,就会出现......
  • [编程题]仓库配送(最短路, Dijskra)
    [编程题]仓库配送#最短路径,Dijskrafromcmathimportcosfromheapqimport*fromcollectionsimportdefaultdictN,K,M=list(map(int,input().strip().sp......
  • js的原型
    prototype概述:所有的函数都拥有一个属性这个属性称为prototype他是一个对象空间(里面就可以存放对应的数据)他被称为显式原型     从上述代码大家可以看到对......
  • js脚本之修改leetcode刷题样式
    js脚本之修改leetcode刷题样式作用:调整字体大小(默认字体太小了)隐藏提示(点击按钮显示)自动隐藏顶栏油猴脚本代码://==UserScript==//@name力......
  • Newtonsoft.Json
    1、序列化stringjsonStr=JsonConvert.SerializeObject(obj)2、反序列化Tobj=JsonConvert.DeserializeObject(jsonStr)3、Newtonsoft.Json扩展方法类///<summa......
  • 学习:json数据
    json本质上是一个固定格式的字符串JSON是一种轻量级的数据交换语音Json可以实现不同平台的数据交换也可以使用它保存业务数据格式Json使用键值对的方式表示一个业务对......
  • js的运动及封装
    概述运动主要是动画的操作,主要是操作某个document元素的属性变化(位置变化)运动主要的三步骤使用定时器来定时更改对应的内容实时获取对应的元素的属性及相关内容判断是否......
  • js时间戳获取和转换
    js时间戳获取和转换1.js获取当前时间戳1.1获取的时间戳是把毫秒改成000显示vartimestamp=Date.parse(newDate());1.2获取了当前毫秒的时间戳vartimestamp=(ne......