jQuery/Ajax

jQuery

jQuery简介

jQuery是一个快速、简洁的JavaScript代码库。jQuery设计的宗旨是“Write Less，Do More”，即 倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的 JavaScript操作方式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

jQuery作用

• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities 函数库

jQuery的安装【重要】

• 官网下载jQuery库 https://jquery.com/
• 有两个版本的 jQuery 可供下载：
  • Production version - 用于实际的网站中，已被精简和压缩。
  • Development version - 用于测试和开发（未压缩，便于可读）。
• jQuery 库是一个 JavaScript 文件，使用 HTML 的 < script src=“”>< /script> 标签引用

<!--引入jQuery库-->
<script src="js/jquery-3.4.1.min.js"></script>

CDN引用

CDN的全称是Content Delivery Network，即内容分发网络 , 使用户就近获取所需内容，降低网络 拥塞，提高用户访问响应速度和命中率。

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

jQuery使用

AJAX

什么是AJAX

前后端分离技术

• AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
• AJAX = Asynchronous异步 JavaScript and XML。
• AJAX 是一种用于创建快速动态网页的技术。
• 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
• 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页。

Ajax异步请求原理

同步请求

异步请求

Ajax开发步骤

Get请求携带参数，直接拼接在url后面

function sendGet(){
//同步请求
//location.href = "/jsAjax?name=123&123";
//1、创建XMLHTTPRequest对象
var xhr = new XMLHttpRequest();
//2、设置异步请求的对象的URL地址
//参数1：请求方式 参数：请求的URL地址 参数3：是否异步请求（默认true）
xhr.open("GET","/jsAjax?name=cxk&age=21");
//3、通过异步请求对象发送异步请求
xhr.send();
//4、监听异步请求的状态
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ //异步请求成功,且响应数据了。
//数据渲染
//xhr.responseText这个数据是一个json字符串。
var json1 = xhr.responseText;
//将json格式的字符串转成json对象
var json = JSON.parse(json1);
console.log(json.code);
console.log(json.msg);
}
}
}

POST请求携带参数

• 必须将请求参数放在send方法中
• 必须添加请求头

function sendPost(){
//1、创建XMLHTTPRequest对象
var xhr = new XMLHttpRequest();
//2、设置异步请求的对象的URL地址
//参数1：请求方式 参数：请求的URL地址 参数3：是否异步请求（默认true）
xhr.open("POST","/jsAjax");
//注意：如果使用POST请求携带数据，那么需要设置请求头
xhr.setRequestHeader("content-type","application/x-www-form-urlencoded")
//3、通过异步请求对象发送异步请求如果请求方式为POST那么请求参数要放在send方法中。(仅限于
POST请求)
xhr.send("name=cxk&age=20");
//4、监听异步请求的状态
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){ //异步请求成功,且响应数据了。
//数据渲染
console.log(xhr.responseText)
}
}
}

创建XMLHttpRequest对象

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如 果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xhr;
if (window.XMLHttpRequest)
{
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xhr=new XMLHttpRequest();
}
else
{
// IE6, IE5 浏览器执行代码
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}

XMLHttpRequest请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

readyState

• 每当 readyState 改变时，就会触发 onreadystatechange 事件。
• 在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
• readyState 属性存有 XMLHttpRequest 的状态信息。
• 当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
• 下面是 XMLHttpRequest 对象的三个重要的属性：

XMLHttpRequest响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

jQuery发送Ajax请求

GET请求

• get() 方法通过远程 HTTP GET 请求载入信息。
• 这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax

$.get({
url:'/jQAjax',
data:{
name:'cxk',
age:20
},
//res是后端返回的json数据(这个默认已经转换成了json对象了)就相当于responseText
success:function(res){
//数据渲染
console.log(res.code);
}
})

POST请求

post() 方法通过 HTTP POST 请求从服务器载入数据。

$.post({
url:'/jQAjax',
data:{
name:'admin',
age:30
},
success:function(res){
console.log(res.msg);
console.log(res.code);
}
})

AJAX()方法

• ajax() 方法通过 HTTP 请求加载远程数据。
• 该方法是 jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。
• $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要 操作不常用的选项，以获得更多的灵活性

$.ajax({
url:'/jQAjax',
data:{name:"aaa",age:20},
type:"POST",
success:function (res){
console.log(res);
},
error:function (){
console.log("请求失败完成")
},
complete:function(){
console.log("请求完成")
}
})

使用Ajax获取表单数据

如果没有文件上传域

function login(){
//通过jQuery的方式，直接获取表单中的所有数据
var loginData = $("#loginForm").serialize();
//发送Ajax异步请求
$.post({
url:'/login',
data:loginData,
success:function(res){
//登录成功 ，跳转到empList.html页面
if(res.code == 0){
alert(res.msg);
//location.href = "empList.html";
}else{
alert(res.msg);
}
}
})

如果表单中有文件上传域

function addEmp(){
//1、获取表单中的所有数据
//2、发送ajax异步请求
//如果表单中有文件上传域，需要使用formData进行数据封装
var formData = new FormData($("#empForm")[0]);
$.post({
url:"empAdd.do",
data:formData,
contentType:false, //不使用默认的提交格式(默认为：application/x-www-formurlencoded)
processData:false, //如果要发送DOM树信息或其它不希望转换的信息，请设置为 false
success:function(res){
if(res.code == 0){
//如果添加成功，要跳转首页
alert(res.msg);
//location.href = "empList.html";
}else{
alert(res.msg);
}
}
})
}