一、Ajax
1、Ajax简介
AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。
AJAX = Asynchronous JavaScript and XML.
AJAX 是一种用于创建快速动态网页的技术。
AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。
传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。
有很多使用 AJAX 的应用程序案例:Google Maps、Gmail、Youtube 和 Facebook。
2、Ajax工作原理
3、ajax的使用及实现步骤
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
4、原生Ajax网络请求
//0构造ajax对象 做兼容
// var xhr;
// if (!window.XMLHttpRequest) {
// xhr = new ActiveXObject("Micsoft.XMLHTTP")
// } else {
// xhr = new window.XMLHttpRequest() //能够发送网络请求的对象
// }
// var a;
// var b;
// var c=a=0||b=20
var xhr=new window.XMLHttpRequest()||new ActiveXObject("Micsoft.XMLHTTP")
//1.建立连接
xhr.open("GET", "http://localhost:81/hqyj")
//2.发送网络请求
xhr.send()
//3.监听网络状态的变化
//readyState==>0 1 2 3 4
xhr.onreadystatechange = function() {
console.log(xhr.readyState)
//当网络状态为4的时候,代表数据包已经发送过来了
//状态码为200代表是这个接口原来制定的接口数据格式
if (xhr.readyState == 4&&xhr.status==200) {
//解析数据
console.log(JSON.parse(xhr.responseText))
var data=JSON.parse(xhr.responseText)
//把数据放入模型并写入UI界面面
var name1=document.createElement("h1")
name1.innerHTML=data.name
document.body.appendChild(name1)
var age1=document.createElement("p")
age1.innerHTML=data.age
document.body.appendChild(age1)
}
else if(xhr.readyState == 4&&xhr.status==404){
var data=JSON.parse(xhr.responseText)
console.log(data)
}
}
5、模仿jquery封装Ajax
function myjq(methd,url,cb) {
var xhr=new XMLHttpRequest()
xhr.open(methd,url)//可以选择拼接时间戳,兼容低版本ie的缓存问题
xhr.send()
xhr.onreadystatechange=function() {
if(xhr.readyState==4&&xhr.status==200){
var data=JSON.parse(xhr.responseText)
cb(data)
}
}
}
6、模仿axios封装Ajax
function myaxios (url) {
return new Promise((reject,faild)=>{
var xhr=new XMLHttpRequest()
xhr.open("GET",url)
xhr.send()
xhr.onreadystatechange=function () {
if(xhr.readyState==4&&xhr.status==200){
reject(xhr.responseText)
}else{
faild(xhr.responseText)
}
}
})
}
//myaxios(url)
.then((data)=>{
console.log(data)
})
//.catch((data)=>{
console.log(data)
})
实例操作1:
<button type="button" onclick="fn()"> 点我</button>
<script type="text/javascript">
function fn () {
myaxios("http://localhost:81/myaxios1")
.then((data)=>{
console.log(data,111)
})
.catch((data)=>{
console.log(data,222)
})
}
</script>
实例操作2:
<button type="button" onclick="fn()"> 点我2扫地的</button>
<script type="text/javascript">
async function fn () {
var data=await myaxios("http://localhost:81/myaxios")
console.log(data)
}
</script>
7、jQuery Ajax
1.简单认识jQuery
jQuery 库可以通过一行简单的标记被添加到网页中。
jQuery是一个JavaScript函数库。
jQuery是一个轻量级的"写的少,做的多"的JavaScript库。
jQuery库包含以下功能:
-
HTML 元素选取
-
HTML 元素操作
-
CSS 操作
-
HTML 事件函数
-
JavaScript 特效和动画
-
HTML DOM 遍历和修改
-
AJAX
-
Utilities
除此之外,Jquery还提供了大量的插件。
2.jQuery Ajax
jQuery 提供多个与 AJAX 有关的方法。
通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
使用步骤:
1.引入jQuery cnd
2.使用
2.1综合的方法 $.ajax({})在对象的属性去配置请求的相关功能选项:(所有选项都是可选的)----type:String//请求方式,默认get
----url:String//请求的地址
----async:Boolean//(默认: true) 默认设置下,所有请求均为异步请求。如果发送同步请求,设置为 false。注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
----dataType:String//预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息返回 responseXML 或 responseText,并作为回调函数参数传递,可用值: "xml": 返回 XML 文档"html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数"json": 返回 JSON 数据 。如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 html 返回 "text/html")。错误的 MIME 类型可能导致不可预知的错误如果dataType设置为"script",那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用DOM的script标签来加载)
----cache:Boolean//(默认: true,dataType为script时默认为false),设置为 false 将不会从浏览器缓存中加载请求信息。
----timeout:times//超时时间,单位毫秒.如果设置该选项,当请求没有在指定时内完成,请求会取消并触发error回调,回调状态码为'timeout',默认为0:请求完成之前永不取消
----contentType:String//(默认: "application/x-www-form-urlencoded") 发送信息至服务器时内容编码类型。默认值适合大多数应用场合。
----data:String//发送的参数:"count=25&maxid=29448"。可以填对象,但是属性值如果为数组,jQuery 将自动为不同值对应同一个名称。如:{karen:["46", "singer"]} 转换为 '&karen=46&karen=singer'
----error:function//请求失败时的回调 function (XMLHttpRequest, textStatus, errorThrown) {
//参数:XMLHttpRequest 对象、错误状态、捕获的错误对象
// 通常 textStatus 和 errorThrown 之中只有一个会包含信息 //this指向$.ajax(options)的options参数对象 }
//function(data,)----success:function(data,sta,xhr)//请求成功的回调,三个参数:第一个响应的数据(服务器响应的是什么类型的数据,这里就是对应的类型:比如响应json那这里就是json格式的数据,响应script这里就是加载的js文本). 第二个jq状态码,一般都是"success". 第三个发送请求的XMLHttpRequest对象,如果是js的请求(dataType:’script’),第三个参数是没有值得
2.2抽象出来的一些单一功能的方法
$.get(url,(data)=>{})
$.post()
$.getJSON()
8、axios Ajax
axios:基于promise用于浏览器和node.js的http客户端;
与ajax区别:
axios是通过promise实现对ajax技术的一种封装,就像jQuery实现ajax封装一样。
简单来说: ajax技术实现了网页的局部数据刷新,axios实现了对ajax的封装。
特点:
- 支持浏览器和node.js
- 支持promise
- 能拦截请求和响应
- 能转换请求和响应数据
- 能取消请求
- 自动转换JSON数据
- 浏览器端支持防止CSRF(跨站请求伪造)
执行 GET 请求
// 为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
执行 POST 请求
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
8.1 axios Ajax底层的promise配合async做网络请求
//ES6-promise 和 ES7-async 中的基础技术来实现的
async function axiosasync () {
var re=await axios.get("http://localhost:81/axiosdata")//假设返回世界上的所有国家
console.log(re)//假设挑选出了 所有国家中的5G排行第一的国家
//再次做网络请求
var re1=await axios.get("http://localhost:81/axiosdata2")
console.log(re1)//假设返回了这个国家的所有省的相关 信息
}
二、promise对象
Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息。是异步编程的一种解决方案。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。
1、promise状态
1.1、对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:
-
pending: 初始状态,不是成功或失败状态。
-
fulfilled: 意味着操作成功完成。
-
rejected: 意味着操作失败。
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
1.2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
2、promise 优缺点
有了 Promise 对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise 对象提供统一的接口,使得控制异步操作更加容易。
Promise 也有一些缺点。首先,无法取消 Promise,一旦新建它就会立即执行,无法中途取消。其次,如果不设置回调函数,Promise 内部抛出的错误,不会反应到外部。第三,当处于 Pending 状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)。
3、Promise 创建
要想创建一个 promise 对象、可以使用 new 来调用 Promise 的构造器来进行实例化。
var promise = new Promise(function(resolve, reject) {
// 异步处理
// 处理结束后、调用resolve 或 reject
});
Promise 构造函数包含一个参数和一个带有 resolve(解析)和 reject(拒绝)两个参数的回调。在回调中执行一些操作(例如异步),如果一切都正常,则调用 resolve,否则调用 reject。
实例:
var myFirstPromise = new Promise(function(resolve, reject){
//当异步代码执行成功时,我们才会调用resolve(...), 当异步代码失败时就会调用reject(...)
//在本例中,我们使用setTimeout(...)来模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
setTimeout(function(){
resolve("成功!"); //代码正常执行!
}, 250);
});
myFirstPromise.then(function(successMessage){
//successMessage的值是上面调用resolve(...)方法传入的值.
//successMessage参数不一定非要是字符串类型,这里只是举个例子
document.write("Yay! " + successMessage);
});
对于已经实例化过的 promise 对象可以调用 promise.then() 方法,传递 resolve 和 reject 方法作为回调。
promise.then() 是 promise 最为常用的方法。
promise.then(onFulfilled, onRejected)
promise简化了对error的处理,上面的代码我们也可以这样写:
promise.then(onFulfilled).catch(onRejected)
4、Promise.prototype.then方法:链式操作
Promise.prototype.then 方法返回的是一个新的 Promise 对象,因此可以采用链式写法。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// proceed
});
上面的代码使用 then 方法,依次指定了两个回调函数。第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
如果前一个回调函数返回的是Promise对象,这时后一个回调函数就会等待该Promise对象有了运行结果,才会进一步调用。
//这种设计使得嵌套的异步操作,可以被很容易得改写,从回调函数的"横向发展"改为"向下发展"。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// 对comments进行处理
});
5、Promise.prototype.catch方法:捕捉错误
Promise.prototype.catch 方法是 Promise.prototype.then(null, rejection) 的别名,用于指定发生错误时的回调函数。
getJSON("/posts.json").then(function(posts) {
// some code
}).catch(function(error) {
// 处理前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
Promise 对象的错误具有"冒泡"性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个 catch 语句捕获。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前两个回调函数的错误
});
三、async 函数
async 是 ES7 才有的与异步操作有关的关键字,和 Promise , Generator 有很大关联的。
1、语法
async function name([param[, param[, ... param]]]) { statements }
- name: 函数名称。
- param: 要传递给函数的参数的名称。
- statements: 函数体语句。
2、返回值1
async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。
async function helloAsync(){
return "helloAsync";
}
console.log(helloAsync()) // Promise {<resolved>: "helloAsync"}
helloAsync().then(v=>{
console.log(v); // helloAsync
})
async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。
await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误。
function testAwait(){
return new Promise((resolve) => {
setTimeout(function(){
console.log("testAwait");
resolve();
}, 1000);
});
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
[return_value] = await expression;
//expression: 一个 Promise 对象或者任何要等待的值。
3、返回值2
返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。
如果一个 Promise 被传递给一个 await 操作符,await 将等待 Promise 正常处理完成并返回其处理结果。
function testAwait (x) {
return new Promise(resolve => {
setTimeout(() => {
resolve(x);
}, 2000);
});
}
async function helloAsync() {
var x = await testAwait ("hello world");
console.log(x);
}
helloAsync ();
// hello world
正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数。
function testAwait(){
console.log("testAwait");
}
async function helloAsync(){
await testAwait();
console.log("helloAsync");
}
helloAsync();
// testAwait
// helloAsync
await针对所跟不同表达式的处理方式:
-
Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。
-
非 Promise 对象:直接返回对应的值。