js中的ajax

js中的ajax

一、简介

百科词条：
        Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。
        通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

个人理解：
        ajax是异步的JavaScript和XML。用来进行异步请求。浏览器可以向服务器发送一个ajax请求，进行页面的局部刷新。异步概念就是请求可以理解为运行在浏览器后端的一个服务，不影响浏览器的正常工作

二、工作原理

三、ajax的使用

原生的ajax：

1. 实例化XMLHttpRequest

 var xhr = new XMLHttqRequest();

2. 初始化请求行

  xhr.open(method,url,async);

3. 设置请求头

   xhr.setRequestHeader(k,v)

注： 如果是get方式，无需设置Content-Type,因为Content-Type请求体中数据编码格式

4. 设置请求体，并且发送请求

  xhr.send(data)

注：如果是get方式，无需设置data

5. 监听请求状态的改变，来获取结果

  xhr.onreadystatechange = function(){
      if(xhr.readystate === 4){
        if(xhr.status === 200){
          // 获取结果
          xhr.response    // string -> json 、JSON.parse();
        }
      }
    }

扩展：
    1）.status
        响应状态
        200 ok
        404 not found
        500 服务接口出错
        401 未授权
        403 被拒绝，无权访问

    2）.readystate：表示xhr的状态
        0 UNSENT 代理被创建，但尚未调用 open() 方法。
        1 OPENED open() 方法已经被调用。
        2 HEADERS_RECEIVED send() 方法已经被调用，并且头部和状态已经可获得。
        3 LOADING 下载中； responseText 属性已经包含部分数据。
        4 DONE 下载操作已完成。

jQuery封装的ajax：

1. 底层接口

$.ajax({
    url:'', // 请求地址
    method: 'GET', // 请求方式
    data:{},
    success: function(a){
        // 成功的回调函数
    },
    error:function(err){
        // 失败的回调函数
    }
})

2. 快捷方式

    $.get(url,data,function(){})
    $.post(url,data,function(){})

3. 全局设置

ajaxSetup()