Ajax与JQuery
一、Ajax
AJAX(Asynchronous Javascript And XML)异步的Javascript和XML(准确的说跟xml已经关系不大,目前的互联网开发数据交互更多倾向于json),AJAX技术不算新颖的技术,基于javascript的一项能够跟服务端交互的对象(XMLHttpRequest)实现;
ajax的使用步骤
一个标准的ajax请求分为以下几个步骤:
- 获取XMLHttpRequest对象
- 打开一个到服务端连接
- 发送请求
- 当请求状态改变时,接收来自服务端的响应数据
原理
分析1 创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象,它可以在用户没有感觉的情况下,就像背后运行的一根小线程一般,悄悄的和服务器进行数据交互
AJAX就是通过它做到无刷新效果的
分析2 设置响应函数
XHR对象的作用是和服务器进行交互,所以既会发消息给服务器,也能接受服务器返回的响应。
当服务器响应回来的时候,调用怎么处理呢?
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。
分析3 设置并发出请求
通过open函数设置背后的这个小线程,将要访问的页面url ,
xmlhttp.open("GET",url,true);
通过send函数进行实际的访问
xmlhttp.send(null);
null表示没有参数,因为参数已经通过“GET" 方式,放在url里了。
只有在用"POST",并且需要发送参数的时候,才会使用到send。
类似这样:
xmlhttp.send("user="+username+"&password="+password)
分析4 处理响应信息
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.querySelector('#id').innerHTML 设置span的内容为服务端传递回来的文本
基本的Ajax实例
document.getElementById('sendRequest').addEventListener('click',function(){
//1.获取XMLhttpRequest对象
var xhr = new XMLHttpRequest();
//2. 打开到服务端的请求
xhr.open("GET","http://www.softeem.top:8080/music/list");
//3.发送请求
xhr.send(null);
//4.当请求状态发生变化时,执行回调函数
xhr.onreadystatechange=function(){
//当请求完成之后执行
if(xhr.readyState === 4){
//服务端响应成功
if(xhr.status === 200){
//获取服务端响应的数据
let data = xhr.responseText;
data = JSON.parse(data);
var box = document.getElementById('box');
data.forEach((e,i)=>{
box.innerHTML += `<span>${e.name}-${e.artist}</span><br>`;
})
}
}
}
})
GET请求和POST请求的区别
get和post是客户端向服务端发送请求的两种请求方式,区别在于:
GET:get请求一般用户获取服务端数据,并且可以向服务端提交少量(不超过1024字节),并且提交的数据直接在请求地址中通过查询路径进行拼接.比如以下地址:
http://localhost:63342/part4-web%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/javascript05/ajax/login?username=softeem&password=123
实际的数据在最后以如下方式提交
username=softeem&password=123
**POST:**post请求一般用于向服务端提交数据,所提交的数据是封装在请求头中,不会在地址栏显示,因此提交的数据没有大小限制。同样是以上的请求:
http://localhost:63342/part4-web%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/javascript05/ajax/login
提交的数据不再地址栏中显示
二、JQuery
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式:
- 优化HTML文档操作
- 事件处理
- 动画设计
- Ajax交互
在使用jQuery之前,我们一定要先从网络上面获取它的文件,然后再导入到我们的项目当中去
<script src="./js/jquery.js" type="text/javascript"></script>
JS对象(DOM)与JQuery对象的转换
Jquery选择器获取的所有元素都是一个数组(无论是选中的一个元素还是多个元素);在前端开发中也经常会涉及到原生JS对象和JQuery对象之间的转换,原生JS中对象所支持的函数和属性与Jquery之间存在差异,特别是有些属性或者函数JQuery没有,此时就需要将Jquery对象转换为Js对象,如果需要更加简洁操作dom元素,也可以将js对象包装为jquery对象。
-
JQuery对象转JS
// let a = $('#app')[0]; let a = $('#app').get(0);
-
JS对象转换为JQuery对象
var box = document.getElementById("box"); //包装原始js对象为Jquery对象 $(box)
$和jQuery
在jquery中操作元素的基本句柄一般使用$
,也可以使用jQuery
,比如以下代码,两者含义是一致的:
$("#box")
jQuery("#box")
jquery事件方法
jQuery事件委托
jQuery中的on
方法是可以实现事件委托的绑定方式的
$(选择器).on(事件类型,事件触发者,回调函数);
$(".ul1").on("click","li.active",function(){
console.log(new Date());
})
这个时候就相当于事件是绑定在.ul1
这个元素上面的,但是事件的触发者要满足li.active
这个选择器的条件
jQuery事件移除
在之前的DOM事件里面,我们有一个removeEventListener
,这个方法是移除某一个事件监听,在jQuery里面,也可以移除某一个事件监听
$(选择器).off(事件类型,函数名?);
//如果没有写函数名,则会移除所有的
jQuery链式语法
链式语法是jQuery的一大特点,它可以一次选择多次操作,它的语法格式如下
$(选择器).方法1().方法2().方法3(); //后面还可以继续接很多方法
$(".btn1").on("click", function () {
console.log("单击事件");
}).on("mousedown", function () {
console.log("鼠标按下去的事件");
}).on("mouseup", function () {
console.log("鼠标松开的事件");
}).mouseenter(function(){
console.log("鼠标进入");
}).css("width","200px");
jQuery CSS方法
获取方法
$(选择器).css(css属性名); //这样就会返回第一个元素的当前CSS样式
$(".div1").css("width");
设置方法
$(选择器).css(属性名,属性值); //这是第一种语法
$(选择器).css({
属性名:属性值,
属性名:属性值,
}); //这是第二种写法
$(".div1").css("height","100px"); //这是第一种写法
$(".div1").css({
width:"100px",
height:"150px",
backgroundColor:"blue"
}); //这是第二种写法
jQuery属性方法
刚刚上面的CSS方法其实是对元素的style
样式在操作
-
html()
方法,对元素的innerHTML
属性进行操作//赋值操作 $(".div1").html("<a href='http://www.baidu.com'>我在赋值</a>"); //取值操作 $(".div1").html();
-
text()
方法,对元素的innerText
属性进行操作 -
val()
方法,对表单元素的value
属性操作
上面的三个属性执行的都是有参数就是赋值,没有参数就是取值的操作
-
attr()
方法,相当于DOM对象里面的setAttribute()/getAttribute()
$("#userName").attr("type"); //取type属性的值 $("#userName").attr("type","password"); //对type属性赋值
-
removeAttr()
,相当于DOM对象里面的removeAttribute()
$("#userName").removeAttr("placeholder"); //移除placeholder这个属性
-
prop()
,对DOM元素的单属性进行操作【后期内置的property也会使用这个方法,具体看扩展】$("#reading").prop("checked"); //获取单属性checked的状态 $("#reading").prop("checked",false); //对单属性checked赋值
-
data()
,对DOM元素的自定义数据属性data-
开的属性操作【一般不推荐这个方法】