Ajax——学习笔记

微醺CC 2022-06-23 14:44:00 阅读数:1,003

学习CSDNajax笔记technology-development

参考/摘录书籍:w3cschool、网络
参考图片:来自网络/自己提供
说明:本人相关博客仅供学习参考!

一、简介

AJAX = Asynchronous JavaScript And XML(异步的JavaScript和XML)
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。简单的说,Ajax 是一种浏览器通过js发起异步请求, 局部更新页面的技术

1.1 工作流程

在这里插入图片描述

二、Ajax请求案例

Ajax 应用需要编写客户端JS脚本和后端代码
Ajax异步请求的核心对象是XMLHttpRequest 对象(简称:XHR),使用 XMLHttpRequest(XHR)对象可以与服务器交互。您可以从URL获取数据,而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。

2.1 获取Ajax核心对象

为了应对所有浏览器,包括 IE5 和 IE6,请检查浏览器是否支持 XMLHttpRequest 对象。如果支持,创建 XMLHttpRequest 对象,如果不支持,则创建 ActiveX 对象:

<script>
var xhttp;
if (window.XMLHttpRequest) {

//Chrom、IE7+、Firefox、Safari 以及 Opera
xhttp = new XMLHttpRequest();
} else {

//code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
</script>

【注意】现代浏览器不允许跨域访问。所以尝试加载的网页和 XML 文件都必须位于相同服务器上。

2.2 XMLHttpRequest 对象属性

属性说明
onreadystatechange定义一个当 readyState 属性 发生变化时调用的函数
readyState保存XMLHttpRequest的状态
0:请求未初始化
1:服务器连接已建立
2:请求已收到
3:正在处理请求
4:请求已完成并且响应已就绪
responseText以字符串返回响应数据
responseXML以XML数据返回响应数据
status返回请求的状态号
200:“完成”
400:“请求出现语法错误”
403:“被禁止的(资源不可用)”
404:“未找到”
500:“服务器内部错误”
statusText返回状态文本(例如:“OK”或者“Not Found”等)

2.3 XMLHttpRequest 对象方法

方法说明
new XMLHttpRequest()创建新的XMLHttpRequest对象
abort()取消当前请求
getResponseHeader()返回特定的头部信息
getAllResponseHeaders()返回头部信息
open(method,url,async,[user],[psw])规定的请求
method:请求类型GET或POST
url:“请求资源路径”
async:true(异步)或 false(同步)
user:[可选]用户名
psw:[可选]密码
send()将请求发送到服务器,用于 GET 请求
send(string)将请求发送到服务器,用于 POST 请求
setRequestHeader(header,value)向要发送的报头添加 标签/键值对
header:规定头的名称
value:规定头的值

2.4 GET或POST的选择

GET 比 POST 更简单更快,可用于大多数情况下。

不过,请在以下情况始终使用 POST:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST没有数据量大小限制)
  • 发送用户输入(可包含未知字符),POST 比 GET 更稳定更安全

2.5 注册用户名异步校验案例

