封装ajax请求

最新推荐文章于 2024-01-31 20:28:38 发布

Jimmy雪雪

最新推荐文章于 2024-01-31 20:28:38 发布

阅读量539

点赞数

文章标签： node.js javascript

本文链接：https://blog.csdn.net/weixin_46240162/article/details/105956132

版权

封装ajax请求

源码在：https://gitee.com/jimmyxuexue/handwritten_jquery_source/tree/master/%E6%89%8B%E5%86%99%E6%BA%90%E7%A0%81/AJAX
ajax技术是属于前端的技术，前端程序员必须要会的一个操作，现在有很多很好用的ajax方法库，但是也必须要学会ajax的原理
发送ajax请求主要是分为5步，这5步只要了解了，ajax基本也就会使用了。

创建一个异步对象 – XMLHttpRequest()对象
为了兼容版本较低IE浏览器和其他的低版本浏览器，创建对象也是分情况来创建，因为IE老版本浏览器（IE5,IE6）不支持XMLHttpReques()t这个异步对象，需要使用ActiveXObject("Microsoft.XMLHTTP")。
设置请求方式和请求地址
xml.open(请求方式,请求地址,true)这里的请求方式get或post请求，且必须是是大写的字母，地址就是正常的地址，最后面的那个布尔值表示的是是否发起异步请求，因为ajax的出现就是为了发送异步请求的，所以最后面的Negev布尔值永远都是true。实例代码:xml.open('GET','http://127.0.0.1:8081',true)。
发送请求
xml.open()，当发送GET请求的时候，open方法不需要传递参数，当发送的是post请求的时候，这个send()方法就需要添加上传递的内容。实例代码：xml.open({JSON.stringify(name:'Jimmy',age:22}))。
监听状态的变化
使用异步对象的onreadystatechange属性来判断请求状态，实例代码:xml.onreadystatechange = ()=>{}来进行对不同状态下的处理
readyState属性，表示的是连接状态的属性值，有1-4，其中当属性值为4时，代表的是连接成功。
status属性，表示的是服务器反馈的状态码，200-300之间和一个特殊的304表示的都是请求成功，其中304表示的是使用缓存返回值，这个状态吗也是尤为的重要，一般500的状态码表示的是服务器错误。
处理的返回结果
当以上的一些列判断都成功时，说明已经获取到了服务器的值，我们可以使用responseText属性来接收我们从服务器上获取的值。

GET请求

get请求也是可以传值的，get请求传的值一般都是直接在url中能够体现，例如:http://127.0.0.1:8080/name?name=jimmy&age=22,这种类型的就是get传值，ajax发送get请求的时候按照上面的步骤正常的操作就行了。

POST请求

利用ajax发送post请求时如果不传值，则按照如上的5步操作就行，只是因为post请求传递参数时数据实在请求体中的，所以需要在open()方法和send()方法之间多加一条语句xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"),之后send()方法中传递参数例如xml.open({JSON.stringify(name:'Jimmy',age:22}))。

跨域问题

在前后端之间的数据交互上，经常会发生跨域问题，原因时前后端之间遵循的原则是同源原则，意思是两个点之间必须是在同一个源下，也就是说协议，域名，端口必须都保持一致的情况下，两者之间才可以进行交互，两者之间只要有一点不一样，就会发生跨域问题。
为了避开这个问题，现在常常有三种解决方案，分别是：

jsonp结局跨域：jsonp请求的实质是利用我们前端的script标签进行访问数据，script标签是不会触发跨域的，这个方法使用的很多，但是步推荐使用。
前端j解决跨域：创建proxy代理的方式解决跨域，这个方法只需要处理前端，后端的代码可以不动。
后端解决跨域：在node.js中通过类似使用中间键的概念，在路由之前对本身进行处理，因为我demo中使用的是原生的http模块来写的，所以我展示一个http模块解决跨域的方法。

细节知识点

url中是不能够传递中文的，可能我们在浏览器写的时候可以写中文，是因为浏览器默认会将所有文字转码，在JS中也是很容易就可以操作，JS自带两个个工具方法encodeURI()和decodeURI()两个方法是分别对中文进行转码和解码的操作
当想要手动的终止请求，可以使用xml.absort()方法其中xml就是我们创建的异步对象。
做为程序员，始终都要考虑到用户的体验，当用户因为网络的原因，访问时间过长的时候，我们就应该终止访问的进行，这点就是我们封装自己的ajax请求中需要做的事情了。