关于ajax 自己学习

原生的ajax请求

ajax   的学习

定义：在不更新页面的情况下（页面有没有更新就检查后退按钮），浏览器要从web服务器获取数据，此时就可以使用ajax技术。

ajax是什么

AJAX ，全称是：Asynchronous JavaScript And Xml 。 （async：表示异步，sync：表示同步）

1. 异步的JavaScript和XML。

2. 是一种创建交互式网页应用的网页开发技术。并不是一种新技术，而是一种解决方案，早在在1998年就开始使用。

3. 异步表示不阻塞：浏览器在请求数据时，并不会阻塞用户后续的操作。理解为浏览器派了一个小弟去服务器拿数据了。

4. XML表示一种数据格式，最初设计AJAX时，从服务器返回的数据是XML格式的，后面慢慢被JSON数据格式取代了。

5. 更具体一点，浏览器通过内置对象 XMLHttpRequest 向服务器发起请求，并可以接收服务器返回给浏览器的数据，这一过程或实现这一过程的技术就是我们所说的 Ajax。

 

使用jQuery提供的AJAX功能

$.ajax(url,{
  type: 'get',
  dataType: 'json',
  data: { id: 1 },
  beforeSend: function (xhr) {
    console.log('before send')
  },
  success: function (data) {
    console.log(data)
  },
  error: function (xhr) {
    console.log(xhr)
  },
  complete: function (xhr) {
    console.log('request completed')
  }
})

常用选项参数介绍：

• url：请求地址

• type / method：请求方法，默认为 get

• data：需要传递到服务端的数据。字符串和对象均可。如果是对象会自动拼接成字符串

• success：请求成功之后触发

• cache: 设置ie浏览器的缓存问题。默认为true，表示缓存。 cache: false 不缓存。

   

• dataType：预期服务端返回的数据方式。如不指定，它会自动判断。

• contentType：请求体内容方式，默认 application/x-www-form-urlencoded

• timeout：请求超时时间。(设置为cancel  取消的意思）

• beforeSend：请求发起之前触发

• complete：请求完成触发（不管成功与否）

• error：请求失败触发

• processData:boolean。是否让jquery帮助处理传到服务器的数据

 

原生的ajax请求

// 第一步： 新建一个XMLHttpRequest对象(xhr)
var xhr = new XMLHttpRequest();

console.info(xhr);
// 第二步： 设置请求。 xhr.open(请求的方式，get|post, 请求的url地址 带的表单的input也是后端要的参数username);
xhr.open('get', 'common/checkuser?username='+username);

// 第三步： 发送请求。 xhr.send()
xhr.send();
        
// 第四步： 设置回调函数。请求成功之后，获取服务器返回的数据.
// 返回的数据存放在xhr.responseText中。
xhr.onload = function() {
   console.info('从服务器返回的数据', xhr.responseText);
};

原生的post请求

/1. 创建xhr对象
var xhr = new XMLHttpRequest();
//2. 初始化请求
xhr.open('post',服务器地址);
//3. 设置请求头，固定写法
xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
//4. 监听响应的回调函数
xhr.onload = function(){
    console.log(xhr.responseText);
}
//5. 发送请求
xhr.send('提交给服务器数据字符串');// 'a=1&b=3'

原生ajax中get 和 post 区别

• get

  • 参数拼接在url（url?name=1&age=30）

  • 由于浏览器对url长度的支持（各个浏览器均不同）是有限，所以，它只能附加少量的数据。

• post

  • 要设置请求头: xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')

  • 参数写在send()方法中:send('name=1&age=30')

  • 相对于get 来说，没有传参大小的限制。

封装原生ajax代码

/**
       * 功能 ： 发出ajax请求
       * 参数：
       *    type: 类型是字符串。支持的取值是 "get","post"。决定ajax请求的类型
       *    data: 传给服务器的数据。支持的格式是字符串：a=1&b=2&c=3
       *    url : 请求的地址,
       *    sucess: 请求成功之后的回调函数。第一个参数是服务器返回的数据
       *
       * 示例：
          hiAjax('get', 'name=ok', 'common/get', function(result) {
              console.info('get', result);
          });

          hiAjax('get', '   ', 'common/get',dosomething1);
          hiAjax('get', '', 'common/get',dosomething2);
       */
function hiAjax(type, data, url, success) {
    var xhr = new XMLHttpRequest();

    if (type === 'post') {
        xhr.open(type, url);
        xhr.setRequestHeader(
            'content-type',
            'application/x-www-form-urlencoded'
        );
        xhr.send(data);
    } else if (type === 'get') {
        //如果 data有值，就在url后追加
        // trim() 用来清除字符串前后的空格
        if (data.trim()) {
            url = url + '?' + data;
        }
        xhr.open(type, url);
        xhr.send();
    } else {
        alert('不支持这个格式的请求:' + type);
        return;
    }

    xhr.onload = function() {
        success(xhr.responseText);
    };
}

function dosomething1(result) {
    alert('1');
    console.info(xhr.responseText);
    // alert(1);
}

function dosomething2(result) {
    alert('2');
    console.info(xhr.responseText);
    // alert(1);
}

 比ajax 好用的  axios库

// 获取服务器的返回值
axios.get('/common/get?id=123').then(function(res) {
    // res 就是本次请求的信息
    console.info(res);
    // 获取 从服务器返回的数据
    console.info(res.data);
});

axios.get('/common/get', { params: { id: 123, name: 'jake' } }).then(function(res) {
    // res 就是本次请求的信息
    console.info(res);
    // 获取 从服务器返回的数据
    console.info(res.data);
});

// post请求，不带参数
axios.post('/common/post').then(function(res) {
    console.info(res.data);
});
// post请求，带参数
axios.post('/common/post', { id: 123, name: 'jake' }).then(function(res) {
    console.info(res.data);
});