Ajax笔记

最新推荐文章于 2024-08-10 16:15:00 发布
最新推荐文章于 2024-08-10 16:15:00 发布
阅读量92 收藏
点赞数
文章标签： javascript 数据库 java ViewUI
原文链接：https://my.oschina.net/lock0818/blog/310680
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

1.Ajax涉及到的7项目技术中，个人认为Javascript, DOM, XML, XMLHttpRequest 比较有用。
    -Javascript一直被定位为客户端的脚本语言，应用最多的地方是表单数据校验。
        可用通过Javascript操作XMLHttpRequest，来跟数据库打交道。
    -DOM(Document Object Model)是提供给HTML和XML使用的一组API，
        提供了文件的表述结构，并可用利用它改变其中的内容和可见物。
        脚本语言通过DOM才可以跟页面进行交互。 
        开发人员可操作及建立文件的属性、方法以及事件都以对象来展现。
    -XML(Extensible Markup Language)可以规范地定义结构化数据，使网上传输的数据和文档符合统一的标准。 
        用XML表述的数据和文档，可以很容易地让所有程序共享。
    -XMLHttpRequest是XMLHTTP组件的对象。
        通过这个对象，Ajax可以像桌面应用程序一样，只同服务器进行数据层面的交换，而不用每次都刷新界面，
        也不用每次将数据处理的工作都交给服务器来做。
        这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。
        ·XMLHttpRequest对象初始化：
        <script language="javascript">
            var http_request=false;
            if(window.XMLHttpRequest) { // Mozilla, Safari, ...
                http_request = new XMLHttpRequest();
            }
            else if(window.ActiveXObject) { // IE
                http_request = new ActiveXObject("Microsoft.XMLHTTP");
            }
        </script>
        ·XMLHttpRequest对象的方法：
            abort() 停止当前请求
            getAllResponseHeaders() 作为字符串返回完整的headers
            getResponseHeader("headerLable") 作为字符串返回单个的header标签
              setRequestHeader("lable","value") 设置header并和请求一起发送
              open("method","URL"[,asyncFlag[,"userName"[, "password"]]]) 设置未决的请求目标URL，方法，和其他参数
               send(content) 发送请求
        ·XMLHttpRequest对象的属性：
              onreadystatechange 状态改变的事件触发器
              readyState 对象状态（integer） 0＝未初始化，1＝读取中，2＝已读取，3＝交互中，4＝完成
              responseText 服务器进程返回数据的文本版本
              responseXML 服务器进程返回数据的兼容DOM的XML文档对象
              status 服务器返回的状态码，如404＝文件未找到，200＝成功
              statusText 服务器返回的状态文本信息


2.初步的开发框架：
    <script language="javascript">
            var http_request = false;
            function send_request(url) {//初始化、指定处理函数、发起请求的函数
                http_request = false;
                //开始初始化XMLHttpRequest对象
                if(window.XMLHttpRequest) { //Mozilla浏览器
                http_request = new XMLHttpRequest();
                if (http_request.overrideMimeType) {//设置MiME类别
                http_request.overrideMimeType("text/xml");
            }
            }
            else if (window.ActiveXObject) { //IE浏览器
                try {
                    http_request = new ActiveXObject("Msxml2.XMLHTTP");
                } catch (e) {
                    try {
                        http_request = new ActiveXObject("Microsoft.XMLHTTP");
                    } catch (e) {}
                }
            }
            if (!http_request) { //异常，创建对象实例失败
                window.alert("不能创建XMLHttpRequest对象实例.");
                return false;
            }
            http_request.onreadystatechange = processRequest;
            //确定发送请求的方式和URL以及是否同步执行下段代码
            http_request.open("GET", url, true);
            http_request.send(null);
        }
        //处理返回信息的函数
        function processRequest() {
            if (http_request.readyState == 4) { //判断对象状态
            if (http_request.status == 200) { //信息已经成功返回，开始处理信息
            alert(http_request.responseText);
        } else { //页面不正常
            alert("您所请求的页面有异常。");
        }
        }
        }
    </script>