前台

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax注册用户名demo</title>
</head>
<body>
<script>
//获取Ajax核心对象【使用 XMLHttpRequest(XHR)对象可以与服务器交互】
function getXHR() {

var xmlhttp; //XMLHttpRequest的对象
if (window.XMLHttpRequest) {

// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp = new XMLHttpRequest();
} else {

// IE6, IE5 浏览器执行代码
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
//异步GET请求的onclick事件
function asyncGetRequest() {

//【ajax使用步骤】
//1.获得ajax核心对象
var xhr = getXHR();
//2.设置等待服务器响应【处理服务器响应回来的数据】
xhr.onreadystatechange = function() {

//判断XMLHttpRequest对象xhr的状态
// 只有【readyState=4:请求已完成,且响应已就绪】【status=200:表示"OK"】时才能得到服务器回传的数据
if (xhr.readyState == 4 && xhr.status == 200) {

//进行数据库的回传数据的页面回显
document.getElementById("tipsMsg").innerHTML = xhr.responseText;
}
}
//3.发送请求
var username = document.getElementById("username").value;
//3.1 open():规定请求的类型、URL 以及是否异步处理请求。【post和get提交有区别】
xhr.open("GET", "UserServlet?method=ajaxGet&username=" + username, true);
//3.2 send():将请求发送出去,当使用post请求方式时,可向send()传入请求参数;当使用get请求时,send()中不需要参数;
xhr.send();
}
//异步POST请求的onclick事件
function asyncPostRequest() {

//【ajax使用步骤】
//1.获得ajax核心对象
var xhr = getXHR();
//2.设置等待服务器响应【处理服务器响应回来的数据】
xhr.onreadystatechange = function() {

//判断XMLHttpRequest对象xhr的状态
// 只有【readyState=4:请求已完成,且响应已就绪】【status=200:表示"OK"】时才能得到服务器回传的数据
if (xhr.readyState == 4 && xhr.status == 200) {

//进行数据库的回传数据的页面回显
document.getElementById("tipsMsg").innerHTML = xhr.responseText;
}
}
//3.发送请求
var username = document.getElementById("username").value;
xhr.open("POST", "UserServlet", true);
//作用:作用是模拟表单post请求,将请求参数封装到Form Datra中传输,在url中看不到参数。
//如果需要像HTML 表单那样POST数据,请使用 setRequestHeader() 来添加HTTP头
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send("method=ajaxPost&username=" + username);
}
</script>
<h2>ajax注册提示 案例</h2>
//在span标签中局部提交请求和回显服务器相应的文本数据
用户名:<input type="text" id="username" name="username" /><span id="tipsMsg"></span><br />
密码:<input type="password" name="pwd"><br />
<input type="button" onclick="asyncGetRequest()" value="异步GET请求验证用户名" />
<input type="button" onclick="asyncPostRequest()" value="异步POST请求验证用户名" />
</body>
</html>

后台

package com.cb.servlet;
import com.cb.servlet.base.BaseServlet;
/** * 处理ajax的异步GET和异步POST请求 */
@WebServlet(name = "UserServlet", value = "/UserServlet")
public class UserServlet extends BaseServlet {

//ajax异步GET请求的处理
protected String ajaxGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//获取表单数据进行校验【模拟判断】是否username已经被注册
String username = request.getParameter("username");
if ("许褚".equals(username)){

return "html:<span style=\"color: indianred\">该用户名已经被注册,请尝试别的!!!</span>";
}
return "html:<span style=\"color: green\">该用户名还没被注册</span>";
}
//ajax异步POST请求的处理
protected String ajaxPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//获取表单数据进行校验【模拟判断】是否username已经被注册
String username = request.getParameter("username");
if ("许褚".equals(username)){

return "html:<span style=\"color: indianred\">该用户名已经被注册,请尝试别的!!!</span>";
}
return "html:<span style=\"color: green\">该用户名还没被注册</span>";
}
}
package com.cb.servlet.base;
/** * 该servlet继承了HttpServlet * 1.用于接收参数的格式化编码;响应数据类型和编码格式 * 2.根据request域中传递的参数(method=xxx)利用反射,确定使用什么方法来处理请求 * 3.根据调用方法的返回值来确定如何响应【请求转发,重定向,响应】 */
public class BaseServlet extends HttpServlet {

@Override
protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

//请求和响应编码格式已在Filter中进行设置
//接收参数method的值,根据它的值调用自定义的方法
String method = request.getParameter("method");
//由于method=value的value就是要调用的方法名称,根据这一点进行反射调用
Class<? extends BaseServlet> aClass = this.getClass();
//获取要调用的方法对象
//getDeclaredMethod(String name, Class<?>... parameterTypes) 返回一个 方法 对象(Method),它反映此表示的类或接口的指定声明的方法
try {

Method declaredMethod = aClass.getDeclaredMethod(method, HttpServletRequest.class, HttpServletResponse.class);
//对于protected和private修饰的方法或属性要使用 .setAccessible(true) 来取消访问权限检查
declaredMethod.setAccessible(true);
//invoke(Object obj, Object... args) 在具有指定参数的指定对象obj上调用此obj方法对象表示的基础方法declaredMethod。
// result为反射动态所调用方法的返回值
String result = (String) declaredMethod.invoke(this, request, response);
System.out.println("declaredMethod: "+declaredMethod);
System.out.println("方法的返回值result: "+result);
//【新优化部分】
//判断方法的返回值是否为什么类型,从而执行不同的响应类型【请求转发,重定向,响应】
if (!"".equals(result)){

//获取":"的索引位置,从而得到:后面的字符串[该索引从0开始]
int index = result.indexOf(":");
//开始截取:后面的字符串
String pathOrOther = result.substring(index + 1);
//判断result前缀
if (result.startsWith("forward")){

//请求转发
request.getRequestDispatcher(pathOrOther).forward(request,response);
}else if (result.startsWith("redirect")){

//重定向
response.sendRedirect(request.getContextPath() + pathOrOther);
}else{

//以 html 开头的返回值则 直接响应html及内容到浏览器
PrintWriter out = response.getWriter();
out.write(pathOrOther);
}
}
} catch (Exception e) {

e.printStackTrace();
}
}
}

