Ajax的简介

含义：

Ajax是一种网页开发技术，全称为Asynchronous JavaScript and XML（异步JavaScript与XML），它允许在不刷新整个页面的情况下更新部分页面内容。

特点：

不刷新整个页面，只刷新局部信息

使用的好处：

1. 只更新部分页面信息，有效的利用带宽；
2. 提供了连续的用户体验；
3. 提供了类似C/S的交互效果

ajax的属性：

• url：发送请求的地址，默认是当前页面的地址
• type：请求的方式 ， 默认是get， 还有一个是post
• data：发送到服务器的数据
• dataType：预期服务器返回数据类型；如：xml、html、script、json、jsonp、text
• timeOut：设置请求超时时间
• global：是否触发全局ajax事件，默认为true
• beforeSend：发送请求前调用函数
• success：请求成功后调用的函数
• error：请求失败时调用的函数
• complete：请求完成后（无论成功还是失败）调用的函数

 下面我从三个方面介绍一下ajax的基本使用流程：

JavaScript+Ajax：

//1、创建1个异步对象：

        var xhr = new XMLHttpRequst();

//2、请求行：

        xhr.open(请求方式,请求地址);

//3、设置请求头：（get方式可以不用设）

        xhr.SetRuquestHeader(String name,String value);

        xhr.SetRuquestHeader('context-Type','application/x-www-form-urlencoded');

//4、设置请求主体：（get方式可以不用设）

        xhr.send('uname=zs');

//5、执行

        xhr.onreadystatechange = function(){

                if(xhr.status == 200 && xhr.readystate == 4){

                        console.log(xhr.responseTest);

                }       

        }

 readystate的五种状态：

• =0：未初始化，没有调用send方法；
• =1，载入，调用了send方法，正在请求
• =2，载入完成，send执行完成，已经收到响应内容
• =3，交互，正在解析响应内容
• =4，响应内容解析完成，可以调用

JQuery+Ajax:

请求的方式：

1. $.ajax({}):可以配置方式发送请求
2. $.get():可以以get方式发送ajax请求
3. $.post():可以以post方式发送ajax请求
4. $.().serialize():序列化表单(格式化：key=val&key = val)

$.ajax({
    type:"get",
    url:'路径',
   data:{},
    dataType:"json",
    success:function(res){
        console.log(res);
    } 
})

$.get(路径,function(res){
    console.log(res)
})


$.post(路径,function(res){
    console.log(res)
})

Vue+Ajax:

axios.get(路径名?属性名=值)
      .then(function(res){
        console.log(res)
    }).catch(function(error){
        console.log(error)
    })

axios.post(路径名)
      .then(res =>(this.msg=res)
).catch(function(error){
        console.log(error)
    })