AJAX发送请求的几种方法

AJAX发送请求的几种方法

1.ajax使用原生的方法发起get和post请求

//使用原生的方法发起 get请求
// 1.创建 xhr 对象
    var xhr = new XMLHttpRequest();
    // 2.设置请求类型
	//实质？ 当需要传递参数的时候用xx==xx&的形式在地址后面拼接字符串
    xhr.open('GET','xx.xx请求地址')
    // 3.发送请求
    xhr.send()
    // 4.监听请求状态
    xhr.onreadystatechange = function(){
         //0: 请求未初始化
    //1: 服务器连接已建立
	//2: 请求已接收
	//3: 请求处理中
	//4: 请求已完成，且响应已就绪

        if(xhr.status == 200 && xhr.readyState == 4) {
        console.log(xhr.responseText);//字符串
        let result = JSON.parse(xhr.responseText)// 转换成对象
        console.log(result);
        }
    }

现在演示一下post请求

  //使用原生的方法发起post请求
        // 1.创建一个xhr对象
      let xhr = new XMLHttpRequest();
        // 2.调用open函数，设置请求类型
      xhr.open('poST','xxx.xx请求地址')
        // 3.设置Content-Type 属性
      xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
      //   4.发送请求
      xhr.send('name=tom&age=18&hobby=打豆豆')
       // 5.监听事件
       xhr.onreadystatechange = function(){
        if (xhr.status == 200 && xhr.readyState == 4) {
                // console.log(xhr.responseText);
                console.log(JSON.parse(xhr.responseText));
            }
       }

2.下面介绍一下用 jquery发送ajax请求的方法

//使用jquery发起get请求
  $(function(){
      //方法一
      // $.get('xx,xx地址',res => console.log(res))
      //方法二
      $.ajax({
        method : 'GET',
        url : 'xx,xx地址',
        // data : {id : 1},
        success : res => console.log(res)
      })
    })
    

       //使用jquery发起post请求
    //方法一
            $.post('xx,xx请求地址',{name: 'tom',age: 18, hobby:'打豆豆'}, res =>console.log(res))
   //方法二
        $.ajax({
            method : 'POST',
            open : 'xx,xx请求地址',
            // data : {name: 'tom',age: 18, hobby:'打豆豆'},
            data : 'name=tom&age=18&hobby=打豆豆',
            success :res => console.log(res)
        })