ajax使用总结

ajax是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。

ajax的使用

1、首先要创建一个XMLHttpRequest对象

var xhr=new XMLHttpRequest()

2、使用open方法设置和服务器交互信息

语法：

open(‘请求方式’，‘请求的地址’)

请求方式：GET/POST/HEAD/DELETE/OPTIONS/PUT

GET:用于常规请求，适用于URL完全指定请求资源，请求对服务器没有任何副作用，服务器的响应是可缓存的

POST:用于HTML表单，它在请求主体中包含额外数据，且这些数据常存储到服务器上的数据库中。相同URL的重复POST请求从服务器得到的响应可能不同，同时不应该缓存使用这个方法的请求。

还有一个Boolean类型的值的参数，如果值为false代表同步请求，send()方法将阻塞直到请求完成。如果这个参数是 true 或省略，请求是异步的。

xhr.open('get','https://api.muxiaoguo.cn/api/lishijr/')

3、设置requestHeader（）

在AJAX中，如果需要像 HTML 表单那样 POST 数据，需要使用 setRequestHeader() 方法来添加 HTTP 头。

然后在 send() 方法中规定需要希望发送的数据：setRequestHeader()方法需要在open()和send()方法之间调用。

语法

xhr.setRequestHeader(属性名称，属性值)

常用的数据格式

发送json格式数据

xhr.setRequestHeader('Content-type','application/json')

发送表单数据

xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

发送纯文本

xhr.setRequestHeader('Content-type', 'text/plain');

发送html文本

xhr.setRequestHeader('Content-type', 'text/html')

4、设置发送的数据，开始和服务端交互

send()

参数：请求主体内容，如果没有就省略

xhr.send()//调用send(),请求就会发送到服务器

5、取得响应，注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

**responseText：**作为响应返回的文本

**responseXML：**如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档

status： 响应的http状态码

statusText： 响应的 HTTP 状态描述。

readyState： 返回HTTP请求状态

​ 0 open()尚未调用 UNSENT

​ 1 open()已调用 OPENED

​ 2 接收到头信息 HEADERS_RECEIVED

​ 3 接收到响应主体 LOADING

​ 4 响应完成 DONE

readystatechange **：**请求状态改变事件
当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

ajax使用案例：

<button onclick="getRequest()"></button>
<script>
    function getRequest(){
        //1.创建XMLHttpRequest实例
        var xhr = new XMLHttpRequest()
        //2.使用open方式设置和服务器交互信息
    	xhr.open('get','https://api.muxiaoguo.cn/api/dujitang')
        //3.如果默认可不设置requestHeader
        //4.发送请求
        xhr.send()
        //5.请求完成，并作出响应，获取响应数据
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                console.log(xhr.responseText)
                // 转换为JSON对象
        console.log(JSON.parse(xhr.responseText));
            }
        }
    }
</script>

jQuery中使用ajax

在jQuery中使用ajax比原生的简单得多，简化了很多操作

//首先要引入jQuery，可以本地下载引用，也可以CDN在线引用
 $.ajax({
      url:'',    //请求地址
      method:'',  //请求方式
      data:{},     //传参  无参可不写
      success:function(res){
        //请求成功的回调函数
      },
      error:function(res){
        //请求失败的回调函数
      }，
    })
//快捷方式
$.get(url,data,function(res){})
$.post(url,data,function(res){})

案例：jQuery底层接口使用ajax

$.ajax({
      url:'https://api.muxiaoguo.cn/api/dujitang ',
      method:'GET',
      data:{},
      success:function(res){
        console.log(res)
      },
      error:function(res){
         console.log(res)
      }，
    })

快捷方式使用

$.get('https://api.muxiaoguo.cn/api/dujitang',{},function(res){
       console.log(res);
     })

$.post('https://api.muxiaoguo.cn/api/dujitang',{},function(res){
       console.log(res);
     })