码迷,mamicode.com
首页 > Web开发 > 详细

ajax原生js封装

时间:2020-07-19 15:47:57      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:post   utf-8   data   rip   The   异步   注释   script   ati   

不带注释的

<script>
function ajax(json) { json.type = json.type ? json.type : ‘get‘; json.async = json.async == false ? false : true; json.contentType = json.contentType ? json.contentType : ‘application/x-www-form-urlencoded‘; json.data = json.data ? json.data : ‘‘; var ajax = new XMLHttpRequest(); if (json.type.toLowerCase() == ‘post‘) { ajax.open(‘post‘, json.url, json.async); ajax.setRequestHeader(‘Content-type‘, json.contentType + ‘;charset=utf-8‘); ajax.send(json.data); } else { ajax.open(‘get‘, json.url + ‘?‘ + json.data, json.async); ajax.send(); } ajax.onreadystatechange = function () { if (ajax.readyState == 4 && ajax.status == 200) { json.success(ajax.response); } }
}

</script>

带注释的

<script>
// ajax封装 /* 请求方式: type 非必传,默认get 请求地址: url 必传 是否异步: async 非必传 设置头请求: contentType 非必传 请求数据: data 非必传 */ function ajax(json) { // 如果没传类型,则默认get方式 json.type = json.type ? json.type : ‘get‘; // 是否异步传送 布尔值 json.async = json.async == false ? false : true; //设置头请求 get非必须 post方式必须设置 json.contentType = json.contentType ? json.contentType : ‘application/x-www-form-urlencoded‘; //传送数据 json.data = json.data ? json.data : ‘‘; //创建异步对象 var ajax = new XMLHttpRequest(); // 判断是get还是post请求 //如果是post请求 if (json.type.toLowerCase() == ‘post‘) { //设置请求类型、请求地址、是否异步 ajax.open(‘post‘, json.url, json.async); //post请求一定要在send前设置请求头才行,不然会报错 + 编码方式 ajax.setRequestHeader(‘Content-type‘, json.contentType + ‘;charset=utf-8‘); //发送请求,数据作为参数传入 ajax.send(json.data); } else {//不是post就为get(第一步设置的) //设置请求类型、请求地址(可以带参数)、请求数据、是否异步 ajax.open(‘get‘, json.url + ‘?‘ + json.data, json.async); //发送请求 ajax.send(); } //注册事件 onreadystatechange状态改变就会调用 ajax.onreadystatechange = function () { //判断服务器是否正确响应 if (ajax.readyState == 4 && ajax.status == 200) { //用success作为成功后的回调函数 json.success(ajax.response); } } }
</script>

 

ajax原生js封装

标签:post   utf-8   data   rip   The   异步   注释   script   ati   

原文地址:https://www.cnblogs.com/husanr/p/13339372.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!