一、jQuery案例
1.属性
1.1overflow
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> div{ background-color: cyan; width: 150px; height: 150px; overflow: visible; } </style> </head> <body> <!-- overflow:溢出元素内容区域的内容会做出如何的处理 visible:默认值，内容不会被修剪，会呈现在元素之外 hidden:内容会被修剪，并且多余的内容是不可见的 scroll:内容会被修剪，但是，浏览器会显示滚动条显示多余的内容 auto:如果内容会被修剪，浏览器会显示滚动条显示多余的内容 inherit:从父标签 继承overflow的属性 --> <div> visible:默认值，内容不会被修剪，会呈现在元素之外 hidden:内容会被修剪，并且多余的内容是不可见的 scroll:内容会被修剪，但是，浏览器会显示滚动条显示多余的内容 auto:如果内容会被修剪，浏览器会显示滚动条显示多余的内容 inherit:从父标签 继承overflow的属性 </div> </body> </html>
1.2cursor
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- cursor:定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状 --> <span style="cursor: auto;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: crosshair;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: default;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: pointer;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: move;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: e-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: ne-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: nw-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: n-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: se-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: sw-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: s-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: w-resize;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: text;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: wait;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> <span style="cursor: help;">定义了鼠标指针放在一个元素的边界范围内呈现出来的光标形状</span><br /> </body> </html>
二、AJAX
1.ajax简介
1.1什么是ajax
AJAX,Asynchronous Javascript And XML,异步的javascript和xml
AJAX并不是一门新的编程语言，而是一种用于快速创建动态网页的技术
使用js与服务器之间进行交互，传输的数据可以是XML
交互方式：
同步交互：客户端发出一个请求之后，需要等待服务端的响应，只有响应结束之后，才可以发送第二次请求
异步交互：客户端发出一个请求之后，无需等待服务端的响应，就可以直接发送第二次请求
ajax除了异步的特点之外，还有一个使用：在浏览器中实现局部刷新【给用户的感受是在不知不觉中完成了一个请求和响应的过程】
1.2js实现局部刷新
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> #usernamespan{ display: none; } </style> </head> <body> <form id="form1"> <input type="text" name="username" id="input1"/> <span id="usernamespan">*用户名不能为空</span> <input type="submit" /> </form> <script> window.onload = function(){ var form = document.getElementById("form1"); //绑定表单事件 form.onsubmit = function(){ //给表单对象添加了一个监听 //获取用户名input的value值 var usernameValue = form.username.value; if(!usernameValue){ //获取span对象 var span = document.getElementById("usernamespan"); span.style.display = "block"; //阻止表单提交 return false; } //内容是合法的，允许表单提交 return true; } } </script> </body> </html>
1.3ajax的使用场景
a.关键字搜索
b.页面局部刷新
1.4ajax的优缺点
优点：
a.ajax向服务器发出异步请求
b.无需刷新整个页面
c.性能较高，效率较高
缺点：
a.并不适用于所有的场景，在某些操作中还的使用同步交互
b.虽然提高了用户体验，但是无形中向服务器发送请求的次数增多，会增大服务器压力
c.还需要考虑浏览器的兼容问题
2.ajax的技术
四步操作
a.创建核心对象
b.使用核心对象打开和服务器之间的连接
c.发送请求
d.注册监听，监听服务器的响应
涉及到的类，属性和方法
a.XMLHTTPRequest类
b.open(请求方式，服务器地址，是否异步)
c.send(请求体)
d.onreadystatechange,指定监听函数，当核心对象的状态发生改变的时候会被触发
e.readyState:当前核心对象的状态，如果取值为4说明服务器响应结束
f.status:服务器响应的状态码，如果为200表示请求成功
g.reponseText:获取服务器的响应体
2.1表单get请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- url http://主机名：端口号/资源路径?key1=value1&key2=value2&..... http://10.20.152.27/formget.php?username=aaa&age=27&password=hello 什么是表单： 向服务器提交数据， action：提交到哪里 method：提交的方式 get请求： 把数据名称和数据使用=连接起来，如果有多个键值对，则使用&连接，将连接好的数据拼接到url的？后面 缺点：所有的信息会出现在地址栏中，不安全，最大为2kb，不适合上传大的数据 优点：简洁，效率 使用ip地址测试，可以是127.0.0.1【localhost】 --> <form action="http://10.20.152.27/formget.php" method="get"> <input type="text" name="username" /> <input type="text" name="age" /> <input type="text" name="password" /> <input type="submit" /> </form> </body> </html>
2.2表单post请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- post： 优点：安全，上传数据的大小在理论上没有限制，适合上传比较大的数据 缺点：麻烦 --> <form action="http://10.20.152.27/formpost.php" method="post"> <input type="text" name="username" /> <input type="text" name="age" /> <input type="text" name="password" /> <input type="submit" /> </form> </body> </html>
2.3AJAX get请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">获取密码和用户名</button> <script> window.onload = function(){ //给按钮绑定点击事件， var btn = document.getElementById("btn"); btn.onclick = function(){ //向服务器发起请求 //1.创建请求对象 var xhr = null; //涉及到浏览器的兼容性问题 //Python:try-except js:try-catch try{ xhr = new XMLHttpRequest(); }catch(e){ //IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.与服务器建立连接 /* * open(请求方式，服务器的地址，是否需要异步) * get：将上传的数据拼接在地址的后面 */ //对参数中出现的中文需要进行编码，js：encodeURI(“中文”)，将编码之后的结果传输 xhr.open("get","http://10.20.152.27/ajaxget.php?username=" + encodeURI("杨阳") + "&age=16&password=abc123",true); //3.发起请求 xhr.send(); //4.建立监听，监听服务器的响应 xhr.onreadystatechange = function(){ //服务器响应的信息 /* * 有两个字段可以捕捉 * readystate:表示当前对象的状态 * 1 2 3 4，取值为4则表示响应结束 * * status:服务器返回的响应码 * 200：数据请求成功 * 404：资源找不到 * 400：加载错误 * 500：数据库问题 * * responseText:保存的是服务器返回的响应信息 */ if(xhr.readyState == 4){ if(xhr.status == 200){ alert("数据请求成功"); alert(xhr.responseText); }else{ alert("数据请求失败"); } } } } } </script> </body> </html>
2.4AJAX post请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">获取密码和用户名</button> <script> window.onload = function(){ //给按钮绑定点击事件， var btn = document.getElementById("btn"); btn.onclick = function(){ //向服务器发起请求 //1.创建请求对象 var xhr = null; //涉及到浏览器的兼容性问题 //Python:try-except js:try-catch try{ xhr = new XMLHttpRequest(); }catch(e){ //IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.与服务器建立连接 /* * open(请求方式，服务器的地址，是否需要异步) * post：将上传的数据拼接在地址的后面 */ //对参数中出现的中文需要进行编码，js：encodeURI(“中文”)，将编码之后的结果传输 //username=" + encodeURI("杨阳") + "&age=16&password=abc123" xhr.open("post","http://10.20.152.27/ajaxpost.php?",true); //注意：使用post的方式请求服务器的时候，需要指定数据的编码格式 //请求头：设置数据的编码格式，固定写法 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //3.发起请求 //请求体 var str = "username=" + encodeURI("杨阳") + "&age=16&password=abc123"; xhr.send(str); //4.建立监听，监听服务器的响应 xhr.onreadystatechange = function(){ //服务器响应的信息 /* * 有两个字段可以捕捉 * readystate:表示当前对象的状态 * 1 2 3 4，取值为4则表示响应结束 * * status:服务器返回的响应码 * 200：数据请求成功 * 404：资源找不到 * 400：加载错误 * 500：数据库问题 * * responseText:保存的是服务器返回的响应信息 */ if(xhr.readyState == 4){ if(xhr.status == 200){ alert("数据请求成功"); alert(xhr.responseText); }else{ alert("数据请求失败"); } } } /* http://127.0.0.1:8020/Day10Code/8.ajax%E7%9A%84get%E8%AF%B7%E6%B1%82.html?__hbt=1544774103455 * */ } } </script> </body> </html>
2.5ajax应用
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">下载</button> <ul id="ul"> </ul> <script> //需求1：封装函数，既可以进行get请求，也可以进行post请求 //请求方式，请求服务器地址，需要发送的数据，请求成功之后的回调函数 function ajax(method,url,data,successFn){ //1.创建对象 var xhr = null; try{ xhr = new XMLHttpRequest(); }catch(e){ //IE5 IE6 xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.与服务器之间建立连接 //判断请求的方式,如果是get的话则需要进行更改url的形式 if((method == "get" || method == "GET") && data){ url += "?" + data; } xhr.open(method,url,true); //3.发送请求 if(method == "get" || method == "GET"){ xhr.send(); }else{ xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data); } //4.监听服务器的响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ //注意：ajax请求服务器之后，获取到的数据格式可能会不一样，我们自定义对数据的处理 //调用回调函数，将请求成功之后得到的结果传参 successFn(xhr.responseText); }else{ alert("数据请求失败"); } } } } //需求2：请求服务器的新闻列表，使用无序列表显示出来 window.onload = function(){ //获取标签对象 var btn = document.getElementById("btn"); var ul = document.getElementById("ul"); //绑定事件，点击按钮的时候向服务器发起请求 btn.onclick = function(){ ajax("get","http://10.20.152.27/news.php","",function(reponseData){ //解析数据 //返回的结果是一个数组 var arr = JSON.parse(reponseData); //title和date被当做属性处理 for(var i = 0;i < arr.length;i++){ //arr[i] //创建标签的对象 var li = document.createElement("li"); var a = document.createElement("a"); var span = document.createElement("span"); //获取文本，并且设置为标签的文本 a.innerHTML = arr[i].title; a.href = "#"; span.innerHTML = "【" + arr[i].date + "】"; //整合 li.appendChild(a); li.appendChild(span); ul.appendChild(li); } }) } } </script> </body> </html>
扫一扫
1194
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
