Ajax和JQuery

---

一、Ajax

AJAX（Asynchronous Javascript And XML）异步的Javascript和XML(准确的说跟xml已经关系不大，目前的互联网开发数据交互更多倾向于json)，AJAX技术不算新颖的技术，基于javascript的一项能够跟服务端交互的对象（XMLHttpRequest）实现；

ajax的使用步骤

一个标准的ajax请求分为以下几个步骤:

1. 获取XMLHttpRequest对象
2. 打开一个到服务端连接
3. 发送请求
4. 当请求状态改变时，接收来自服务端的响应数据

原理

分析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对象。

1. JQuery对象转JS

   // let a = $('#app')[0];
   let a = $('#app').get(0);
   

2. 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样式在操作

1. html()方法，对元素的innerHTML属性进行操作

   //赋值操作
   $(".div1").html("<a href='http://www.baidu.com'>我在赋值</a>");	
   
   //取值操作
   $(".div1").html();		
   

2. text()方法，对元素的innerText属性进行操作

3. val()方法，对表单元素的value属性操作

上面的三个属性执行的都是有参数就是赋值，没有参数就是取值的操作

4. attr()方法，相当于DOM对象里面的setAttribute()/getAttribute()

   $("#userName").attr("type");			//取type属性的值
   $("#userName").attr("type","password");	//对type属性赋值
   

5. removeAttr()，相当于DOM对象里面的removeAttribute()

   $("#userName").removeAttr("placeholder");	//移除placeholder这个属性
   

6. prop()，对DOM元素的单属性进行操作【后期内置的property也会使用这个方法，具体看扩展】

   $("#reading").prop("checked");				//获取单属性checked的状态
   $("#reading").prop("checked",false);		//对单属性checked赋值
   

7. data()，对DOM元素的自定义数据属性data-开的属性操作【一般不推荐这个方法】