Ajax

Ajax

一种异步无刷新技术。

XMLHttpRequest

请求需要的要素

• 核心对象：XMLHttpRequest
• 请求的方式：GET|POST
• 请求的地址：服务器地址（后端|数据库）url
• 是否异步：asynchronous --> true(异步–默认)|faslse(同步)
• 请求的参数：前端页面返回给服务器进行处理的数据

XHR对象的重要属性

• responseText：服务器响应成功后作为响应主体被返回的文本

• responseXML：当返回的文本是xml格式时通过该属性返回

• status：响应的HTTP状态

  • 200：响应成功
  • 404：页面未找到，指定的url在服务器中不存在
  • 500：服务器异常，过载或维护中

• readyState：在异步请求时需要检测该属性，每当readyState值发生变化，触发readystatechange事件

  值	状态	说明
  0	未初始化	尚未调用open()方法
  1	启动	已经调用open()方法，尚未调用send()方法
  2	发送	已经调用send()方法，尚未接受响应
  3	接受	已经接收到部分响应数据
  4	完成	已经接收到全部响应数据，并且可以使用

请求的步骤

1. 创建XMLHttpRequest对象

   • var xhr = new XMLHttpRequest();

2. 准备|打开请求

   • xhr.open(参数1, 参数2, 参数3);
     • 参数1：请求的方式 GET|POST
     • 参数2：请求的地址 url
     • 参数3：是否异步 true(异步)|faslse(同步)

3. 发送请求

   • xhr.send(参数);
     • 请求的参数：前端页面返回给服务器进行处理的数据

4. 接受响应

   • responseText：后台返回的数据

5. 处理数据

   • 根据具体业务需求

   <script type="text/javascript">
       // 创建XMLHttpRequest对象
       var xhr = new XMLHttpRequest();
       console.log(xhr);
       // 准备请求/打开请求
       xhr.open("GET","js/data.json",false); // 同步
       // 发送请求
       xhr.send(null);
       // 接收响应
       var txt = xhr.responseText;
       console.log(txt);
   </script>
   

GET与POST

封装Ajax-Get（初步）

function ajaxGet(async) {
    // 1、创建XMLHttpRequest核心对象
    var xhr = new XMLHttpRequest();
    // 2、准备请求/发送请求   open(参数1,参数2,参数3)
    xhr.open("GET", "js/data.json?uname=zhangsan&upwd=123", async); // 同步请求
    // 3、发送请求   send(参数1)
    xhr.send(null);
    // 4、响应数据
    // 判断是同步请求还是异步请求
    if (async) { // 异步请求
        // 通过onreadystatechange事件监听readystate的值变化 
        xhr.onreadystatechange = function () {
            // 判断数据是否完全响应   readyState （4=已经接受到全部响应数据，而且可以使用）
            if (xhr.readyState == 4) {
                callback();
            }
        }
    } else { // 同步请求
        callback();
    }

    // 回调函数
    function callback() {
        // 判断是否响应成功
        if (xhr.status == 200) { // 成功
            console.log(xhr.responseText);
        } else { // 失败
            console.log("错误状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
        }
    }
}

封装Ajax-Post（初步）

function ajaxPost() {
    // 1、创建XMLHttpRequest核心对象
    var  xhr = new XMLHttpRequest();
    // 2、准备请求/打开请求   open(参数1,参数2,参数3)
    xhr.open("POST","js/data.json",true); // 异步请求
    // 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // 3、发送请求   send(参数1)
    xhr.send("uname=zhangsan&upwd=123"); // 如果是POST请求，且有参数，需要在send()方法中设置
    // 4、响应数据
    // 通过onreadystatechange事件监听readystate的值变化 
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState);
        // 判断数据是否完全响应   readyState （4=已经接受到全部响应数据，而且可以使用）
        if (xhr.readyState == 4) {
            // 判断是否响应成功
            if (xhr.status == 200) { // 成功
                console.log(xhr.responseText);
            } else { // 失败
                console.log("错误状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
            }
        }
    }
}

封装Ajax

最终版

