一、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
// helloAsyncawait 操作符用于等待一个 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
// helloAsyncawait针对所跟不同表达式的处理方式：
-
Promise 对象：await 会暂停执行，等待 Promise 对象 resolve，然后恢复 async 函数的执行并返回解析值。
-
非 Promise 对象：直接返回对应的值。
扫一扫
1404
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
