快速理解AJAX

概念：AJAX （异步的 JavaScript 和 XML）是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

特点：在网页不刷新的情况下向服务端发送http请求，得到http响应

• Ajax的使用

//1.创建一个异步对象
var xmlhttp = new XMLHttpRequest();
//2.设置请求方式和请求地址
/*
methods:请求的类型 GET或POST
url:文件在服务器上的位置
async:true(异步)或false(同步)，使用时一直为true
*/
xmlhttp.open("methods","url","async");
//设置请求头,固定写法
xmlhttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//3.发送请求
xmlhttp.send();
//4.监听状态变化（变化就调用该函数）
xmlhttp.onreadystatechange = function() {
  /*readyState存有onreadystatechange当前的状态
  0: 请求未初始化
  1: 服务器连接已建立
  2: 请求已接收
  3: 请求处理中
  4: 请求已完成，且响应已就绪
  */
  if(xmlhttp.readyState === 4){
     //判断是否请求成功 status状态码
     if(xmlhttp.status >= 200 && xmlhttp.status <300 || xmlhttp.status === 304) {  
    //5.处理返回的结果
    //响应行
     console.log(xmlhttp.status);//状态码
     console.log(xmlhttp.statusText);//状态字符串
     console.log(xmlhttp.getAllResponseHeaders());//所有响应头
     console.log(xmlhttp.response);//响应体
    }else{
    //响应失败
    }
  }
}

 jQuery发送AJAX请求

get请求

/*
url:请求的url地址
data: 请求携带的参数
type:设置返回内容格式，xml,html,script,json,text,_default
*/
$.get(url,[data],function(data){
   
},[type])

post请求 

/*
url:请求的url地址
data: 请求携带的参数
type:设置返回内容格式，xml,html,script,json,text,_default
*/
$.post(url,[data],function(data){
   
},[type])

通用型：

$ajax({
  //url
  url:,
  //参数
  data:,
  //请求类型GET/POST
  type:'',
  //响应体结果,内容格式
  dataType: ''
  //成功的回调
  success: function(){
  },
  //超时时间
  timeout: ;
  //失败的回调
  error: function(){
  }
})

axios发送AJAX请求 *

 get请求

axios.get('url',
//url参数
 {
  params: ,
//请求头信息
  headers: ,
}).then(value => {
})

post请求

axios.post('url',
  //请求体
  {a:''},
//url参数
 {
  params: ,
//请求头信息
  headers: ,
}).then(value => {
})

通用方式

axios ({
    //url
    url: ,
    //url参数
    params: ,
    //头信息参数
    headers: ,
    //请求体参数
    data:
}).then(response =>{
    //响应状态码
    console.log(response.status);
    //响应状态码字符串
    console.log(response.statusText);
    //响应头信息
    console.log(response.headers);
    //响应体
    console.log(response.data);

   })