3.DOM树的根结点是个Document对象。
    ·常用Document方法:
        createAttribute(), createComment(), createElement(), createTextNode(), getElementById(), getElementsByTagName()
    ·Element常用属性：
        getAttribute(), getAttributeNote(), getElementByTabName(), hasAttribute(), removeAttribute(), removeAttributeNode(),
        setAttribute(), setAttributeNode()
    ·Node对象常用属性：
        attributes, childNodes, firstChild, lastChild, nextSibling, nodeName, nodeType, parentNode, previousSibling,
        appendChild(), cloneNode(), hasChildNodes(), insertBefore(), removeChild(), replaceChild()


4.例子
    ·数据校验 test.htm, sample1_2.htm,
    ·级联菜单 test.htm, sample2_2.htm
    ·历遍文档的节点 sample3_1.htm
    ·修改文档的内容 sample4_1.htm, sample4_2.htm, sample4_3.htm
    ·往文档添加新内容 sample5_1.htm
    ·使用DOM操作XML文档 sample6_1.htm, employees.xml
     ·处理返回的XML sample7_1.htm

5.XML作为一种数据保存、呈现、交互的文档，其数据往往是动态生成的，通常由JavaBean转换过来。
    由JavaBean转换成XML文档的方式有多种，常用两种： 
    1）类自行序列化成XML： 
        public Element toXml(){
            Element employee = new Element("employee");
            element.setAttribute("name", name);
            Element jobE = new Element("job").addContent(job);
            employee.setContent(jobE);
            Element salaryE = new Element("salary").addContent(salary);
            employee.setContent(salaryE);
            return employee;
        }

2）页面模板生成XML方式： 【sample8_2.htm】


5.Ajax实际使用例子：
***************************************
    var xh = this.getXMLHTTP();
    xh.onreadystatechange = function(){
        if(xh.readyState==4 && xh.responseText){
        opts.load(null, xh.responseText, null);
        try{
            _ajaxCallback();
        }catch(e){};
        }
    }
    xh.open(isPost ? "POST" : "GET", url, true);
    xh.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8");
    xh.send(isPost ? qs : null);

***************************************

××××××××××××××××××××××××××××××××××【例子如下】×××××××××××××××××××××××××××××××××××××××××

test.html 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Citibank ICC, A - Systems</TITLE>
<META name="GENERATOR" content="IBM WebSphere Studio">

<TITLE>Citibank ICC - Change Password</TITLE>

<SCRIPT language="javascript">
	var http_request = false;
	function send_request(url) {//初始化、指定处理函数、发起请求的函数
		http_request = false;
		//开始初始化XMLHttpRequest对象
		if(window.XMLHttpRequest) { //Mozilla浏览器
			http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType) {//设置MiME类别
				http_request.overrideMimeType("text/xml");
			}
		}
		else if (window.ActiveXObject) { //IE浏览器
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if (!http_request) { //异常，创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例.");
			return false;
		}
		http_request.onreadystatechange = processRequest;
		//确定发送请求的方式和URL以及是否同步执行下段代码
		http_request.open("GET", url, true);
		http_request.send(null);
	}
	//处理返回信息的函数
	function processRequest() {
		if (http_request.readyState == 4) { //判断对象状态
			if (http_request.status == 200) { //信息已经成功返回，开始处理信息
				document.getElementById(currentPos).innerHTML = http_request.responseText;
			} else { //页面不正常
				alert("您所请求的页面有异常。");
			}
		}
	}
	
	function userCheck(){
		var f=document.form1;
		var username=f.username.value;
		if(username==""){
			alert("User Name can not be empty!");
			f.username.focus();
			return false;
		}else{
			send_request('C:/Users/FH37580/Desktop/Ajax/sample1_2.jsp?username='+username);
		}
	}
	
	function showRoles(obj) {
		document.getElementById(obj).parentNode.style.display = "";
		document.getElementById(obj).innerHTML = "正在读取数据..."
		currentPos = obj;
		send_request("sample2_2.jsp?playPos="+obj);
	}
</SCRIPT>    
</HEAD>

<BODY>
<CENTER>
<TABLE WIDTH="450" border="0" cellspacing="0" cellpadding="0">
	<form name="form1" action="" method="post">
		UserName<input type="text" name="username" value="">&nbsp;
		<input type="button" name="check" value="UniquenessChecking" onClick="userCheck()">
		<input type="submit" name="submit" value="submit">
	</form>