/**
* 封装Ajax方法
* @param obj
*/
function ajax(obj) {
    // 1、创建XMLHttpRequest核心对象
    var xhr = new XMLHttpRequest();
    console.log(xhr);
    // 格式化键值对的参数为字符串
    var params = formatParams(obj.data);
    // 判断是否是GET请求，如果是，将参数拼接到url上
    if (obj.type.toUpperCase() == "GET") {
        obj.url = (obj.url.indexOf("?") != -1) ? (obj.url + "&" + params) : (obj.url + "?" + params);
    }
    // 2、准备请求/打开请求 open(参数1,参数2,参数3)
    xhr.open(obj.type, obj.url, obj.async);

    // 3、发送请求   send(参数1)
    // 判断请求类型是GET ，则send(null)；如果请求方式是POST，则模拟表单提交，并send(参数)
    if (obj.type.toUpperCase() == "GET") {
        xhr.send(null);
    } else {
        // 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(params);
    }

    // 4、响应数据
    // 判断是同步请求还是异步请求
    if (obj.async) { // 异步请求
        // 通过onreadystatechange事件监听readystate的值变化
        xhr.onreadystatechange = function () {
            // 如果readyState = 4，已经接受到全部响应数据，而且可以使用
            if (xhr.readyState == 4) {
                callBack();
            }
        }
    } else {
        callBack();
    }

    /**
         * 回调方法，得到返回的数据
         */
    function callBack() {
        // 判断是否响应成功
        if (xhr.status == 200) { // 成功
            obj.success(xhr.responseText);
        } else { // 失败
            console.log("错误状态码：" + xhr.status + "，错误原因：" + xhr.statusText);
        }
    }
}

/**
     * 格式化参数:
     *  将
     *      data = {
     *	 		"uname":"zhangsan",
     *	 		"upwd":"123"
     * 		}
     *  转换为
     *      uname=zhansgan&upwd=123
     * @param {Object} data
     */
function formatParams(data) {
    // 准备一个数组
    var arr = [];
    for (var k in data) {
        // 将数据设置到数组中
        var param = "" + k + "=" + encodeURIComponent(data[k]);
        arr.push(param);
    }
    // 将数组转换成指定符号分隔的字符串
    var p = arr.join("&");
    return p;
}

Jquery-Ajax

$.ajax()

• jquery调用ajax方法：

  • 语法格式：

  $.ajax({
      type:"请求方式 GET/POST",
      url:"请求路径",
      data:{
          // 请求时需要传递的参数
      },
      async:"是否异步 true/false,默认是true",
      dataType:"预期服务器返回的数据类型   json、text等",
      success:function(result){
          // 回调函数   响应成功时调用的函数
      }
  })
  

$.get()

• 一个简单的 GET 请求功能以取代复杂 $.ajax：
  1. 有请求路径，无参数，无返回值：
     • $.get(“请求地址”);
  2. 有请求路径，有参数，无返回值：
     • $.get(“请求地址”,“请求参数”);
  3. 有请求地址，有返回值，无参数：
     • $.get(“请求地址”,function(result){});
  4. 有请求地址，有参数，有返回值：
     • $.get(“请求地址”,{参数名:“参数值”},function(result){});

$.post()

• 一个简单的 POST请求功能以取代复杂 $.ajax：
  1. 有请求路径，无参数，无返回值：
     • $.post(“请求地址”);
  2. 有请求路径，有参数，无返回值：
     • $.post(“请求地址”,“请求参数”);
  3. 有请求地址，有返回值，无参数：
     • $.post(“请求地址”,function(result){});
  4. 有请求地址，有参数，有返回值：
     • $.post(“请求地址”,{参数名:“参数值”},function(result){});

$.getJSON()

• 表示请求返回的数据类型是 JSON 格式的 ajax 请求：
  • $.getJSON(“请求地址”,“请求参数”,function(result){})

jsonp

​ 远程跨域时，如果有两个域名，从其中一个域名去访问另一个域名时，使用普通的ajax方法是获取不到数据的，那么就可以使用jsonp方式发送请求。

• 添加属性：

  • jsonp: ‘callback’
  • dataType: ‘jsonp’

• 发送ajax请求时，设置dataType:“jsonp”，支持跨域

• 后台服务器要支持远程跨域