Ajax入门

最新推荐文章于 2022-06-04 01:29:09 发布

浪去爪哇岛喝咖啡

最新推荐文章于 2022-06-04 01:29:09 发布

阅读量465

点赞数

分类专栏：尚学堂2000集笔记日更文章标签： ajax

本文链接：https://blog.csdn.net/qq_32695257/article/details/118937300

版权

552 Ajax概念简介

展示效果并认识Ajax

方案1：传统方案

提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的使用整个注册页面。

缺点：较大的网络流量，用户体验不好

方案2：使用Ajax方案。

用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；

优点：较小的网络流量，用户体验好

局部刷新！

传统查询操作：

jsp必须经过servlet–>service–>dao–>db再返回！

jsp<–servlet<–service<–dao<–db

同步操作，中间有一个步骤发生问题，后面的内容就走不通了！

Ajax查询操作：

兵分两路！

1.直接查到用户需要的jsp页面

2.传统查询操作

Ajax概念

Ajax (Asynchronous JavaScript and XML 阿贾克斯)不是一个新的技术，事实上，它是一些旧有的成熟的技术以一种全新的更加强大的方式整合在一起

Ajax之父Jesse James Garrett于2005年提出这一新概念

由于Google公司在Google地图、Google建议、Gmail等产品中对Ajax的成功运用，使得web浏览器的潜力被大大挖掘了出来，从而Ajax越来越受到关注并流行起来。

在这里插入图片描述

Ajax的最大特点：异步访问（快），局部刷新（用户体验高）

553 用户占用案例实现

在这里插入图片描述

save.jsp

<html>
<head>
    <title>用户注册</title>
    <base href="<%=request.getContextPath()+"/"%>">
</head>
<body>
<h3>
    注册页面
</h3>
<form action="">
    <p>
        用户名：<input type="text"/>
    </p>
    <p>
        账号：<input type="text"/>
    </p>
    <p>
        密码：<input type="text"/>
    </p>
    <p>
       <input type="submit" value="提交"/>
    </p>
</form>
</body>
</html>

使用ajax

在这里插入图片描述

SaveServlet

package com.bjsxt.servlet;

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

@WebServlet("/SaveServlet")
public class SaveServlet extends HttpServlet {
   
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
         resp.setContentType("text/html;charset=utf-8");
        //接收数据
        String uname = req.getParameter("uname");
        //处理数据 返回结果
        //模拟数据库
        boolean flag = false;
        if("sxt".equals(uname)){
   
            flag = true;
        }
        //根据结果 给用户做出响应
        //以前是转发和重定向！
        PrintWriter out = resp.getWriter();
        if(flag){
   
            out.print("用户名占用");
        }else {
   
            out.print("用户名可用");
        }
    }
}

save.jsp

<%--
  Created by IntelliJ IDEA.
  User: 37310
  Date: 2021/7/19
  Time: 14:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <base href="<%=request.getContextPath()+"/"%>">

    <script>
        var xhr;
        function  checkName() {
            //接收前台的用户名
           var val = document.getElementById("uname").value;
           if(val==null || val==''){
               document.getElementById("uname_span").innerText="× 用户名不能为空";
           }else{
                //发送Ajax的请求
                    //1 创建XMLHttpRequest对象
                xhr = new XMLHttpRequest();
                    //2 和服务器建立连接
               //open(method,url,ayn,username,password)
               xhr.open("get","SaveServlet?uname="+val,true)
                    //3 执行回调函数
               xhr.onreadystatechange=process;
                    //4 发送请求数据
               xhr.send(null);
           }

           function process() {
                //接收响应的数据
               //执行了5次
               var text = xhr.responseText;
               document.getElementById("uname_span").innerText=text;
           }
        }
    </script>
</head>
<body>
<h3>
    注册页面
</h3>
<form action="">
    <p>
        用户名：<input type="text"/>
    </p>
    <p>
        账号：<input type="text" name="uname" id="uname" οnblur="checkName()"/>
        <span id="uname_span"></span>
    </p>
    <p>
        密码：<input type="text"/>
    </p>
    <p>
       <input type="submit" value="提交"/>
    </p>
</form>
</body>
</html>

554 执行过程分析

 //发送Ajax的请求
     //1 创建XMLHttpRequest对象
 xhr = new XMLHttpRequest();
     //2 和服务器建立连接 //open(method,url,ayn,username,password)
xhr.open("get","SaveServlet?uname="+val,true)
     //3 执行回调函数
xhr.onreadystatechange=process;
     //4 发送请求数据
xhr.send(null);

xhr = new XMLHttpRequest();

浏览器创建的对象！

ie（美帝国）和其他！之前的ie浏览器，现在都统一了！

if(window.ActiveXObject){//IE
	xhr = new ActiveXObject("Microsoft.XMLHTTP");
}else{ //其他浏览器
	xhr =  new XMLHttpRequest();
}

xhr.open(“get”,“SaveServlet?uname=”+val,true)

xhr = new ActiveXObject(“Microsoft.XMLHTTP”);

}else{ //其他浏览器

xhr = new XMLHttpRequest();

}