</TABLE>
<table width="200" border="0" cellspacing="0" cellpadding="0">
	<tr>
		<td height="20">
		<a href="javascript:void(0)" onClick="showRoles('pos_1')">经理室</a>
		</td>
	</tr>
	<tr style="display:none">
		<td height="20" id="pos_1"> </td>
	</tr>
	<tr>
		<td height="20">
		<a href="javascript:void(0)" onClick="showRoles('pos_2')">开发部</a>
	</td>
	</tr>
	<tr style="display:none ">
		<td id="pos_2" height="20"> </td>
	</tr>
</table>
</CENTER>
</FORM>
</BODY>
</HTML>



sample1_2.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Citibank ICC, A - Systems</TITLE>
<META name="GENERATOR" content="IBM WebSphere Studio">

<TITLE>Citibank ICC - Change Password</TITLE>
</HEAD>

<BODY>
<FORM method="post" action="<%=genericServletName%>" name="changePassword" id="changePassword" >
<CENTER>
<TABLE WIDTH="450" border="0" cellspacing="0" cellpadding="0">
<%@ page contentType="text/html;charset=utf-8" errorPage="" %>
<%
	String username = request.getParameter("username");
	if("huangfei".equals(username)){
		out.print("用户名已经被注册，请更换一个用户名。");
	}else{
		out.print("用户名尚未被使用，您可以继续。");
	}
%>
</TABLE>
</CENTER>

</FORM>
</BODY>
</HTML>



sample2_2.htm 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
</HEAD>
<BODY>
<FORM method="post" action="<%=genericServletName%>" name="changePassword" id="changePassword" >
<CENTER>
<TABLE WIDTH="450" border="0" cellspacing="0" cellpadding="0">
<%@ page contentType="text/html; charset=gb2312" errorPage="" %>
<%
String playPos = request.getParameter("playPos");
if("pos_1".equals(playPos))
out.print("&nbsp;&nbsp;总经理<br>&nbsp;&nbsp;副总经理");
else if("pos_2".equals(playPos))
out.println("&nbsp;&nbsp;总工程师<br>&nbsp;&nbsp;软件工程师");
%>
</TABLE>
</CENTER>

</FORM>
</BODY>
</HTML>



sample3_1.htm 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题</title>
<script language="javascript">
	var elementName = ""; //全局变量，保存Element标记名，使用完毕要清空
	function countTotalElement(node) { //参数node是一个Node对象
		
		var total = 0;
		if(node.nodeType == 1) { //检查node是否为Element对象
			alert(node.tagName);
			total++; //如果是，计数器加1
			elementName = elementName + node.tagName + "\r\n"; //保存标记名
		}
		var childrens = node.childNodes; //获取node的全部子节点
		for(var i=0;i<childrens.length;i++) {
			total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作
		}
		return total;
	}
</script>
</head>
<body>
<a href="javascript:void(0)"
onClick="alert('标记总数：'+countTotalElement(document) + '\r\n' + '全部标记如下：' + '\r\n' + elementName)">开始统计</a>
<JMK><CBA></CBA></JMK>
</body>
</html>



sample4_1.htm 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Not Title</title>
<script language="javascript">
function reverseNode(node) { //颠倒节点node的顺序
	var children = node.childNodes; //获取子节点列表
	var childrenNum = children.length;
	for(var i=childrenNum-1;i>=0;i--) { //逆向历遍子节点列表
		var c = node.removeChild(children[i]); //删除指定子节点，保存在c中
		node.appendChild(c); //将c放在新位置上
	}
}
</script>
</head>
<body>
<p>第一行</p>
<p>第二行</p>
<p>第三行</p>
<p><input type="button" name="reverseGo" value="颠倒" onClick="reverseNode(document.body)"></p>
</body>
</html>



sample4_2.htm 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题</title>
<script language="javascript">
function reverseTable() {
	var node = document.getElementsByTagName("table")[0]; //第一个表格
	var child = node.getElementsByTagName("tr"); //取得表格内的所有行
	var newChild = new Array(); //定义缓存数组，保存行内容
	for(var i=0;i<child.length;i++) {
		newChild[i] = child[i].firstChild.innerHTML;
	}
	node.removeChild(node.childNodes[0]); //删除全部单元
	var header = node.createTHead(); //新建表格行头
	for(var i=0;i<newChild.length;i++) {
		var headerrow = header.insertRow(i); //插入一个单元行
		var cell = headerrow.insertCell(0); //在单元行中插入一个单元格
		//在单元格中创建TextNode节点
		cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));
	}
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0">
	<tr>
		<td height="25">第一行</td>
	</tr>
	<tr>
		<td height="25">第二行</td>
	</tr>
	<tr>
		<td height="25">第三行</td>
	</tr>
	<tr>
		<td height="25">第四行</td>
	</tr>
