本文介绍了AJAX的基本概念、工作原理及其应用场景，并通过实例演示了如何利用原生JavaScript及jQuery库实现GET和POST请求。此外，还展示了bootstrap的常用组件。
一、AJAX
1.ajax简介
AJAX=Asynchronous JavaScript And XML,异步的javascript和xml，使用javascript与服务器进行异步交互，传输的数据为XML【并不是只能传输XML】
ajax并不是一门编程语言，而是用来快速创建动态网页的技术
同步交互：客户端发出一个请求之后，需要等待服务端响应结束之后，才能发出第二次请求
异步交互：客户端发出一个请求之后，不需要等待服务端的响应，就可以发出第二次请求
注意：ajax除了异步的特点之外，还可以实现浏览器页面局部刷新【给用户的感受是在不知不觉中完成请求和响应过程】
2.js实现局部刷新
表单的事件：onsubmit：阻止表单提交【return false】
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <h1>注册页面</h1> <form action="" method="get" id="form1"> 用户名：<input type="text" name="username" /> <span id="usernameSpan"></span> <br /> 密码：<input type="password" name="password" /> <span id="passwordSpan"></span> <br /> <input type="submit" value="提交" /> </form> <script type="text/javascript"> window.onload = function(){ //当文档加载完毕时执行函数 var form = document.getElementById("form1"); form.onsubmit = function(){//给表单添加一个监听，监听表单被提交的事件 //var usernameValue = form.username.value; var usernameValue = document.getElementsByTagName("input")[0].value; if(!usernameValue){ //判断表单的值是否为空 //获取span的标签对象 var usernameSpan = document.getElementById("usernameSpan"); usernameSpan.innerText = "内容不能为空！";//设置span的文本内容 return false; //表示拦截了表单的提交 } return true; } } </script> </body> </html>
3.ajax的工作原理
C/S: Client Server 客户端服务端
B/S:Broswer Server 浏览器服务端
说明：进行web开发，主要应用的是B/S模式
4.ajax的使用场景
1.关键字搜索：举例：以百度为例，输入关键字的时候，浏览器会使用ajax技术向服务器发送一个请求，查询服务器中包含关键字的词条，然后将查询的结果返回给浏览器，最后浏览器将4个词条显示在下拉列表中
2.表单中输入项的局部刷新：整个页面并没有全部刷新，只是刷新已经被操作完成的页面，当请求发出之后，浏览器还可以进行其他的操作，无需等待服务器的响应【异步交互】
5.ajax的优缺点
优点：
a.使用js向服务器发送异步请求
b.无需刷新整个页面
c.性能高，工作效率高
缺点：
a.ajax并不适用于所有的场景，很多场景还是需要使用同步进行交互
b.虽然提高了用户体验，但是无形中向服务器会发送很多次的请求，导致服务器压力增大
c.使用js，还需要处理浏览器的兼容问题
6.原生ajax
四步操作：
a.创建核心对象
b.使用核心对象打开与服务器之间的连接
c.发送请求
d.注册监听，监听浏览器的响应
核心对象类：XMLHTTPRequest
open(请求方式，请求的地址，是否需要异步)
send(请求体)
onreadystatechange:监听事件，它会在核心对象的状态发生改变的时候自动被调用
readyState：当前核心对象的状态，取值范围为1~4,4表示服务器响应结束
status：服务器响应的状态码，只有当服务器响应结束之后才会有，200表示请成功成功
responseText：获取服务器响应的响应体
6.1表单get请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 什么是表单？ 向服务器提交各种类型的数据 action：提交到哪里 method：提交的方式 采用get方式提交数据 通信协议：//主机名：端口号/资源的路径?username=xxx&password=xxx ------》URL，统一资源定位符，建立计算机本地和网络之间的通路 --> <form action="http://127.0.0.1/formGet.php" method="get"> <!--注意：前端需要和服务端保持交互字段的一致性--> <input type="text" name="username"/><br /> <input type="text" name="age"/><br /> <input type="password" name="password" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
6.2表单post请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 注意：通过post进行数据的传输，在浏览器的内部进行传输 --> <form action="http://127.0.0.1/formPost.php" method="post"> <!--注意：前端需要和服务端保持交互字段的一致性--> <input type="text" name="username"/><br /> <input type="text" name="age"/><br /> <input type="password" name="password" /><br /> <input type="submit" value="提交" /> </form> </body> </html>
6.3ajax get请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">提交用户数据</button> <script type="text/javascript"> window.onload = function(){ //获取按钮标签对象 var btn = document.getElementById("btn"); //绑定事件 btn.onclick = function(){ //请求数据 //1.创建请求核心对象 var xhr = null; //处理兼容问题 //异常处理：try-catch try{ xhr = new XMLHttpRequest(); }catch(e){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.与服务器建立连接 //get的特点：将数据拼接到url中 //请求方式，请求的服务器地址，是否需要异步 //注意：如果数据中有中文，则向服务器发送之前需要进行编码【字符类型的数据转化为字节类型的数据】 xhr.open("get","http://127.0.0.1/ajaxGet.php?username=" + encodeURI("杨阳") + "&age=20&password=abc123",true); //3.发送连接请求 xhr.send(); //4.监听，监听服务器给的响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ /* * 404：数据不存在，未找到 * 400：加载错误 * 500：数据库问题 */ if(xhr.status == 200){ alert("数据请求成功"); alert(xhr.responseText); }else{ alert("数据请求失败"); } } } } } </script> </body> </html>
6.4ajax post请求
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">提交用户数据</button> <script type="text/javascript"> window.onload = function(){ //获取按钮标签对象 var btn = document.getElementById("btn"); //绑定事件 btn.onclick = function(){ //请求数据 //1.创建请求核心对象 var xhr = null; //处理兼容问题 //异常处理：try-catch try{ xhr = new XMLHttpRequest(); }catch(e){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.与服务器建立连接 //请求方式，请求的服务器地址，是否需要异步 //注意：如果数据中有中文，则向服务器发送之前需要进行编码【字符类型的数据转化为字节类型的数据】 xhr.open("post","http://127.0.0.1/ajaxPost.php",true); //?username=" + encodeURI("杨阳") + "&age=20&password=abc123" //3.发送连接请求 //设置数据的编码格式，固定写法【请求头】 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); //设置需要发送的数据【请求体】 var str = "username=" + encodeURI("杨阳") + "&age=20&password=abc123"; xhr.send(str); //4.监听，监听服务器给的响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ /* * 404：数据不存在，未找到 * 400：加载错误 * 500：数据库问题 */ if(xhr.status == 200){ alert("数据请求成功"); alert(xhr.responseText); }else{ alert("数据请求失败"); } } } } } </script> </body> </html>
6.5练习
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <button id="btn">下载数据</button> <ul id="ul"> </ul> <!--<a href="#">fhdjhf</a>--> <script> //请求方式，请求的服务器的地址，需要传的数据，请求成功之后的回调函数 function ajax(method,url,data,successfn){ //1.创建请求核心对象 var xhr = null; //处理兼容问题 //异常处理：try-catch try{ xhr = new XMLHttpRequest(); }catch(e){ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } //2.建立连接 //判断请求方式 if(method == "get"){ url += "?" + data; } xhr.open(method,url,true); //3.发送请求 if(method == "get"){ //如果是get，则直接发送 xhr.send(); }else{ //如果是post，则设置编码之后发送内容 xhr.setRequestHeader("content-type","application/x-www-form-urlencoded"); xhr.send(data); } //4.监听，监听服务端返回的响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ /* * 404：数据不存在，未找到 * 400：加载错误 * 500：数据库问题 */ if(xhr.status == 200){ //ajax下载完数据之后，每一个程序对数据的处理是不一样，所以需要自定义功能将数据的处理单独出来 successfn(xhr.responseText); }else{ alert("数据请求失败"); } } } } //当页面加载完毕之后 window.onload = function(){ //获取已有标签对象 var btn = document.getElementById("btn"); var ul = document.getElementById("ul"); //通过按钮触发进行ajax请求 btn.onclick = function(){ //调用封装好的请求函数,使用get或者post都可以请求 ajax("get","http://127.0.0.1/news.php","",function(data){ //处理服务器返回的数据，要分析数据的最上层是什么类型 //data = xhr.responseText //服务器返回的是一个编码之后的数组 //解析数据 var arr = JSON.parse(data); //遍历，获取每条新闻和日期的小数组 for(var i = 0;i < arr.length;i++){ //arr[i].title arr[i].date //创建需要显示新闻的标签对象 var oli = document.createElement("li"); var oa = document.createElement("a"); //将解析到的数据设置为标签的文本 oa.innerHTML = arr[i].title; oa.href = "#"; //显示日期 var ospan = document.createElement("span"); ospan.innerHTML = "【" + arr[i].date + "】"; //将子节点添加上去 oli.appendChild(oa); oli.appendChild(ospan); ul.appendChild(oli); } }) } } </script> </body> </html>
7.jQuery与ajax
7.1load
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <div id="box"></div> <button id="btn">点击</button> <script> $(function(){ /* * 异步加载数据 * load(url,[data],[callback]) 加载html页面【网络资源和本地资源】 * * url:请求的html页面的url地址 * data：发送给服务端的数据，key；value的形式，可选参数 * callback：可选参数，请求完成之后的回调函数 */ //1.载入html文档 //注意：需要通过指定的具体的对象进行调用 /*$("#btn").click(function(){ $("#box").load("2.表单的get请求.html"); }) */ //2。回调函数 //默认采用get //href load() assign() replace() $("#btn").click(function(){ $("#box").load("2.表单的get请求.html",function(responseText,status,XMLHttpRequest){ alert(responseText,status); }); }) }) </script> </body> </html>
7.2get和post
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <form> <input type="text" id="username" /><br /> <input type="text" id="content" /><br /> <input type="button" id="btn" value="提交" /><br /> <div id="responseText"></div> </form> <script> $(function(){ /* * $.get(url,data,callback,type)，类似于ajax get * url:请求的服务器的url地址 * data：发送到服务器的数据 * callback:请求成功之后的回调函数 * type：预判服务器的数据类型，可以省略，jQuery可以自动判断 * * */ /*$("#btn").click(function(){ $.get("http://127.0.0.1/get1.php",{username:$("#username").val(),content:$("#content").val()},function(data,textStatus){ var result = JSON.parse(data); //$("#responseText").html(data); //将用户提交的信息显示到div上 $("#responseText").html("用户名：" + result.username + "内容：" + result.content); }) })*/ /* * $.post(url,data,callback,type)，类似于ajax post * url:请求的服务器的url地址 * data：发送到服务器的数据 * callback:请求成功之后的回调函数 * type：预判服务器的数据类型，可以省略，jQuery可以自动判断 */ $("#btn").click(function(){ $.post("http://127.0.0.1/post1.php",{username:$("#username").val(),content:$("#content").val()},function(data,textStatus){ var result = JSON.parse(data); //$("#responseText").html(data); //将用户提交的信息显示到div上 $("#responseText").html("用户名：" + result.username + "内容：" + result.content); }) }) }) </script> </body> </html>
7.3getScript
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <input type="button" id="btn" value="改变背景颜色" /> <div class="mr"> aaaaa </div> <div class="mr"> bbbbb </div> <script> $(function(){ /* * $.getScript("js文件",callback) * * callback:当js文件加载完毕之后执行回调函数 * * 作用：js文件在调用函数的过程总自动被加载，提高工作效率 */ $.getScript("js/text.js",function(){ $("#btn").click(function(){ $(".mr").css("background-color","cyan"); }) }) }) </script> </body> </html>
7.4ajax
代码演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.3.1.js"></script> </head> <body> <script> $(function(){ /* * $.ajax({method,url,data,successfn}) * * 作用：methon可以是get，也可以是post，结合了$.get和$.post的综合体 */ $.ajax({ type:"get", url:""; data:{username:"yangyang",content:"hello"}, success:function(data,textStatus){ } }); $.ajax({ type:"post", url:""; data:{username:"yangyang",content:"hello"}, success:function(data,textStatus){ } }); }) </script> </body> </html>
二、bootstrap
官网地址：https://v3.bootcss.com/
代码演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--html页面显示的视图和设备的视图相同-->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title></title>
<!--引入bootstrap下的css文件-->
<link type="text/css" rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
</head>
<body>
<!--按钮-->
<!-- Standard button -->
<button type="button" class="btn btn-default">（默认样式）Default</button>
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">（首选项）Primary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">（成功）Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">（一般信息）Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">（警告）Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">（危险）Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">（链接）Link</button>
<hr />
<!--表单-->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<hr />
<!--表格-->
<table class="table">
<tr>
<td>1111</td>
<td>rrtt</td>
<td>tryty</td>
</tr>
<tr>
<td>ytyty</td>
<td>tu</td>
<td>uyuyu</td>
</tr>
<tr>
<td>uyuy</td>
<td>trtr</td>
<td>trtr</td>
</tr>
</table>
<hr />
<div class="table-responsive">
<table class="table">
<tr>
<td>1111</td>
<td>rrtt</td>
<td>tryty</td>
</tr>
<tr>
<td>ytyty</td>
<td>tu</td>
<td>uyuyu</td>
</tr>
<tr>
<td>uyuy</td>
<td>trtr</td>
<td>trtr</td>
</tr>
</table>
</div>
<hr />
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</body>
</html>
扫一扫
1180
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