三、jQuery中的Ajax请求【推荐】

直接用原生js写ajax异步交互的代码比较繁琐,开发中建议用jQuery包装的方法去实现ajax异步交互。

3.1 jQuery ajax 方法【不推荐】

3.1.1 常用属性

语法:$.ajax({key:value,···})

属性说明
url发送请求的地址;默认值:当前页地址
type请求的类型, GET 或 POST
data发送给服务器的数据
写法1:key1=value1&key2=value2
写法2:{key1:value1,key2:value2}
dataType响应的数据类型,常用的有:
xml:返回 XML 文档,可用 jQuery 处理
html:返回 纯文本HTML信息包含的script标签会在插入dom时执行
script:返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意:在远程请求时(不在同一个域下),所有 POST 请求都将转为 GET 请求。(因为将使用 DOM 的 script标签来加载)
json:返回 JSON数据
text:返回纯文本字符串
success请求成功时调用的函数
error请求失败时调用的函数

3.1.2 success()回调方法的参数

function(response,status,xhr)

参数说明
response包含来自请求的结果数据
status包含请求状态(“success”,“notmodified”,“error”,“timeout”,“parsererror”)
xhr包含XMLHttpRequest对象,可用xhr.status获取状态码

【注意】

  1. 如果服务器端返回json字符串,客户端的dataType=json时,$.ajax()会自动把json串转换为json对象,我们不需要用JSON.parse()去转换;
  2. 如果客户端dataType和服务器端响应的数据类型不一致时,就属于请求失败,会自动调用error回调函数。

3.1.3 案例

前台

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryAjax.html</title>
</head>
<!-- 方式一:引入本地jQuery库 -->
<!-- <script src="/js/jquery.min.js"></script> -->
<!-- 方式二:引入在线jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<body>
<h2>jqueryAjax.html【使用jQuery包装的方法去实现ajax异步交互】</h2>
请输入待注册用户名:<input type="text" id="uname" name="userName" /><span id="tipMsg"></span><br /><br />
<input type="button" value="jQuery ajax()发送异步请求" onclick="jqueryAjax()">
</body>
<script>
//语法: $.ajax({key:value,....})
function jqueryAjax() {

$.ajax({

url: "AjaxTestServlet", //发送请求的地址
type: "GET", //请求的类型
data: {

method: "registCheck",
userName: $("#uname").val()
}, //请求参数;格式:"key=value"或者{key:value}
//【dataType:理解成客户端希望服务器返回的数据类型;如果此类型和服务器实际返回的类型不一样,就会执行error回调 】
dataType: "html", //响应的数据类型
//请求成功时调用success回调函数()
success: function(response, status, xhr) {

//将回传的数据显示在指定的位置
$("#tipMsg").html(response); //html(): 获取或设置元素内部的内容(解析标签和CSS样式)
//response:包含来自请求的结果数据
//status:包含请求的状态("success","notmodified","error","timeout","parsererror")
//xhr:包含XMLHttpRequest对象,可用xhr.status获取状态码
console.log("response:" + response); //response:<span style="color:red">该用户名已存在</span>
console.log("status:" + status); //status:success
console.log("xhr:" + xhr); //xhr:[object Object]
console.log("xhr.status:" + xhr.status); //xhr.status:200
},
//如果客户端dataType和服务器端响应的数据类型不一致时,就属于请求失败,会自动调用error回调函数。
error: function(xhr, textStatus, errorThrown) {

console.log("xhr:" + xhr); //xhr:[object Object]
console.log("textStatus:" + textStatus); //textStatus:error
console.log("errorThrown:" + errorThrown); //errorThrown:
}
})
}
</script>
</html>

后台

