封装ajax请求

Java小猿。

于 2024-03-30 11:11:10 发布

阅读量819

点赞数 12

分类专栏：程序员文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/H1767410/article/details/137168572

版权

701 篇文章 0 订阅

订阅专栏

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

利用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请求中需要做的事情了。