Ajax学习笔记

用户668859984766
4 阅读3分钟

什么是Ajax

Ajax：异步刷新技术

Ajax作用：实现异步请求的技术

什么是异步请求？

同步请求：就是实时处理，比如服务器已接受客户端请求，马上响应，这样客户端可以在最短的时间内得到结果。

如同打电话，通信双方不能断（我们是同时进行，同步），你一句我一句，好处是对方表达的信息我马上能收到，但是我正在打电话，无法总别的事。

异步请求：就是分时处理，服务器接收到客户端请求后并不是立即处理，而是等待服务器比较空闲的时候加以处理，可以避免拥塞。

异步如同收发短信，对方不用保证此刻我一定在手机旁，同时，我也不用时刻留意手机有没有来短信。

对于服务器，如果客户端的同步请求过多，就会造成阻塞

服务器-请求Ajax->表现层Servlet->业务逻辑层->数据访问层->服务器

服务器<-响应Ajax<-表现层Servlet<-业务逻辑层<-数据访问层<-服务器

我们用AJAX和服务器进行通信，将JSP替换为HTML+AJAX

！ Ajax语法

Ajax可以通过原生的XMLHttpRequest对象发出HTTP请求，使用起来比较复杂和繁琐，实际开发中基本不使用，我们使用JQuery发送Ajax请求

$.ajax({name:value, name:value,...})

常用参数

参数类型说明
urlString发送请求的地址，默认为当前页地址
typeString请求方式，默认为GET
dataPlainObject或String或Array发送到服务器的数据
data TypeString预期服务器返回的数据类型，包括：XML、HTML、Script、JSON、JSONP、text
timeoutNumber设置请求超时时间
globalBoolean表示是否触发全局AJax事件，默认为true

常用函数参数

参数类型说明
beforeSendFunction(jqXHR jqxhr,PlainObject settings)发送请求前调用的函数
successFunction(任意类型 result,String textStatus,jqXHR jqxhr)请求成功后调用的函数参数result：可选，由服务器返回的数据
errorFunction(jqXHR jqxhr,String textStatus,String errorThrown)请求失败时调用的函数
completeFunction(jqXHR jqxhr,String textStatus)请求完成后（无论成功还是失败）调用的函数

规范示例

$.ajax({
    "url":"url", //要请求后台Servlet的URL路径
    "type":"get", //发送请求的方式
    "data":data, //要发送到服务器的数据
    "dataType":"text", //指定传输的数据格式
    "success":function(result){
        //请求成功后要执行的代码
    },
    "error":function(){
        //请求失败后要执行的代码
    },
});

Ajax快速入门

需求

在完成用户注册时，当用户名输入框失去焦点时，向后台发送请求，校验用户名是否在数据库已存在，如果存在则提示该用户名已存在。

分析

  • 前端完成的逻辑

    1. 给用户名输入框绑定光标失去焦点事件onblur
    2. 发送ajax请求，携带username参数
    3. 处理响应：是否显示提示信息

  • 后端完成的逻辑

    1.接收用户名 2.调用service查询User，判断用户是否存在 3.返回标记

整体流程如下

register.html

  1. 给用户名输入框绑定光标失去焦点事件onblur
  2. 发送ajax请求，携带username参数
  3. 处理响应：是否显示提示信息

------------↓请求-----------↑响应-----------

CheckNameServlet.java

  1. 接收用户名
  2. 调用servlet查询User，判断用户是否存在
  3. 返回标记

代码

register.html

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Insert title here</title>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body>

<div>

<input type="text" class="login_input" id="userName" placeholder="请输入长度为6-10个字符的用户名"/>

<span id="userName_prompt" class="prompt"></span>

</div>

<script>

//给用户名输入框添加失去焦点事件

$("#userName").blur(checkUserName);

//给用户名输入框添加失去焦点事件

function checkUserName(){

var userName =$("#userName").val();

<!--发送ajax请求-->

$.ajax({

"url" :"checkName", //要提交的URL路径

"type" :"GET", //发送请求的方式

"data":"userName="+userName, //要发送到服务器的数据

"success" : function(data){

//响应成功后要执行的代码

if(data=="true"){

$("#userName_prompt").html("该用户名已存在");

}

}

});

$("#userName_prompt").html("");

return true;

}

</script>

  


</body>

</html>

CheckNameServlet.java

package com.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("/checkName")
public class CheckNameServlet extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html;charset=utf-8");
		String userName = request.getParameter("userName");
		
		// 模拟：如果用户名是 admin 就已存在
		if("admin".equals(userName)) {
			response.getWriter().print("true");
		}else {
			response.getWriter().print("false");
		}
	}
}

Ajax简化写法

普通写法

$.ajax({
    "url":"url", //要请求后台Servlet的URL路径
    "type":"get", //发送请求的方式
    "data":data, //要发送到服务器的数据
    "dataType":"text", //指定传输的数据格式
    "success":function(result){
        //请求成功后要执行的代码
    },
    "error":function(){
        //请求失败后要执行的代码
    },
});

发送GET请求

$.get()方式通过HTTP GET，请求成服务器上请求数据

语法

$.get(URL,callback);
//or
$.get(URL,[data],[callback],[dataType])
  • URL：发送请求的URL字符串。
  • data：可选的，发送给服务器的字符串或key/value键值对。
  • calback：可选的，请求成功后执行的回调函数。
  • dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml.json,script,或html）。

发送Post请求

.post()方法通过HTTPPOST请求，向服务器提交数据，写法上和.post()方法通过HTTP POST请求，向服务器提交数据，写法上和.get()很相似

语法

$.post(URL,callback);
//or
$.post(URL,[data],[callback],[dataType])
  • RUL：发送请求的URL字符串。
  • data：可选的，发送给服务器的字符串或key/value键值对。
  • calback：可选的，请求成功后执行的回调函数
  • dataTYpe：可选的，从服务器返回的数据类型。默认：智能猜测（可以是mxl.json,script,或html)。 注意：后端的CheckNameServlet对应post请求的支持
avatar
文章
阅读
粉丝