JS知识点汇总(十九)--ajax

1. 说说ajax的原理以及如何实现AJAX 全称(Async Javascript and XML)即异步的 JavaScript 和 XML是一种创建交互式网页应用的网页开发技术可以在不重新加载整个网页的情况下与服务器交换数据并且更新部分网页Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求从服务器获得数据然后用JavaScript来操作DOM而更新页面流程图如下下面举个例子领导想找小李汇报一下工作就委托秘书去叫小李自己就接着做其他事情直到秘书告诉他小李已经到了最后小李跟领导汇报工作Ajax请求数据流程与“领导想找小李汇报一下工作”类似上述秘书就相当于XMLHttpRequest对象领导相当于浏览器响应数据相当于小李浏览器可以发送HTTP请求后接着做其他事情等收到XHR返回来的数据再进行操作2、实现过程实现 Ajax 异步交互需要服务器逻辑进行配合需要完成以下步骤创建 Ajax 的核心对象 XMLHttpRequest 对象通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接构建请求所需的数据内容并通过 XMLHttpRequest 对象的 send() 方法发送给服务器端通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态接受并处理服务端向客户端响应的数据结果将处理结果更新到 HTML 页面中创建XMLHttpRequest对象通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象const xhr new XMLHttpRequest();与服务器建立连接通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接xhr.open(method, url, [async][, user][, password])参数说明method表示当前的请求方式常见的有GET、POSTurl服务端地址async布尔值表示是否异步执行操作默认为trueuser: 可选的用户名用于认证用途默认为nullpassword: 可选的密码用于认证用途默认为null给服务端发送数据通过 XMLHttpRequest 对象的 send() 方法将客户端页面的数据发送给服务端xhr.send([body])body: 在 XHR 请求中要发送的数据体如果不传递数据则为 null如果使用GET请求发送数据的时候需要注意如下将请求数据添加到open()方法中的url地址中发送请求数据中的send()方法中参数设置为null绑定onreadystatechange事件onreadystatechange 事件用于监听服务器端的通信状态主要监听的属性为XMLHttpRequest.readyState ,关于XMLHttpRequest.readyState属性有五个状态如下图显示只要 readyState 属性值一变化就会触发一次 readystatechange 事件XMLHttpRequest.responseText属性用于接收服务器端的响应结果举个例子constrequestnewXMLHttpRequest()request.onreadystatechangefunction(e){if(request.readyState4){// 整个请求过程完毕if(request.status200request.status300){console.log(request.responseText)// 服务端返回的结果}elseif(request.status400){console.log(错误信息request.status)}}}request.open(POST,http://xxxx)request.send()3、封装通过上面对XMLHttpRequest 对象的了解下面来封装一个简单的ajax请求//封装一个ajax请求functionajax(options){//创建XMLHttpRequest对象constxhrnewXMLHttpRequest()//初始化参数的内容optionsoptions||{}options.type(options.type||GET).toUpperCase()options.dataTypeoptions.dataType||jsonconstparamsoptions.data//发送请求if(options.typeGET){xhr.open(GET,options.url?params,true)xhr.send(null)}elseif(options.typePOST){xhr.open(POST,options.url,true)xhr.send(params)//接收请求xhr.onreadystatechangefunction(){if(xhr.readyState4){letstatusxhr.statusif(status200status300){options.successoptions.success(xhr.responseText,xhr.responseXML)}else{options.failoptions.fail(status)}}}}使用方式如下ajax({type:post,dataType:json,data:{},url:https://xxxx,success:function(text,xml){//请求成功后的回调函数console.log(text)},fail:function(status){////请求失败后的回调函数console.log(status)}})