前端革命性技术 AJAX

Dom接口

概述以及使用方式

文档对象模型，是HTML和XML文档的编程接口。提供了对文档的结构化表述，定义了一种可以在程序中对文档进行访问，进而改变文档结构、样式和内容的方式。

使用方式：在JS或Web页面的脚本中使用document和window关键字的API进行相关页面操作。

数据类型

属性	含义
document	返回document对象，表示整个页面。也可以调用ownerDocument属性返回root Document对象。
element	返回页面的某个元素或节点
nodeList	返回某种元素的数组集合。可以使用其返回类型自带的方法item(角标)获取对应元素，也可以使用传统数组获取元素的方法：数组名[角标]
attribute	Document对象的属性，可以通过接口方法创建、获取
nameNodeMap	是某种元素的Map集合，只能通过item(name或index)获取元素，其中name就是键值对中键名，index为枚举类设定

常用API

方法名	作用
document.getElementById(id)	获取ID为指定id的标签
document.getElementsByClassName(name)	获取类名为name的标签集合
doucment.getElementsByTagName(name)	获取标签名为name的标签集合
document.createElement(name)	创建标签名为name的标签
document.parentNode.append(node)	在父标签下添加node子标签
element对象.innerHTML	改变element元素的HTML内容
element对象.style	设置element元素的css样式
element对象.setAttribute()/getAttribute()	设置和获取元素属性
element对象.addEventListener()	给元素添加事件监听器
window.content	返回浏览器当前页面的window对象引用，条件：只在含有属性type="content-primary"的(或tabbrowser或iframe)标签的XUL窗口下才会用到
window.onload	等待页面加载之后执行某段程序脚本
window.scrollTo()	滚动到文档（当前页面）的某个坐标

AJAX概述

AJAX(异步JavaScript和XML)，是一种用于创建快速动态网页的技术，可以通过在后台与服务器进行少量数据交换，实现在不重新加载整个网页的情况下，完成某部分网页的异步更新。

AJAX实现

XMLHttpRequest对象及创建

XMLHttpRequest对象是AJAX的核心，用于网页后台和服务器交换数据

创建XMLHttpRequest对象

//新版本浏览器
let xmlHttpRequest = new XMLHttpRequest();
//老版本（IE5、IE6内核的浏览器）
let activeXObject = new ActiveXObject("Microsoft.XMLHttp");
//解决版本问题
var xmlHttp;
if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
} else {
    xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
}

向服务器发送数据

使用XMLHttpRequest对象的open()和send()方法

open方法

open(请求方式,请求地址,是否异步处理)

参数	含义
请求方式	Get或Post
请求地址	URL ，想访问的文件在服务器的位置
是否异步处理	true或false

Get和Post的抉择

Get相对于Post更简单更快，也可以适应大部分场景，但是以下情况请选择Post方式：

无法使用缓存文件（更新服务器上的文件或数据库）
发送大量数据（Get用URL传数据，受浏览器URL地址长度限制。Post用HTTP头传数据，无长度限制）
发送数据包含未知字符的用户输入

如果XMLHttpRequest对象用户AJAX则异步处理要设置为true，当采用异步处理后向服务器请求时不会进入阻塞状态。可以发送请求后继续执行其他脚本程序，当收到服务器响应时再回头处理接收到的数据。需要将执行脚本放到onreadystatechange函数中

xmlHttp.onreadystatechange=()=>{
if (xmlHttp.readyState==4 && xmlHttp.status==200){
//执行的脚本语句
}
}
//open方法
//send方法

readyState状态码

状态	含义
0	请求未初始化
1	服务链接已建立
2	请求已接收
3	请求处理中
4	请求已完成，且响应已就绪
status状态码
状态	含义
--------	-----
200	ok
404	页面未找到

send方法

send([string]) string是字符串形式的参数，Post方式需要传递参数时使用，Get则send()即可，因为Get方式的参数是写在URL即Open方法的请求地址中。

Get方式发送

xmlHttp.open("GET","test.php?p=参数",true);
xmlHttp.send();

Post方式发送

//不需要传递参数时，send方法可以不用加字符串
xmlHttp.open("POST","text.php",true);
xmlHttp.send();
//需要传递参数时,send方法里放参数
xmlHttp.open("POST","text.php",true);
//设置HTTP头的属性
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send("fname=Bill&lname=Gates");

获取服务器响应数据

直接利用XMLHttpRequest对象的属性就可以

获取服务器响应数据的属性

属性	含义
responseText	获取字符串形式的响应数据
responseXML	获取XML形式的响应数据

AJAX请求实例

前端页面

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script>
			//页面加载完成后执行下列函数
			window.onload = function(){
				//得到输入框id为username的标签
				var userInput = document.getElementById("username");
				//输入框失去鼠标焦点执行下面函数
				userInput.onblur = function(){
					//1 创建XMLHttpRequest对象
					let xhr ;
					if (window.XMLHttpRequest) {
						xhr = new XMLHttpRequest();
					} else {
						xhr = new ActiveXObject("Microsoft.XMLHttp");
					}
					//4.获取响应数据并进行处理
					xhr.onreadystatechange=()=>{
						if (xhr.readyState==4 && xhr.status==200){
							console.log( xhr.responseText );
							//responseText获取服务器响应数据
							if(xhr.responseText == "yes") {
								alert("用户名被占用");
							}
							console.log("请求结束")
						}
					}
					//2 设置参数，准备请求服务器
					//请求地址 http://xxxxxxxxxxxxxxx:8080/AJAX/checkname?regname=需要验证的用户名,使用的是Tomcat服务器
					xhr.open("get", "http://localhost:8080/AJAX/checkname?regname="+userInput.value,true);
					//3 发送异步请求
					xhr.send();
				}
			}
		</script>
	</head>

	<body>
		姓名:<input id="username" type="text" /><br>
		密码:<input type="password"/><br>
		<button onclick="check()">注册</button>
	</body>

</html>

后端服务器请求处理，利用Servlet进行响应

public class NameServlet
    extends HttpServlet
{
    public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //创建list集合，用于模拟数据库数据
        List<String> list = new ArrayList();
        list.add("zhangsan");
        list.add("lisi");
        list.add("wangwu");
        
        //设置响应格式等
        response.setCharacterEncoding("utf-8");
        response.setContentType("text/html");

        //接收名regname的参数
        String name = request.getParameter("regname");
        //判断是否存在，并响应数据
        if (list.contains(name)) {
            response.getWriter().print("yes");
        } else {
            response.getWriter().print("no");
        } 
    }
    
    public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }
}

效果

总结

AJAX用起来特别方便，全程的核心就是XMLHttpRequest对象，下面的大概的步骤：

创建XMLHttpRequest对象
使用open方法设置连接方式、属性等
使用send方法发送请求，等待响应
使用responseText或responseXML获取响应数据，进行相应处理

Author: 小葳宝贝最爱吃饭

posted @ 2021-07-08 21:49 小葳宝贝最爱吃饭阅读(25) 评论(0) 收藏举报

刷新页面返回顶部

小葳宝贝最爱吃饭