初识Ajax

最新推荐文章于 2024-06-06 22:41:57 发布

柠檬不萌耶

最新推荐文章于 2024-06-06 22:41:57 发布

阅读量192

点赞数

本文链接：https://blog.csdn.net/qq_36074150/article/details/75264091

版权

为什么使用Ajax？

无刷新：不刷新整个页面，只刷新局部

无刷新的好处：只更新部分页面，有效利用宽带

提供连续的用户体验

提供类似C/S的互交效果，操作更方便

传统Web和Ajax的差异：

发送请求方式不同：传统Web：浏览器发送同步请求

Ajax技术：异步引擎对象发送请求

服务器响应不同：传统Web：响应内容是一个完整页面

Ajax技术：响应内容只是需要的数据

客户端处理方式的不同：传统Web：需等待服务器响应完成并重新加载整个页面后用户才能进行操作

Ajax技术：可以动态更新页面中的部分内容不影响用户在页面进行其他操作

Ajax工作流程：

Ajax案例：

package cn.happy.servlet;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by java on 2017/7/17.
 */
@javax.servlet.annotation.WebServlet(name = "Firservlet")
public class Firservlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
              String  uname=request.getParameter("uname");

              if(uname.equals("admin")){
                  response.getWriter().write("true");
              }else{
                  response.getWriter().write("false");
              }
    }

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

1.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
       $(function(){
         /*  $("[name=uname]").blur(function(){
               $.ajax({
                   url:"/Firservlet",
                   type:"POST",
                   data:"uname="+$("[name=uname]").val(),

                   success:function (data) {
                       $("#msg").html(data);
                   }
               })
           })*/

           $("[name=uname]").blur(function(){
               //向servlet发送一个ajax
               //
          var  xhr=null;
          if(window.XMLHttpRequest){
              xhr=new XMLHttpRequest();
          }else{
              xhr=new ActiveXObject("Microsoft.XMLHTTP")
          }
          //能发送请求的方式 目标地址  是否异步  true同步
       xhr.open("post","/Firservlet",true);

          xhr.onreadystatechange=function(){
              if(xhr.readyState==4&&xhr.status==200){
                  var  date=xhr.responseText;
                  $("#msg").html(date);
              }
          };
               xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
               xhr.send("uname="+$("[name=uname]").val());

           })
       })

    </script>
</head>
<body>
<input  name="uname"/><span id="msg"></span>
</body>
</html>