其工作原理,主要的工作原理

ajax的原理和功能(简述ajax的工作原理)。

Ajax(async javascriptandxml)的全称是异步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 gt;= 200 amp;amp; request.status lt;= 300){ console.log(request.responseText) // 服务端返回的结果 }else if(request.status gt;=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 gt;= 200 amp;amp; status lt; 300) { options.success amp;amp; options.success(xhr.responseText, xhr.responseXML) } else { options.fail amp;amp; 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) } })