js学习7（原生Ajax）

简要

Ajax：Asynchronic JavaScript And XML，翻译为“异步的JS和XML”，用于向服务端发送异步请求从而局部更新页面的技术（无需重新请求加载页面，即可实现页面动态更新）

原生JS实现

### 两种实现方法：

XMLHttpResquest、fetch

 

## XMLHttpResquest：

new XMLHttpRequest()

xhr.onload = success_callback【this.responseText】

xhr.onerror = error_callback

xhr.open(mehtod,url)

xhr.send([data])

 

## fetch

fetch(url,[option_obj]) => Promise对象

options：method、body、headers等等

 

 

### JSON：

Ajax实现请求与响应通信的数据格式称为JSON

 

## JS中支持JSON化的数据类型

字符串、对象、数组

 

## JSON化的规范

要求数据为纯数据格式，不能包含属性和方法；

对象的属性和值必须使用双引号包裹（不能不包裹或者使用单引号包裹）；

 

## JS实现JSON化的相关方法

解析JSON为JS数据：JSON.parse(JSON数据)

JS数据转换为JSON：JSON.stringify(对象/数据/字符串)

 

 

### MIME类型

响应头的Content-Type项反馈给浏览器当前媒体文件或内容的类型；

JSON数据对应的MIME类型为：application/json

MIME 类型 | 菜鸟教程 (runoob.com)

 XMLHttpRequest实现

### 前言：

（1）需要使用两个侦听器来处理响应结果，即onload和onerror；

（2）需要JSON化数据和解析JSON数据；

 

 

### get请求：

// 1. 创建对象

var xhr = XMLHttpRequest();

// 2. 定义侦听器的回调函数

// 请求成功回调函数

function success_callback(){

        var data = JSON.parse(this.responseText);  // 获取响应数据并解析

};

// 请求失败回调函数

function error_callback(err){

        console.log(err);

};

// 3. 侦听器监听处理

xhr.onload = success_callback;

xhr.onerror = error_callback;

// 4. 发送请求
xhr.open('GET',url_str)

xhr.send();

 

 

### post请求：

与get请求不同的是，post请求还会发送数据给服务器，而且post数据是在请求体中的；

所以需要设置请求时响应后的头部选项Content-Type，使被浏览器正确解析；

// 发送请求，省略其他步骤（同get请求）

xhr.open('POST',url_str);

xhr.setRequestHeader("Content-Type","application/json;charset=UTF-8"); 

xhr.send(json.stringify({'data1':'value1','data2':100}))

fetch实现 

### 前言：

（1）返回Promise对象，使用Promise对象的then和catch来处理响应结果；

（2）第一个then接受的是响应完成的Response对象，我们应该json化处理然后在第二个then中再获取服务器传来的数据；

（3）即使请求错误，fetch方法执行后还是会执行then方法，then中出错后被catch捕获并处理，所以如果想要请求响应错误时不让其执行then，需要首先使用then捕获响应异常；

 

 

 

### get请求：

var ftest = fetch(url_str)

.then(resp=>resp.json())

.then(data=>console.log(data))

.catch(err=>console.log(err))

 

# 处理响应异常

var ftest = fetch(url_str)

.then(respOk)    // 先看是否成功响应

.then(resp=>resp.json())

.then(data=>console.log(data))

.catch(err=>console.log(err))

 

function respOk(resp){

        if (!resp.ok){

                throw Error(resp.statusText);

        }else{

                return resp;

        }

}

 

 

### post请求：

var ftest = fetch(url_str,{

        method:'POST',

        body:JSON.stringify({...}),

        headers:{

                "Content-Type":"application/json;UTF-8"

        },

})

.then(respOk)    // 先看是否成功响应

.then(resp=>resp.json())

.then(data=>console.log(data))

.catch(err=>console.log(err))

 

function respOk(resp){

        if (!resp.ok){

                throw Error(resp.statusText);

        }else{

                return resp;

        }

}

总结

1. XMLHttpRequest方式需要用到两个侦听器，而fetch方式返回的是Promise对象（需要先处理响应错误和转换响应数据再获取数据）

2. post请求需要传入并JSON化数据，并设置响应头的Content-Type项为application/json

3. 两种方式都要用到JSON来处理数据（解析和JSON化）