Ajax的作用

李永毅

2020-01-12

关注关注

什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

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

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

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

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

同步与异步的差别;

Ajax的作用

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>

运行截图： Ajax的作用