【前端】之AJAX基础知识

AJAX 简介

• AJAX(Asynchronous JavaScript and XML)，异步的JavaScript和XML
• AJAX不是编程语言，只是一种在无需重新加载整个网页的情况下能够更新部分网页的技术
• AJAX技术使网页请求从同步请求发展成了异步请求

AJAX HTTP请求

• 一个完整的HTTP请求过程通常有以下几个步骤：
  • 建立TCP连接
  • WEB浏览器向WEB服务器发送请求信息
  • WEB浏览器发送请求头信息
  • WEB服务器应答
  • WEB服务器发送应答头信息
  • WEB服务器向浏览器发送数据
  • WEB服务器关闭TCP连接
• 一个HTTP请求一般由四个部分组成：
  • HTTP请求的方法或动作，比如是GET还是POST请求
  • 正在请求的URL，即请求的地址
  • 请求头，包含了一些客户端的环境信息，身份验证信息等
  • 请求体，即请求正文，包含客户端提交的查询字符串信息、表单信息等

AJAX XMLHttpRequest

• XMLHttpRequest（XHR）是AJAX的核心，用于发送请求
• 创建XHR对象的代码如下（兼容完整版代码）：

var request; // XMLHttpRequest对象
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest(); // 兼容Chrome、Firefox、Opera、IE7+浏览器
} else {
    request = new ActiveXObject('Microsoft.XMLHTTP'); // 兼容IE5、IE6
}

• XMLHttpRequest对象的方法：open(method, url, async)
  • 开启HTTP请求对象
  • method：请求方式，字符串类型，GET或者POST
  • url：请求的地址
  • async：这个请求是同步的还是异步的，true/false，默认是true
• XMLHttpRequest对象的方法：setRequestHeader(type, code)
  • 设置HTTP请求的头信息，必须卸载open()和send()方法之间
  • type：要发送的数据类型，一般表单都写Content-type
  • code：要发送的数据格式，一般都写application/x-www-form-urlencoded
• XMLHttpRequest对象的方法：send(body)
  • 发送HTTP请求
  • body：传送的数据，如果是GET则不需要填写，如果是POST则传入请求参数
• XMLHttpRequest对象的属性：
  • responseText：获取字符串形式的相应数据
  • responseXML：获取XML形式的相应数据
  • status：以数字的形式返回HTTP状态码
  • statusText：以文本的形式返回HTTP状态码
  • readyState：监听服务器响应，具体如下：
    • readyState = 0：请求尚未初始化，open()方法还没有调用
    • readyState = 1：服务器连接已经建立，open()方法已经被调用
    • readyState = 2：请求已经被接受，即服务器已经接收到头信息了
    • readyState = 3：请求处理中，即服务器已经接收到请求体了
    • readyState = 4：请求已经完成，且响应已经就绪，即响应已经完成了
• 一个使用XMLHttpRequest创建请求并处理相应的示例代码如下：

var request = new XMLHttpRequest();
request.open("GET", "get.html", true);
request.send();
request.onreadystatechange = function() { // 此方法在每次readyState属性变化时触发
    if(request.readyState === 4 && request.status === 200) {
        var response = request.responseText;
        // 处理response
    }
};

AJAX JSON数据格式

• JSON(JavaScript Object Notation)，JavaScript对象表示法
• JSON时存储和交换文本信息的语法，类似XML，采用键值对的方式来组织，易于阅读、编写和解析
• JSON较XML的优点：
  • JSON的长度和XML的格式比起来更短小
  • JSON读写的速度更快
  • JSON可以使用JavaScript内建的方法直接进行解析，转换成JS对象非常方便
• JSON语法规则：
  • JSON中的数据以键值对的形式存储，键放在双引号中，键值之间用冒号隔开，如："name":"Jack"
  • JSON中的数据类型：数字、字符串、boolean值、数组、对象、null
  • JSON中的数组放在中括号中，对象放在大括号中
• 一个JSON字符串的示例代码如下：

  { staff: [ { "name" : "Jack", age : 22 }, { "name" : "Rose", age : 18 } ] }
  

• 将JSON解析成JS对象：
  • 方法一：var jsonobj = eval('(' + jsonstr + ')');，此方法不会验证JSON是否合法，不安全，不推荐
  • 方法二：var jsonobj = JSON.parse(jsonstr);，此方法会验证JSON是否合法，推荐使用

AJAX jQuery

• jQuery库中封装了AJAX请求的方法，让我们可以不再关心浏览器是否兼容等问题
• 在使用jQuery中的AJAX时，需要先引入jQuery库到项目中
• 一个使用jQuery#AJAX请求服务器数据的示例代码如下：

$.ajax({
    type: "GET", // 请求方法，GET或POST
    url: "get.html", // 请求的地址
    dataType: "JSON", // 返回值格式
    data: {
        name: "Jack",
        age: 22
    },
    success: function(data) { // 请求成功时回调的方法
        alert(data.msg);
    },
    error: function(jqXHR) { // 请求失败时回调的方法
        alert(jqXHR.status);
    }
});