</table>
<br>
<input type="button" name="reverse" value="开始颠倒" onClick="reverseTable()">
</body>
</html>



sample4_3.htm 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Title</title>
<script language="javascript">
function replaceContent() {
	
	document.getElementById("replaceNode").setAttribute("disabled", true);
	var table1 = document.getElementsByTagName("table")[0];
	var table2 = document.getElementsByTagName("table")[1];
	var child1 = table1.firstChild.firstChild.firstChild; //定位到<td>节点	table->tbody->tr->td
	var child2 = table2.firstChild.firstChild.firstChild; //定位到<td>节点	table->tbody->tr->td
	var tempChild = child2.firstChild; //定位到表格二<td>内含的TextNode节点
	try {
		//用表格二的单元格内容替换表格一的单元格内容， 表格二变成没有单元格
		child1.replaceChild(tempChild,child1.firstChild);  //替换的内容在前，被替换的内容在后
		//执行后,table2的子节点已经被转移到table1了，table2已经没有子节点，不能再调用table2的子节点。
	}catch(e){
		alert(e);
	}
}
</script>
</head>
<body>
<table width="200" border="1" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
			<td>表格一</td>
		</tr>
	</tbody>
</table>
<br>
<table width="200" border="1" cellspacing="0" cellpadding="0">
	<tbody>
		<tr>
		<td>表格二</td>
		</tr>									
	</tbody>
</table>
<br>
<input id="replaceNode" type="button" name="replaceNode" value="替换"  onClick="replaceContent()">
</body>
</html>



