AJAX (AsyncJavascriptandXML)，即异步JavaScript和XML，是一种用于创建交互式web应用的web开发技术，可以与服务器交换数据，更新部分网页，而无需重新加载整个网页。
Ajax的原理简单来说就是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，然后用JavaScript操作DOM更新页面。
流程图如下:
这里有个例子:
如果领导要找小李汇报工作，他就委托秘书给小李打电话，然后他就接着干别的事，直到秘书告诉他小李到了。最后，小李向领导汇报。
Ajax请求数据流程类似于“领导要向小李汇报”，上面的秘书相当于XMLHttpRequest对象，领导相当于浏览器，响应数据相当于小李。
浏览器可以发送一个HTTP请求，然后做其他事情，并等待XHR返回数据后再运行。
实施程序
Ajax异步交互的实现需要服务器逻辑的配合，需要完成以下步骤:
创建Ajax的核心对象:XMLHttpRequest对象
通过XMLHttpRequest对象的open()方法与服务器建立连接。
构建请求所需的数据内容，并通过XMLHttpRequest对象的send()方法将其发送到服务器。
通过XMLHttpRequest对象提供的onreadystatechange事件监视服务器端的通信状态。
并接收和处理服务器响应给客户端的数据结果。
将处理结果更新到HTML页面。
创建一个XMLHttpRequest对象
使用XMLHttpRequest()构造函数初始化XMLHttpRequest实例对象
const xhr = new XMLHttpRequest();1***代码类型：[javascript]
与服务器建立连接。
通过XMLHttpRequest对象的open()方法建立与服务器的连接。
xhr.open(method, url, [async][, user][, password])1***代码类型：[javascript]
参数描述:
方法:指示当前的请求方法，通常称为GET和POST。
Url:服务器地址
Async:布尔值，指示操作是否异步执行；默认值为true。
User:可选用户名用于身份验证目的；默认值为` null。
Password:可选密码用于身份验证，默认值为“null”。
向服务器发送数据
通过XMLHttpRequest对象的Send()方法将客户端页面的数据发送到服务器端。
xhr.send([body])1***代码类型：[javascript]
body:XHR请求中要发送的数据体，如果没有传递数据，则为null。
如果使用GET request发送数据，需要注意以下几点:
在open()方法中将请求数据添加到url地址
请求数据中send()方法的参数设置为空
绑定到readystatechange事件
onreadystatechange事件用于监控服务器的通信状态，主要监控的属性是XMLHttpRequest.readyState，
XMLHttpRequest.readyState属性有五种状态，如下图所示。
每当readyState属性值更改时，将触发readystatechange事件。
xmlhttprequest . responsetext属性用于从服务器接收响应结果。
例如:
const request = new XMLHttpRequest()request.onreadystatechange = function(e){ if(request.readyState === 4){ // 整个请求过程完毕 if(request.status >= 200 && request.status <= 300){ console.log(request.responseText) // 服务端返回的结果 }else if(request.status >=400){ console.log("错误信息：" + request.status) } }}request.open('POST','http://xxxx')request.send()123456789101112***代码类型：[javascript]
密封和包装
基于以上对XMLHttpRequest对象的了解，我们来封装一个简单的ajax请求。
//封装一个ajax请求function ajax(options) { //创建XMLHttpRequest对象 const xhr = new XMLHttpRequest() //初始化参数的内容 options = options || {} options.type = (options.type || 'GET').toUpperCase() options.dataType = options.dataType || 'json' const params = options.data //发送请求 if (options.type === 'GET') { xhr.open('GET', options.url + '?' + params, true) xhr.send(null) } else if (options.type === 'POST') { xhr.open('POST', options.url, true) xhr.send(params) //接收请求 xhr.onreadystatechange = function () { if (xhr.readyState === 4) { let status = xhr.status if (status >= 200 && status < 300) { options.success && options.success(xhr.responseText, xhr.responseXML) } else { options.fail && options.fail(status) } } }}1234567891011121314151617181920212223242526272829303132***代码类型：[javascript]
使用方式如下
ajax({ type: 'post', dataType: 'json', data: {}, url: 'https://xxxx', success: function(text,xml){//请求成功后的回调函数 console.log(text) }, fail: function(status){////请求失败后的回调函数 console.log(status) }})
本文来自牙可爱的骚云吖~投稿，不代表舒华文档立场，如若转载，请注明出处：https://www.chinashuhua.cn/24/601995.html
微信扫一扫 