import com.cb.dao.impl.AdminDaoImpl;
import com.cb.servlet.base.BaseServlet;
@WebServlet(name = "AjaxTestServlet", value = "/AjaxTestServlet")
public class AjaxTestServlet extends BaseServlet {

/** * 对输入注册的姓名进行是否存在性校验,用于提示用户【ajax数据交互】 * @param request * @param response * @return 返回响应的数据【大部分时候返回json格式的数据】 * @throws ServletException * @throws IOException */
protected String registCheck(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String userName = request.getParameter("userName");
int i = new AdminDaoImpl().adminNameCount(userName);
if (i > 0){

return "html:<span style=\"color:red\">该用户名已存在</span>";
}else {

return "html:<span style=\"color:green\">用户名可用</span>";
}
}
}

在这里插入图片描述

3.2 jQuery get 方法【推荐】

$.get()方法与$.post()类似,它发送的请求是GET请求。

3.2.1 语法

语法:$.get(url ,[data],[callback],[ type]);
必需的 URL 参数指定请求的资源路径,其它三个参数都是可选的

参数说明
url指定请求的资源路径
data待发送的 key=value 参数
callback请求成功时的回调函数
type返回的数据类型,xml、html、json、text

3.2.2 案例

//$.get(url ,[data],[callback],[ type]);
function jqueryGet() {

$.get("AjaxTestServlet","method=registCheck&userName="+$("#uname").val(),function (data,status){

$('#tipMsg').html(data);
console.log("data:"+data);//data:<span style="color:red">该用户名已存在</span>
console.log("status:"+status);//status:success
},"html")
}

3.3 jQuery post 方法【推荐】

$.post() 方法通过 HTTP POST 请求从服务器上请求数据。

3.3.1 语法

语法:$.post(url ,[data],[callback],[ type]);
必需的 URL 参数指定请求的资源路径,其它三个参数都是可选的

参数说明
url指定请求的资源路径
data待发送的 key/value 参数(格式1:"key=value";格式2:{key:value}
callback请求成功时的回调函数
type返回的数据类型,xml、html、json、text

注意:如果服务器端返回json字符串,客户端的type=json时,则$.post()会自动把json串转换为json对象

3.3.2 案例

//$.post(url ,[data],[callback],[type]);
function jqueryPost() {

//url:发送请求的地址
//[data]:请求参数;格式:"key=value"或者{key:value}
//[callback]:请求成功时的回调函数。
//[type]:默认值是text。[客户端希望服务器返回的数据类型]
$.post("AjaxTestServlet",{
method:"registCheck",userName:$("#uname").val()},function (data, status) {

//functin回调函数中的data:包含来自请求的结果数据
//functin回调函数中的status:包含请求的状态("success","notmodified","error","timeout","parsererror")
$("#tipMsg").html(data);//将数据响应给页面指定位置
console.log("data:"+data);//data:<span style="color:red">该用户名已存在</span>
console.log("status:"+status);//status:success
},"html")
}

3.4 jQuery getJSON 方法【推荐】

$.getJSON() 该方法以GET请求从服务器端获取json数据

3.4.1 语法

语法:$.getJSON(url ,[data],[callback]);
必需的 URL 参数指定请求的资源路径,其它参数都是可选的

参数说明
url指定请求的资源路径
data待发送的 key=value 参数
callback请求成功时的回调函数

3.4.2 案例(天行网站API调用)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>电竞咨询API</title>
<!-- 方式二:引入在线jQuery库 -->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<h2>电竞咨询API数据请求回显</h2>
<div id="timeList" style="width: 80%;height: 200px;float: left">
<input type="button" value="点击获取电竞咨询信息" onclick="getNewsList()"><br/>
<div id="times">
<table border="1" width="100%" style="text-align: center;">
<tr>
<th>编号</th>
<th>标题</th>
<th>来源</th>
<th>创建时间</th>
</tr>
</table>
</div>
</div>
<script>
//$.getJSON(url,[data],[callback])
// 调用天行网站的API
// 电竞咨询列表
function getNewsList() {

$.getJSON("http://api.tianapi.com/esports/index", {
key : "填写自己申请的秘钥key值", num : 10},function (data,status,xhr) {

console.log(data.length);
//往div中插入表格
for (var i in data.newslist) {

var sig = data.newslist[i];
var $sigStr = $('<tr><td>'+sig.id+'</td><td>'+sig.title+'</td><td>'+sig.source+'</td><td>'+sig.ctime+'</td></tr>');
$('#times table').append($sigStr);
}
})
}
</script>
</body>
</html>

在这里插入图片描述

版权声明:本文为[微醺CC]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_43680543/article/details/120600773