zoukankan      html  css  js  c++  java
  • Ajax的作用

    什么是 AJAX ?

    AJAX = 异步 JavaScript 和 XML。

    AJAX 是一种用于创建快速动态网页的技术。

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

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

    有很多使用 AJAX 的应用程序案例:新浪微博、Google 地图等等。

    同步与异步的差别;

    package web_Servlet;
    
    import java.io.IOException;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/LoginServlet")
    public class LoginServlet extends HttpServlet{
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        String username=request.getParameter("username");
        String password=request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        if("whr".equals(username)&&"123".equals(password)){
            response.getWriter().write("sucess");
        }else{
            response.getWriter().write("failure");
        }
    }
    
    }
    <%@ 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 login(){
           var username=document.getElementById('username').value;
           var password=document.getElementById('password').value;
           var params='username='+username+'&password='+password; 
        
           //3.url
           var url='${pageContext.request.contextPath}/LoginServlet?'+params;
          
           //使用ajax发送get请求
           //4.1创建一个请求对象
           var request=new XMLHttpRequest();
           //4.2调用get请求的方法
           //调用open方法,都用异步,true
           request.open('get',url,true);
           request.send();
           //接受服务器的响应
           request.onreadystatechange=function(){
               console.log('准备状态码-'+request.readyState+':响应状态码-'+request.status);
               if(request.readyState==4&&request.status==200){
                   //接受服务器响应的数据
                  alert( request.responseText);
               }
           }
           
       }
    
    
    
    
    </script>
    </head>
    <body>
    <form  action="${pageContext.request.contextPath}/LoginServlet">
       用户名:<input type="text" name="username" id="username"><br>
        密码: <input type="password" name="password" id="password"><br>
       <input type="button" value="提交" onclick="login()">
    
    
    </form>
    
    </body>
    </html>

    运行截图:

     

  • 相关阅读:
    Java实现 蓝桥杯VIP 算法提高 3000米排名预测
    Java实现 蓝桥杯VIP 算法提高 3000米排名预测
    Java实现 蓝桥杯VIP 算法提高 班级排名
    Java实现 蓝桥杯VIP 算法提高 班级排名
    Java实现 蓝桥杯VIP 算法提高 班级排名
    Java实现 蓝桥杯VIP 算法提高 班级排名
    当时忍住就好了(要抵住诱惑,也不要在极端情绪下做出决定,一切向前看)
    MFC中的模态对话框与非模态对话框,模态对话框测试
    在iOS中创建静态库
    delphi三层架构(使用SATRDA改造,客户端代码不变)
  • 原文地址:https://www.cnblogs.com/whr-blogs/p/12183075.html
Copyright © 2011-2022 走看看