sample5_1.htm 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>No Title</title>
<script language="javascript">
function insertStr() {
	var f = document.form1;
	var value = f.str.value;
	if(value!="") {
		//从最终的TextNode节点开始，慢慢形成<tbody>结构
		var text = document.createTextNode(value); //新建一个TextNode节点
		var td = document.createElement("td"); //新建一个td类型的Element节点
		var tr = document.createElement("tr"); //新建一个tr类型的Element节点
		var tbody = document.createElement("tbody"); //新建一个tbody类型的Element节点
		td.appendChild(text); //将节点text加入tr中
		tr.appendChild(td); //将节点td加入tr中
		tbody.appendChild(tr); //将节点加入tbody中
		var parNode = document.getElementById("table1"); //定位到table上
		parNode.insertBefore(tbody,parNode.firstChild); //将节点tbody插入到节点顶部
		//parNode.appendChild(tbody); //将节点tbody加入节点尾部
	}
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
	<input name="str" type="text" id="str" value="">
	<input name="insert" type="button" id="insert" value="留言" onClick="insertStr()">
</form>
<table width="400" border="1" cellspacing="0" cellpadding="0" id="table1">
	<tbody>
		<tr>
			<td height="25">网友留言列表</td>
		</tr>
	</tbody>
</table>
</body>
</html>



sample6_1.htm 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Title</title>
<script language="javascript">
function loadXML(handler) {
	var url = "employees.xml";
	if(document.implementation&&document.implementation.createDocument) {
		var xmldoc = document.implementation.createDocument("", "", null);
		xmldoc.onload = handler(xmldoc, url);
		xmldoc.load(url);
	}
	else if(window.ActiveXObject) {
		var xmldoc = new ActiveXObject("Microsoft.XMLDOM");
		xmldoc.onreadystatechange = function() {
			if(xmldoc.readyState == 4) 
				handler(xmldoc, url);
		}
		xmldoc.load(url);
	}
}
function makeTable(xmldoc, url) {
	var table = document.createElement("table");
	table.setAttribute("border","1");
	table.setAttribute("width","600");
	table.setAttribute("class","tab-content");
	document.body.appendChild(table);
	var caption = "Employee Data from " + url;
	table.createCaption().appendChild(document.createTextNode(caption));
	var header = table.createTHead();
	var headerrow = header.insertRow(0);
	headerrow.insertCell(0).appendChild(document.createTextNode("姓名"));
	headerrow.insertCell(1).appendChild(document.createTextNode("职业"));
	headerrow.insertCell(2).appendChild(document.createTextNode("工资"));
	var employees = xmldoc.getElementsByTagName("employee");
	for(var i=0;i<employees.length;i++) {
		var e = employees[i];
		var name = e.getAttribute("name");
		var job = e.getElementsByTagName("job")[0].firstChild.data;
		var salary = e.getElementsByTagName("salary")[0].firstChild.data;
		var row = table.insertRow(i+1);
		row.insertCell(0).appendChild(document.createTextNode(name));
		row.insertCell(1).appendChild(document.createTextNode(job));
		row.insertCell(2).appendChild(document.createTextNode(salary));
	}
}
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="loadXML(makeTable)">
</body>
</html>



employees.xml 
<?xml version="1.0" encoding="utf-8"?>
<employees>
	<employee name="J.Doe">
		<job>Programmer</job>
		<salary>32768</salary>
	</employee>
	<employee name="A.Baker">
		<job>Sales</job>
		<salary>70000</salary>
	</employee>
	<employee name="Big Cheese">
		<job>CEO</job>
		<salary>100000</salary>
	</employee>
</employees>



sample7_1.htm 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>No Title</title>
<SCRIPT language="javascript">
	var http_request = false;
	function send_request(url) {//初始化、指定处理函数、发起请求的函数
		http_request = false;
		//开始初始化XMLHttpRequest对象
		if(window.XMLHttpRequest) { //Mozilla浏览器
			http_request = new XMLHttpRequest();
			if (http_request.overrideMimeType) {//设置MiME类别
				http_request.overrideMimeType("text/xml");
			}
		}
		else if (window.ActiveXObject) { //IE浏览器
			try {
				http_request = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
				} catch (e) {}
			}
		}
		if (!http_request) { //异常，创建对象实例失败
			window.alert("不能创建XMLHttpRequest对象实例.");
			return false;
		}
		http_request.onreadystatechange = processRequest;
		//确定发送请求的方式和URL以及是否同步执行下段代码
		http_request.open("GET", url, true);
		http_request.send(null);
	}
	//处理返回信息的函数
	function processRequest() {
		if (http_request.readyState == 4) { //判断对象状态
			if (http_request.status == 200) { //信息已经成功返回，开始处理信息
				var returnObj = http_request.responseXML;
				var xmlobj = http_request.responseXML;
				var employees = xmlobj.getElementsByTagName("employee");
				var feedbackStr = "";
				for(var i=0;i<employees.length;i++) { //循环读取employees.xml的内容
					var employee = employees[i];
					feedbackStr += "员工：" + employee.getAttribute("name");
					feedbackStr +=
					"职位：" + employee.getElementsByTagName("job")[0].firstChild.data;
					feedbackStr +=
					"工资：" + employee.getElementsByTagName("salary")[0].firstChild.data;
					feedbackStr += "\r\n";
				}
				alert(feedbackStr);
			} else { //页面不正常
			alert("您所请求的页面有异常。");
			}
		}
	}
</SCRIPT>    
</head>
<body>
<input type="button" name="read"
value="读取XML" onClick="send_request('C:/Users/FH37580/Desktop/Ajax/employees.xml')">
</body>
</html>



sample8_2.htm 
<html>
<head>
</head>
<body>
<%@ page contentType="application/xml; charset=gb2312" import="Employee"%>
<%@ page import="java.util.Collection,java.util.ArrayList"%>
<?xml version="1.0"?>
<%@ taglib uri="/WEB-INF/struts-logic.tld" prefix="logic" %>
<%@ taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%
Employee em1 = new Employee();
em1.setName("J.Doe");
em1.setJob("Programmer");
em1.setSalary("32768");
Employee em2 = new Employee();
em2.setName("A.Baker");
em2.setJob("Sales");
em2.setSalary("70000");
Employee em3 = new Employee();
em3.setName("Big Cheese");
em3.setJob("CEO");
em3.setSalary("100000");
Collection employees = new ArrayList();
employees.add(em1);
employees.add(em2);
employees.add(em3);
pageContext.setAttribute("employees",employees);
%>
<employees>
<logic:iterate name="employees" id="employee">
<employee name="<bean:write name='employee' property='name'/>">
<job><bean:write name="employee" property="job"/></job>
<salary><bean:write name="employee" property="salary"/></salary>
</employee>
</logic:iterate>
</employees>
</body>
</html>







