原生Ajax,jquery Ajax,axios Ajax,promise async语法,

一、Ajax

1、Ajax简介

AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。

AJAX = Asynchronous JavaScript and XML.

AJAX 是一种用于创建快速动态网页的技术。

AJAX 通过在后台与服务器进行少量数据交换,使网页实现异步更新。这意味着可以在不重载整个页面的情况下,对网页的某些部分进行更新。

传统的网页(不使用 AJAX)如果需要更新内容,必须重载整个页面。

有很多使用 AJAX 的应用程序案例:Google Maps、Gmail、Youtube 和 Facebook。

2、Ajax工作原理

https://www.runoob.com/wp-content/uploads/2013/08/ajax.gif

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 对象:直接返回对应的值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值