初识Ajax

来源：互联网发布：tomcat怎么配置数据库编辑：程序博客网时间：2024/06/05 23:46

为什么使用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>

运行结果：

输入正确：

输入错误：

阅读全文

0 0