AJAX笔记

---

### Ajax全称```Async Javascript And XML``` * async：指Ajax能够创建异步的HTTP线程请求到服务器，Ajax的核心价值。 * javascript：Ajax技术实现的载体平台，js内置对象```XMLHttpRequest```操作Ajax。 * xml：一种数据格式，用来客户端和服务器交互数据，现在更多的使用json。

 

客户端创建Ajax并发送HTTP请求

//创建一个请求对象实例，使用ajax发送请求到服务器，执行验证并获取返回的结果
const xhr = new XMLHttpRequest;

// 请求结束后执行 获取服务器返回的数据
xhr.onloadend = function() {
	const result = xhr.responseText;	// 服务器返回的结果
}

// 和服务器建立连接：type请求类型(get/post),url地址，async是否为异步(默认为true 异步的)
xhr.open(type,url,async);

// 设置HTTP头: option头部，calue值 （没有要求设置，可跳过）
xhr.setRequestHeader(option,value);	

// 发送HTTP请求，设置请求体数据：data数据，GET请求则为null
xhr.send(data);

监听ajax请求方式

在服务端处理的过程，ajax中需要监听，有2种方式,
一、分别监听各个阶段的事件

xhr.onloadstart = function() {}		// 1 发送请求时
xhr.onprogress = function() {}		// 2,3 服务端处理请求时
xhr.onloadend = function() {}		// 4 请求完成时

二、监听所有请求阶段
通过xhr.readState可获取当前阶段值

xhr.onreadystatechange = function () {
	if (xhr.readyState == 4) { // 只是请求完成不一样成功
		if (xhr.status == 200) { //请求成功
			// status 200 ok 
			console.log(xhr.responseText)	// 请求数据结果
		} else { // 不成功
		}
	} else {
		// 请求中...
	  }
}

 


 

get请求数据在地址栏传输，外部可视，安全性低，数据容量有限，使用轻便
发送一个带有参数的get请求

• get请求的参数就直接在url后面进行拼接

const xhr = new XMLHttpRequest;
// 直接在url后面加"?"，然后以键值对形式拼接，参数之间以"&"分割
xhr.onloadend = function() {
	// 获取服务端返回的数据
	const data = xhr.responseText;
}
xhr.open("get","./data.php?a=100&b==200");
xhr.send(null);

post请求一般要借助表单来完成，表单中的数据在提交时会自动保存在请求体中，外部不可见，数据安全性高，容量大。
发送带有参数的post请求

• post请求的参数时携带在请求体中，所以不需要在url后面拼接
• post请求中需要设置Content-Type头的文档类型，用来告知服务端post传的数据是如何组装的，以便解析。如果是url拼接的文本内容，需要设置为application/x-www-form-urlencoded.

const xhr = new XMLHttpRequest;
// 监听请求状态改变
xhr.onreadystatechange = function () {
	// 确保请求结束
	if (xhr.readyState == 4) {	
		// 确保请求成功
		if(xhr.status == 200) {
			const data = xhr.responseText;
		}
	}
}
// 请求行
xhr.open("post","login.php);
// 请求头 在ajax中必须明确指定post数据的编码格式
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
// 请求体 数据 和 编码格式一致
xhr.send(`uname=${uname}&password=${password}`);

 
 

Promise

Promise代表了一个异步操作的最终完成或者失败，支持链式调用和并行多异步操作，解决回调地狱问题

Promise是es6新增技术，一个构造函数，它可以以同步代码的方式去执行异步业务。有时需要前几个请求完成再执行就可以Promise来管理，确保之前请求完成后执行。

Promise本意"承诺信任"，意思是只会执行一种，要不调用成功，要不调用失败，不会同时出现。
一个异步是持续一段事件，在Promise中分为3种状态:

1. 初始化时 pending
2. 完成时 fulfilled，对应执行resolve回调
3. 被拒绝时 rejected，对应执行reject回调

使用Promise

  // 给promise套上函数可保证页面执行时promise不会立即执行
    function f(url) {
      return new Promise(function (resolve, reject) {
        const xhr = new XMLHttpRequest;
        xhr.onloadend = () => {
          if (xhr.status == 200) {
            resolve(xhr.responseText)
          } else {
            reject("数据请求失败！")
          }
        }
        xhr.open("get", url);
        xhr.send(null);
      })
    }

链式调用

then()函数中的返回值能在下一个then()中获取到,这就是链式调用。如果不在then中放入参数，例Promise.then().then(),那么后面的then()依旧可以得到之前then返回的值。
then()函数会返回一个和原来不同的新的Promise，并把上一个then()的返回结果传给这个新的Promise的then方法

    f("./demo.php").then(resolve => {
      console.log(`请求成功!数据；${resolve}`);
      return f("./6.demo.php")
    }, reject => {
      console.log(reject);
      return f("./6.demo.php")
    }).then(resolve => {
      console.log(`请求成功!数据；${resolve}`);
    }, reject => {
      console.log(reject);
    })

Promise中的catch方法是.then(null,reject)类似,用于发生错误时回调

f("./demo.php").catch(error => {
// 用于捕获错误
})

Promise.all

Promise.all([promise1,promise2])并行，等待所有promise成功。
如果都成功了，则all对应的promise也成功；如果有一个失败了，则all对应的promise失败

Promise.race

Promise.race([promise1,promise2]),返回一个promise，里面那个结果获取的快，就返回那个结果，不管结果本身是成功状态还是失败状态。

Promise.resolve()

promise.resolve()可以将对象转换为promise对象;
promise.resolve()等价于new Promise(resolve => resolve('foo'))