如何post发送请求？

   //发送Ajax的请求
                    //1 创建XMLHttpRequest对象
                xhr = new XMLHttpRequest();
                    //2 和服务器建立连接
               //open(method,url,ayn,username,password)
      
               xhr.open("post","SaveServlet",true);
               xhr.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
                    //3 执行回调函数
               xhr.onreadystatechange=process;
                    //4 发送请求数据
              
               xhr.send("uname="+val);

什么是"application/x-www-form-urlencoded"

表单文本形式传输！默认

<form action="" enctype="application/x-www-form-urlencoded">

表单二进制形式传输！图片，音频。。。

<form action="" enctype="multipart/form-data">

xhr.onreadystatechange=process;

执行了多次！

一共有5种状态！

0：请求没有发出（在调用 open() 之前）

1：请求已经建立但还没有发出（调用 send() 之前）

2：请求已经发出正在处理之中（这里通常可以从响应得到内容头部）

3：请求已经处理，响应中有部分数据可用，但是服务器还没有完成响应

4：响应已完成，可以访问服务器响应并使用它

状态码status

200 404

返回结果数据 responseText responseXML

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>用户注册</title>
    <base href="<%=request.getContextPath()+"/"%>">

    <script>
        var xhr;
        function  checkName() {
            //接收前台的用户名
           var val = document.getElementById("uname").value;
           if(val==null || val==''){
               document.getElementById("uname_span").innerText="× 用户名不能为空";
           }else{
                //发送Ajax的请求
                    //1 创建XMLHttpRequest对象
               if(window.ActiveXObject){//IE
                   xhr = new ActiveXObject("Microsoft.XMLHTTP");
               }else{ //其他浏览器
                   xhr =  new XMLHttpRequest();
               }
               alert("状态A:"+xhr.readyState);
                    //2 和服务器建立连接
               //open(method,url,ayn,username,password)
              // xhr.open("get","SaveServlet?uname="+val,true)
               xhr.open("post","SaveServlet",true);
               xhr.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
               alert("状态B:"+xhr.readyState);
                    //3 执行回调函数
               xhr.onreadystatechange=process;
                    //4 发送请求数据
              // xhr.send(null);
               xhr.send("uname="+val);
           }

           function process() {
               //alert("就绪状态:"+xhr.readyState);
                //接收响应的数据
               //执行了5次
                
               if(xhr.readyState==4){
                   if(xhr.status==200){
                       var text = xhr.responseText;
                       document.getElementById("uname_span").innerText=text;
                   }else if(xhr.status==404){
                      alert("路径找不到");
                      // window.location.href
                   }else if(xhr.status==500){
                       alert("代码运行异常");
                   }else{
                       alert("ajax响应失败");
                   }

               }

           }
        }
    </script>
</head>
<body>
<h3>
    注册页面
</h3>
<form action="">
    <p>
        用户名：<input type="text"/>
    </p>
    <p>
        账号：<input type="text" name="uname" id="uname" οnblur="checkName()"/>
        <span id="uname_span"></span>
    </p>
    <p>
        密码：<input type="text"/>
    </p>
    <p>
       <input type="submit" value="提交"/>
    </p>
</form>
</body>
</html>

555 内容的总结

1 如何创建xhr对象？

if(window.ActiveXObject){//IE
xhr = new ActiveXObject(“Microsoft.XMLHTTP”);
}else{ //其他浏览器
xhr = new XMLHttpRequest();
}

2 和服务器建立连接 get/post

get:

xhr.open(“get”,“SaveServlet?uname=”+val,true)

xhr.send(null);

post:

xhr.open(“post”,“SaveServlet”,true);
xhr.setRequestHeader(“Context-Type”,“application/x-www-form-urlencoded”);
xhr.send(“uname=”+val);

后台如何接收数据？

String uname = req.getParameter(“uname”);

后台如何做出响应？

PrintWriter out = resp.getWriter();
if(flag){
out.print(“用户名占用”);
}else {
out.print(“用户名可用”);
}

前台如何接收数据？

xhr.onreadystatechange=process;

           function process() {
               //alert("就绪状态:"+xhr.readyState);
                //接收响应的数据
               //执行了5次

               if(xhr.readyState==4){
                   if(xhr.status==200){
                       var text = xhr.responseText;
                       document.getElementById("uname_span").innerText=text;
                   }else if(xhr.status==404){
                      alert("路径找不到");
                      // window.location.href
                   }else if(xhr.status==500){
                       alert("代码运行异常");
                   }else{
                       alert("ajax响应失败");
                   }

               }

556 二级联动实现A

AjaxServlet2

package com.bjsxt.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

@WebServlet(urlPatterns = "/AjaxServlet2")
public class AjaxServlet2 extends HttpServlet {
   
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
   
         resp.setContentType("text/html;charset=utf-8");
       //接收前台数据
        String val = req.getParameter

最低0.47元/天解锁文章

浪去爪哇岛喝咖啡

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax入门

552 Ajax概念简介展示效果并认识Ajax方案1：传统方案提交表单，服务器端处理，错误后跳转到注册页面，同时显示错误信息。返回客户端的使用整个注册页面。缺点：较大的网络流量，用户体验不好方案2：使用Ajax方案。用户名的确认和用户书写其他表单项可以同时进行；返回客户端的至少错误信息；优点：较小的网络流量，用户体验好局部刷新！传统查询操作：jsp必须经过servlet–>service–>dao–>db再返回！jsp<–servlet<–service&
复制链接

扫一扫