Ajax基本介绍

Ajax

快速的实现交互式的动态页面

简单实现ajax请求

• 创建一个XMLHttpRequest实例

• 调用open方法，开始发送请求

• 调用send的方法

• 注册监听

• 渲染页面

<script>
// 动态页面  静态页面
// async hronous  javascript and xml
​
// 创建一个XMLHttpRequest实例
var xhr = new XMLHttpRequest()
// console.log(xhr);
// 调用open方法，开始发送请求
// 参数1：请求方式：get（请求）  post（携带数据 向下拉取）
// 参数2：请求地址 url
// 参数3：布尔值  ture---异步  false--同步
xhr.open('get','./数据.json',true)
// // 调用send的方法
xhr.send()
// 注册监听
// 0:初始化 
// 1：调用open（），但是请求还没有结束
// 2：调用send（），请求完成
// 3：正在处理数据
// 4：完成数据的处理
// console.log(xhr);
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
    if (xhr.status===200) {
        // 渲染页面
        console.log(xhr.responseText);
​
    }
}
}

​
​

转化数据格式

字符串的数据格式转化成json

JSON.parse()

将json转成字符串

JSON.stringify()

// 动态页面  静态页面
// async hronous  javascript and xml
​
// 创建一个XMLHttpRequest实例
var xhr = new XMLHttpRequest()
// console.log(xhr);
// 调用open方法，开始发送请求
// 参数1：请求方式：get（请求）  post（携带数据 向下拉取）
// 参数2：请求地址 url
// 参数3：布尔值  ture---异步  false--同步
xhr.open('get','./数据.json',true)
// // 调用send的方法
xhr.send()
// 注册监听
// 0:初始化 
// 1：调用open（），但是请求还没有结束
// 2：调用send（），请求完成
// 3：正在处理数据
// 4：完成数据的处理
console.log(xhr);
xhr.onreadystatechange=function(){
if (xhr.readyState===4) {
    if (xhr.status===200) {
        // 渲染页面
       var text=JSON.parse(xhr.responseText)
        document.body.innerHTML=text[0].name
    }
}
}

get携带数据

var xhr=new XMLHttpRequest()
xhr.open('get','./数据.json?name=z&password=123',true)
xhr.send()
xhr.onreadystatechange=function(){
    if (xhr.readyState===4) {
        if (xhr.status===200) {
            console.log(xhr.responseText);
        }
    }

}

post携带参数

var xhr=new XMLHttpRequest()
xhr.open('post','./数据.json',true)
xhr.send('name=123&password=123')
xhr.onreadystatechange=function(){
    if (xhr.readyState===4) {
        if (xhr.status===200) {
            console.log(xhr.responseText);
        }
    }
}

get和post区别：

• 请求携带参数不同，

• 携带参数的大小不同，get大约2kb，post比get大很多

• get和post安全性不同，get有缓存，post没有

• get和post携带的参数后端获取方式也不同

封装

function ajax(method, url, data, callback) {
var xhr = new XMLHttpRequest()
if (method.toUpperCase() === 'GET') {
    // xhr.send()
    url = url + "?" + data
}
xhr.open(method, url, true)
if (method.toUpperCase() === 'POST') { xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
    xhr.send(data)
} else {
    xhr.send()
}
xhr.onload = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            callback && callback(xhr.responseText);
        }
    }
}
}
ajax('post', './数据.json', 'name=zhangswan', function fn(options) {
console.log(options);
})

对象形式的封装

function ajax(options) {
var xhr = new XMLHttpRequest()
// name='zhangsan'& password=123
var obj = {
type: 'get',
url: './数据.json',
data: {},
"contentType": "application/x-www-form-urlencoded",
success: function (data) {
    console.log(data);
},
err: function (data) {
    console.log(data);
}
}
obj = Object.assign(obj, options)
​
​
var data = ''
for (let key in obj.data) {
data += key + "=" + obj.data[key] + '&'
}
data = data.substr(0, data.length - 1)
if (obj.type.toUpperCase() === 'GET') {
obj.url = obj.url + "?" + data
}
xhr.open(obj.type, obj.url, true)
if (obj.type.toUpperCase() === 'POST') {
var type = obj.contentType
xhr.setRequestHeader('content-type', type)
if (type === 'application/x-www-form-urlencoded') {
    xhr.send(data)
} else if (type === 'application/json') {
    xhr.send(JSON.stringify(data))
}
xhr.send(data)
} else {
xhr.send()
}
xhr.onload = function () {
if (xhr.readyState === 4) {
    if (xhr.status === 200) {
        obj.success(xhr.responseText)
    }
}
}
}
ajax({
url: './shu.json',
success: function (data) {
console.log(data);
}
})

promise的封装

function ajax(method, url, data) {
return new Promise(function (resolve, reject) {
var xhr = new XMLHttpRequest()
if (method.toUpperCase() === 'GET') {
// xhr.send()
url = url + "?" + data
}
xhr.open(method, url, true)
if (method.toUpperCase() === 'POST') {
xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
xhr.send(data)
} else {
xhr.send()
}
xhr.onreadystatechange = function () {
if (xhr.readyState !== 4) {
return
} else {
if (xhr.status === 200) {
resolve(xhr.responseText)
// callback && callback(xhr.responseText);
} else {
reject(xhr.status)
}
}
}
})
​
}
ajax('get', './数据.json', 'name=zhangswan').then(function (data) {
console.log(data);
}, function (data) {
console.log("请求失败"+data);
})

promise

异步编程的方式，可以解决回调地狱的问题

特点：有三个状态 pending（正在进行） fulfilled（已经成功）

rejected （已经失败）

结果只有两种可能：pending（正在进行）到 fulfilled（已经成功） --成功---resolve

pending（正在进行）到 rejected （已经失败）---失败---reject

接收一个回调函数 里面有两个参数

回调地狱

  setTimeout(function () {
            console.log(1);
            setTimeout(function () {
                console.log(2);
                setTimeout(function () {
                    console.log(3);
                    setTimeout(function () {
                        console.log(4);
                    }, 4000)
                }, 3000)
            }, 2000)
        }, 1000)

解决回调地狱

const p = new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(1);
resolve(2)
}, 1000)
})

p.then(function (value) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
    console.log(value);
    resolve(3)
}, 2000)
})
}
).then(
function (value) {
return new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log(value);
        reject(4)
    }, 3000)
})
}
).then(
function (value) {
return new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log(value);

    }, 3000)
})
}, function (error) {
return new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log('失败'+error);

    }, 3000)
})
}
)

Promise.then（）方法

两个参数都是函数，第一个是成功的函数，第二个是失败的函数

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

catch

用来捕获失败，相当于then（undefined，function（））或者then（null，function（））

const p = new Promise(function (resolve, reject) {
        reject(2)
})
p.then(function (value) {
 console.log(value)
}
).catch(function(error){
    console.log(error +'出错');
})

promise的状态不会一经确定就不会改变了

const p = new Promise(function (resolve, reject) {
reject(2)
resolve(6)
})

p.then(function (value) {
console.log(value);
resolve(3)
}
).catch(function (error) {
console.log(error + '出错');
})
//输出2出错了

Promise.all（）方法

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.all([p1, p2, p3]);

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled(成功)，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected（失败），p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

Promise.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。

Promise.race()

方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const p = Promise.race([p1, p2, p3]);

p的状态由p1、p2、p3的状态那个先锁定而决定