javascript中Ajax的简单封装
来源:互联网 发布:海典软件招聘 编辑:程序博客网 时间:2024/06/08 19:22
GET方式的在线:DEMO
POST方式在线:DEMO
我有几张阿里云幸运券分享给你,用券购买或者升级阿里云相应产品会有特惠惊喜哦!把想要买的产品的幸运券都领走吧!快下手,马上就要抢光了。
// 1、封裝AJAX函數function nativeAjax(option,success,error){ // 定义domain,方便环境切换 var domain='https://' + window.location.host + '/'; var url=domain+option.urlStr; var type=option.ajaxType; var data=option.ajaxData; var xhrRequest=null; if(window.XMLHttpRequest){ xhrRequest = new XMLHttpRequest(); } else { xhrRequest = new ActiveXObject('Microsoft.XMLHTTP') } var str=""; xhrRequest.open(type,url,true); if(type==="POST"&&data!=null){ xhrRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded;charset=utf-8"); for(var key in data){ str+='&'+key+'='+data[key]; }str=str.slice(1); }else{str=null;} xhrRequest.onreadystatechange=function(){ if(xhrRequest.readyState==4){ if(xhrRequest.status==200){ // 1.1、格式化返回的数据 var responseData=JSON.parse(xhrRequest.responseText); // 1.2、这里操作数据-------- success(responseData); }else{ // 1.3、没成功返回HTTP状态码 error(xhrRequest.status); } } } xhrRequest.send(str);}// 2、POST:定義請求參數var postOption={ ajaxType:"POST", urlStr:"v2/html/broke/get_broke_ranked_info", ajaxData:{ "HTTP_USER_TOKEN":token, "HTTP_USER_UID":pfid, "anchor_pfid":anchor_pfid, "broke_pfid":pfid, "date":date }}// 3、调用AJAXnativeAjax(postOption,function(data){ // 3.1、请求成功回调 console.log(data);},function(error){ // 3.2、请求失败回调,返回HTTP状态码 console.log(error);});//4、GET:定义请求参数var getOption={ ajaxType:"GET", urlStr:"v2/html/broke/get_broke_ranked_info", ajaxData:null }Ajax(getOption,function(data){ // 成功函数 console.log(data);},function(error){ // 失败返回HTTP状态码 console.log(error);});// 使用说明// 一、option必须option={ //1、ajaxType必须:"GET"或者"POST" ajaxType:"", //2、urlStr必须:"string类型" urlStr:"", //3、必须:POST时候为object{key:value},GET的时候直接为:null ajaxData:null}// 二、success请求成功回调必须// 三:error请求失败回调必须
其他:
关于xhrRequest.readyState请参考MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest/readyState
了解更多http://click.aliyun.com/m/34192/
阅读全文
0 0
- javascript中Ajax的简单封装
- 自己写的封装好的简单的AJAX--javascript
- 简单的Ajax封装
- 简单的ajax封装
- Ajax的简单封装
- javascript中Ajax的简单应用
- javascript封装的ajax函数库
- ajax简单的封装一下
- 自己写的封装好的简单的AJAX--javascript (改良版)
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- JavaScript封装Ajax(类JQuery中$.ajax()方法)
- JavaScript 封装Ajax传递的数据
- JavaScript自己封装ajax的js
- JavaScript - ajax请求的初步封装
- 封装一个简单的同步Ajax函数
- 封装一个简单的同步Ajax函数
- 封装一个简单的Ajax函数
- 原生Ajax的多种简单封装
- Java线程(六):Executor、ExecutorService
- Ruby中map,reduce,reject,select,collect,each使用介绍
- 前端起步01-页面元素的初始化
- Android APK反编译、重打包、重签名
- 透彻分析C/C++中memset函数
- javascript中Ajax的简单封装
- php解析html类库simple_html_dom(爬虫相关)
- react-native 使用Navigation跳转界面
- Faster RCNN代码理解(Python)
- 将Java源码打成jar包
- java 多线程学习
- QT5 动态链接库的创建和使用(QT自己做动态库给自己使用)
- pdo连接数据库
- Object Pascal 关键字