18、Ajax的理解和使用

1、原生Ajax

1.1、Ajax简介

（1）Ajax全称为 Asynchronous javascript and xml,就是异步的 js 和 xml

（2）通过Ajax可以在浏览器中发送异步请求，最大优势：浏览器无刷新获取数据

（3）Ajax不是新的编程语言，而是一种将现有的标准语言组合在一起使用的新方式

1.2、XML简介

（1）可扩展标记语言

（2）被设计用来传输数据和存储数据

（3）XML和HTML类似，不同的是HTML都是预定义标签，而XML中没有预定义标签，都是自定义标签

//比如我有一个学生数据
name="孙悟空";age=18;sex="男"
用XML表示
<student>
	<name>孙悟空</name>
    <age>18</age>
    <sex>男</sex>	
</student>

1.3、Ajax的特点

1.3.1 优点

（1）可以通过浏览器向服务器发出异步请求，无需刷新浏览器

（2）允许根据用户事件来更新局部的页面内容

1.3.2 缺点

（1）没有浏览历史，不能回退

（2）存在跨域问题（同源）

（3）SEO不友好

1.3.3 Ajax处理IE缓存问题

（1）解决：在url后面添加时间戳 例如：

let xhr = new XMLHttpRequest();//创建请求实例
xhr.open("get","url?name='+new Date()+'") 

1.3.4 Ajax解决网络请求超时处理

（1）超时设置2s

let xhr = new XMLHttpRequest();//创建请求实例
xhr.timeout = 2000; //设置时间延迟

（2）超时的回调 超过2s后无回应就执行这个回调

let xhr = new XMLHttpRequest();//创建请求实例
xhr.ontimeout = function(){
    alert('网络已超时')
}

1.3.5 Ajax取消请求 使用abort()取消请求

let xhr = null；
//发送请求按钮
btn[0].onclick = function(){
    //创建一个请求实例
    xhr = new XMLHttpRequest();
//    初始化---methods:请求方式  url:请求地址 true:请求异步 可改为false同步请求
    xhr.open('methods','url',true);
//    发送请求
    xhr.send();
    //onreadystatechange事件----当 readyState 改变时，就会触发 onreadystatechange 事件。
    //readyState属性----是存储在XMLHttpRquest状态信息中，当readyState状态为4的时候，请求已完成，且相应已就绪
    //status 属性---存储在XNLHttpRequest中，当status 状态为200时，证明请求成功，404则请求qpi
    //XMLHttpRequest的状态，从0~4变化，以下为状态改变过程
    // 0: 请求未初始化
    // 1: 服务器连接已建立
    // 2: 请求已接收
    // 3: 请求处理中
    // 4: 请求已完成，且响应已就绪
    xhr.onreadystatechange = function (){
        //当请求完成且请求成功时去处理响应数据
        if (xhr.readyState == 4 && xhr.status == 200){
            alert('请求成功~')
        }else if (xhr.status == 404){
            alert('未找到请求接口~')
        }
    }
}
//取消请求按钮
btn[1].onclick = function(){
    xhr.abort();
}

1.3.6 Ajax解决重复发送请求的问题

let btn = document.querySelectorAll('#button')
let xhr = null；
//标识变量 是否在发送Ajax请求
let issend = false;
//发送请求按钮
btn[0].onclick = function(){
    //判断标识变量 如果正在发送，则取消该请求，创建一个新的请求
    if(issend) xhr.abort();
    xhr = new XMLHttpRequest();//创建请求实例
    //修改标识变量的值
    issend = true;
    //初始化
    xhr.open('get','url');
    //发送请求
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
            //修改标识变量
            issend = false
        }
    }
}

2、jQuery中的Ajax

2.1 jQuery 发送普通的get post请求

（1）$.get(url,params,[callback],[datatype])；$.post(url,{params},[callback],[type])

（2）说明：

• url：请求url地址；

• params：请求携带的参数；

• callback:载入成功时回调函数；

• datatype：设置返回内容格式，如 xml,html,script,json,text,default

//jQuery get请求
$.get('url',{name:'lunlun',sex:'女'},function(data){
    console.log(data)
})
//jquery post 请求
$.post('url',{name:'lunlun',sex:'女'},function(data){
    console.log(data)
})

2.2 jQuery发送Ajax请求

$.ajax({
    url:"url",
    //参数
    data:{params},
    //请求类型
    type:"GET",
    //响应体结果类型
    dataType:"json",
    //成功的回调
    success:function(data){
        console.log(data)
    },
    //超时时间
    timeout:2000,
    //失败的回调
    err:function(){
        console.log('出错了')
    }
})

3、axios中的Ajax （axios支持promise）

3.1 axios发送 get post 请求

import axios from 'axios'; 
//配置baseURL
axios.defaults.baseURL = "http://192.268.1.70:8080"
//get请求
axios.get('/axios/server',{
    //请求参数
    params:{
        id:4,
        name:'lunlun'
    },
    请求头信息
    headers:{
        name:"lunlun",
        age:18
	}
}).then((res)=>{//经过promise then()处理结果
    console.log(res)
})
//post请求
axios.get('/axios/server',
  //请求体参数    
 {
    username:'lunlun',
    userpassword:'lunlun'
},{
    //请求参数
    params:{
        id:4,
        name:'lunlun'
    },
    请求头信息
    headers:{
        name:"lunlun",
        age:18
	},
}).then((value)=>{
    console.log(value)
})

3.2 axios 函数发送Ajax请求

import axios from 'axios'; 
//配置baseURL
axios.defaults.baseURL = "http://192.268.1.70:8080"
axios({
    url:"/axios/server",
    method:"get",
    params:{
        name:"lunlun",
        id:2
    },
    //请求体参数
    data:{
      username:"admin",
      userpassword:"admin"
    }
}).then((value)=>{//promise语法
    console.log(value)
})