公司怎么申请免费做网站,石家庄建站培训,给网站做公正需要带什么,通城做网站的ajax 封装 一、 什么是Ajax#xff1f;二、 Ajax的优缺点#xff1f;2.1 优点2.2 缺点 三、 Ajax的使用3.1 状态码3.2 xhr的基本使用3.3 ajax原生封装#xff1a;3.3.1 触发GET请求#xff1a;3.3.2 调用POST请求#xff1a; 四、Ajax的约束 一、 什么是Ajax#xff1f; … ajax 封装 一、 什么是Ajax二、 Ajax的优缺点2.1 优点2.2 缺点 三、 Ajax的使用3.1 状态码3.2 xhr的基本使用3.3 ajax原生封装3.3.1 触发GET请求3.3.2 调用POST请求 四、Ajax的约束 一、 什么是Ajax
AjaxAsynchronous JavaScript And XML是2005年新出现的技术它的出现是为了解决这样一个场景整个页面中只有一小部分的数据需要进行更新按照传统的前后端交互我们需要向服务器请求该网页的所有数据然后再在客户端重新渲染这无疑是非常低效的操作。因此Ajax就可以做到只向服务器请求我们想要的那一小部分数据而不用请求全部数据进而在刷新整个页面的前提下更新那部分的数据。
举个例子我们去饭店吃饭然后点了一桌子菜后来发现其中有一道菜太咸了因此我们只需要让服务员端回去给厨师重新做这一道菜再拿回来就行了。
吃饭事件数据更新我们客户端菜品页面所有的数据服务员ajax对象厨师服务器
当我们发现有一道菜太咸了不需要让厨师把所有的菜重新做一遍只要让服务员拿这一道菜回去给厨师重做这一操作就相当于让ajax对象向后端请求那一小部分数据再拿回来更新页面而无需刷新整个页面。
二、 Ajax的优缺点
当我们发现有一道菜太咸了不需要让厨师把所有的菜重新做一遍只要让服务员拿这一道菜回去给厨师重做这一操作就相当于让ajax对象向后端请求那一小部分数据再拿回来更新页面而无需刷新整个页面。
2.1 优点
浏览器默认支持一般浏览器都是支持JavaScript的提高用户体验不需要刷新整个页面而只需要局部刷新提高页面的性能只需要请求部分数据所以数据量就明显下降了
2.2 缺点
破坏了浏览器的前进和后退功能Ajax不会改变网页URL因此不会在浏览器记录前后页面对搜索引擎的支持较弱搜索引擎无法监测到JS引起的数据变化
三、 Ajax的使用
Ajax的基本流程创建XHR对象 发送数据 接收数据
3.1 状态码
既然Ajax涉及到前后端的数据交互那么我们就先来简单的看一下几种类型的状态码如下表
状态码含义100 ~ 199连接含义200 ~ 299各种成功的请求300 ~ 399重定向400 ~ 499客户端错误500 ~ 599服务端错误
3.2 xhr的基本使用
在使用xhr之前我们要创建一个xhr的实例对象
let xhr new XMLHttpRequest()然后再调用xhr对象上的 open() 方法表示创建一个请求。 open() 方法接收三个参数
第一个参数 请求的类型例如get 、post第二个参数 请求的URL第三个参数 是否异步发送请求默认为true
// 创建了一个Ajax请求
xhr.open(get, example.php, true)光调用了 open() 方法还不够它只是创建了一个请求但还没有发送请求因此我们还要调用xhr对象上的另一个方法即 send() 方法表示将请求发送给目标URL
send() 方法接收一个参数
第一个参数 作为请求主体发送的数据例如post请求携带的数据
// 我们上面创建的是get请求因此send()方法无需传参
xhr.send()请求发送出去后客户端需要接收服务器响应回来的数据xhr对象中有一些属性它们存储着服务端返回来的一些数据信息如下表所示:
属性名含义response Text服务端返回的文本信息responseXML服务端返回的XML DOM 文档statusHTTP 状态码status TextHTTP状态码说明readyStatexhr对象的请求响应阶段
既然我们要获取服务端返回的数据我们就要知道服务端是何时返回数据的这就可以通过上面表格中的 readyState 属性来判断了 readyState 属性一共有5个值分别表示不同的请求响应阶段
0 还未创建请求即未调用 open() 方法1 已调用 open() 方法但未发送 send() 方法2 已调用send() 方法但未接收到响应3 已接收到部分响应4 已接收到全部的响应
同时xhr对象可以绑定一个 readystatechange 事件每当 readyState 属性发生改变都会触发该事件因此该事件在一次请求中会被多次触发
xhr.onreadystatechange function() {console.log(readyState属性发生改变了)
}所以我们可以在 readystatechange 事件中判断一下 readyState 属性是否为 4即是否已经接收所有的响应然后还可以再继续判断一下 status 属性看看状态码是否为 200当上述都成立了我们再去 responseText 属性 或 responseXML 属性中获取响应数据
xhr.onreadystatechange function() {// 判断是否已接收所有响应if(xhr.readyState 4) {// 判断状态码是否为200if(xhr.status 200) {console.log(xhr.responseText)}}
}3.3 ajax原生封装
//封装一个ajax请求
function ajax(options) {//创建XMLHttpRequest对象const xhr new XMLHttpRequest()//初始化参数的内容options options || {}options.type (options.type || GET).toUpperCase()options.dataType options.dataType || json// 处理参数let str let params options.data;for (let key in params) {str key params[key] }params str.slice(0, str.length - 1)//发送请求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)// post 请求需要设置请求头 模仿表单请求xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded)xhr.send(params)}//接收请求xhr.onreadystatechange function () {if (xhr.readyState 4) {let status xhr.statusif (status 200 status 300) {options.success options.success(xhr.responseText, xhr.responseXML)} else {options.fail options.fail(status)}}}
}3.3.1 触发GET请求 上面也讲解了Ajax请求的简单应用同时也是拿 get 请求来举得例子因此这里我就不多做说明唯一要讲的就是get请求所携带的数据是明文的大小只有4k左右而且它是写在URL的 ? 后面的例如这样 example.php?query4em0所以若是我们要在发送get请求时携带数据只需要在调用 open() 方法时将数据写在第二个参数的URL的 ? 后面即可 let btn document.querySelector(.btn)
btn.addEventListener(click, function () {ajax({type: get,dataType: json,data: { uid: 64dcd451a2d7172b77c03768, aid: 64db6361c57b44a4c47712af },url: http://localhost:3456/wyc/getUser,success: function (text, xml) {//请求成功后的回调函数console.log(JSON.parse(text))},fail: function (status) {请求失败后的回调函数console.log(status)}})
})接收结果
3.3.2 调用POST请求 发送post请求的过程几乎和get请求一样唯一不一样的是数据的传递。大家都知道post请求的数据是放在请求体中的因此我们需要调用xhr对象上的 setRequestHeader() 方法来模仿表单提交时的内容类型 该方法传入的参数比较固定代码如下 xhr.setRequestHeader(Content-Type, application/x-www-form-urlencoded)然后我们上面也说过send() 方法接收的一个参数是请求主体发送的数据所以我们的post请求要发送的数据就要作为该方法的参数代码如下
xhr.send(query4em0)完整post请求
let btn document.querySelector(.btn)
btn.addEventListener(click, function () {ajax({type: post,dataType: json,data: { uid: 64dcd451a2d7172b77c03768, aid: 64db6361c57b44a4c47712af },url: http://localhost:3456/wyc/attention,success: function (text, xml) {//请求成功后的回调函数console.log(JSON.parse(text))},fail: function (status) {请求失败后的回调函数console.log(status)}})
})请求结果
四、Ajax的约束
了解过同源策略以后我们来看看如何让Ajax不受同源策略的限制而成功发送请求。CORS跨域资源共享要求我们在发送请求时自定义一个HTTP头部与服务器进行沟通我们只需要设置一个名为 Origin 的头部值为当前页面的源信息协议、域名、端口例如 Origin : http://example.com 然后服务器需要设置一个名为 Access-Control-Allow-Origin 的响应头部其值为允许跨域访问的源信息若服务器设置的 Access-Control-Allow-Origin 与我们设置的 Origin 相同则表示服务器允许我们跨域请求其资源或者服务器可以将 Access-Control-Allow-Origin 值设为 *此时表示允许任何域向其发送请求并且不受同源策略的限制。