转载于:https://my.oschina.net/lock0818/blog/310680

weixin_34009794
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
协同使用 WebSphere Studio V5 与 Struts Framework: 第二部分：使用 Struts 验证器
ckangtai的专栏
04-02 719
引言Web 表单验证是开发 Web 应用程序的一个不可缺少的部分。Apache Software Foundation 开发的 Jakarta 通用验证器（Jakarta Commons Validator）提供了一个分离验证逻辑与应用程序业务逻辑的框架。您可以协同或不协同使用 Struts 与 Commons Validator。Struts 发行版附带的通
计数器模块
一念永恒
07-28 1406
按照需求fenwei简单计数器，
AJAX笔记
angel_791的博客
07-14 383
AJAX笔记
AJAX 笔记
weixin_69820837的博客
11-30 379
axios({ url: '目标资源地址', method:'请求方法 ', data:{ //==》get：可以不写，默认为get，查询参数用params 参数名:值， // post：必须要写， } }).then((result) =>{ // 对服务器返回的数据做后续处理 }）语法：在then方法的后面，通过点语法调用catch方法，传入回调函数并定义形参。接口：使用AJAX和服务器通讯时，使用的URL，请求方法，以及参数。请求方法：对服务器资源，要执行的操作。使用 axios 函数。
Ajax 笔记
一条菜鸟鱼的博客
07-18 255
Ajax 学习笔记
尚硅谷Ajax笔记
weixin_57780589的博客
02-01 1203
//引入express//创建应用对象//创建路由规则//request对请求报文的封装//response是对响应报文的封装//设置响应});//监听端口启动服务console.log("服务已经启动，8000端口监听中……");});
ajax笔记
weixin_51302229的博客
08-02 136
ajax笔记传统网站存在的问题Ajax的运行环境 传统网站存在的问题 网速慢的请款下，页面加载时间长，用户只能等待 表单提交后，如果一项内容不合格，需要重新填写所有表单内容 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间 Ajax是一种浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验 主要应用场景： 页面上拉加载更多数据 列表数据无刷新分页 表单项离开焦点数据验证 搜索框显示文字下拉列表 Ajax的运行环境 Ajax需要运行在网站环境才能生效，需要后端服务
ajax 笔记
shanhaojie的博客
01-29 221
post 请求需要加请求头：如下
ajax笔记ajax笔记ajax笔记
04-03
ajax笔记
黑马程序员Ajax笔记
05-26
在黑马程序员的Ajax笔记中，我们将深入探讨这一技术的各个方面。 ### 1. Ajax基本原理 Ajax的核心是JavaScript对象XMLHttpRequest，它允许浏览器在后台与服务器通信。通过创建XMLHttpRequest对象、打开连接、发送...
Ajax笔记.docx
06-12
**Ajax技术概述** Ajax，全称Asynchronous JavaScript and XML，是一种用于创建动态和交互性网页的技术。它允许网页在不完全刷新的情况下与服务器交换数据并更新部分网页内容，从而提升了用户体验，减少了网络带宽...
Ajax笔记(狂神说java)
qq_43161404的博客
12-27 1060
狂神ajax讲解笔记
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 285
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
牛客JS题（三十四）监听对象
最新发布
不起眼小菜菜的博客
08-10 343
注释很详细，直接上代码……
【Vue3】图片未加载成功前占位
菜就多练
08-08 312
原生img标签可以通过自定义指令解决< template > < img class = " image_item-img " v-preload = " ' loading' " src = " https://xx " alt = " 加载失败 " /> < script setup > import {reactive } from 'vue' // 自定义图片占位 const vPreload = {
Ajax笔记：Ajax基础知识和Ajax开发技巧
Ajax笔记 Ajax是一种异步的JavaScript和XML的结合体，可以在不重新加载整个网页的情况下，实现局部更新网页内容。下面是关于Ajax的详细知识点： 一、 Ajax基本概念 Ajax是Asynchronous JavaScript and XML的缩写...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值