首页 > 其他分享 >AJAX概念和AJAX实现_原生JS方式

AJAX概念和AJAX实现_原生JS方式

时间:2022-08-20 16:00:35浏览次数:72  
标签:原生 异步 xmlhttp 请求 JS username AJAX 网页

AJAX概念:

  • 概念:ASynchronous JavaScript And XML 异步的JavaScript和XML
  • AJAX是一种在无需重新加载整个网页的情况下能够更新部分网页的技术。通过在后台于服务器进行少量数据叫唤,Ajax可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用Ajax)如果需要更新内容,必须重新加载整个网页页面
    • 异步和同步:客户端和服务器端相互通信的基础上
      • 同步:客户端必须等待服务器端的响应。在等待的期间客户端不能做其他的操作
      • 异步:客户端不需要等待服务器端的响应,在服务器处理请求的过程中,客户端可以去进行其他的操作
        image

实现方式:

  • 原生的JS实现方式
package com.ailyt.servlet;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;

@WebServlet(name = "ajaxServlet", value = "/ajaxServlet")
public class AjaxServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username = request.getParameter("username");

        System.out.println(username);

        response.getWriter().println(username);


    }
}

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

    <script>
        $(function () {

        });

        function fun() {
        //发送异步请求
        //创建核心对象
        var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XML HTTP");
            }

        //    建立连接
            /**
             * 参数:
             * 请求方式 get post
             *  get:请求参数在url后拼接,send方法为空参
             *  post:请求参数在send方法中定义
             * 请求的url
             * 同步或异步请求 true 异步  false同步
             */
            xmlhttp.open("GET","ajaxServlet?username=tom",true)
        //发送请求
            xmlhttp.send();

        //    接受并响应来自服务器的响应结果
        }
    </script>
</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();"/>
</body>
</html>

标签:原生,异步,xmlhttp,请求,JS,username,AJAX,网页
From: https://www.cnblogs.com/ailhy/p/16607670.html

相关文章

  • webgl(threejs)生成房间楼层
    楔子在很多数字孪生项目中,都会涉及到楼层的建模。楼层的建模由于结构繁多,如果都是建模师进行手动建模,工作量会比较大。而楼层本身的结构,可以抽象成可以通过路径构造的对象......
  • AJAX实现JQuery
    AJAX实现JQuery实现方式ajax()语法$.ajax(url,[settings])记着导入jquery<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>1-原生js......
  • js的闭包和promise
    闭包概述:闭包是一种书写代码一种结构,这种结构拥有的特性就是内部的空间在使用中不会被回收。(内部的变量以及对应的参数不会被gc回收)    函数嵌套函数(返回函数),内......
  • AJAX的概念以及原生JS方式
    AJAX的概念概念:ASynchronousJavaScriptAndXML异步的JavaScript和XML1.异步和同步:客户端和服务器端相互通信的基础上客户端必须等待服务器端的响......
  • 使用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力......