原生js封装ajax的get、post方法 |
您所在的位置：网站首页 › 原生ajax请求兼容写法错误 › 原生js封装ajax的get、post方法 |
|
公共方法提取：
function params(json){
let paramArr = []
for (let p in json) {
paramArr.push(p + '=' + json[p])
}
return paramArr.join('&')
}
HTTP请求过程
（1）建立TCP链接 （2）web浏览器向web服务器发送请求命令 （3）web浏览器发送请求头信息 （4）web服务器应答 （5）web服务器发送应答头信息 （6）web浏览器向浏览器发送数据 （7）web服务器关闭TCP链接 readyState 状态说明：表示请求/响应过程的当前活动阶段readyState有五种可能的值： 0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法。 1 (载入)：已经调用open() 方法，但尚未发送请求。 2 (载入完成)： 请求已经发送完成。 3 (交互)：可以接收到部分响应数据。 4 (完成)：已经接收到了全部数据，并且连接已经关闭。 (0)未初始化 此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备。值为0表示对象已经存在，否则浏览器会报错－－对象不存在。 (1)载入 此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数(method,url,true)完成对象状态的设置。并调用send()方法开始向服务端发送请求。值为1表示正在向服务端发送请求。 (2)载入完成 此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。值为2表示已经接收完全部响应数据。并为下一阶段对数据解析作好准备。 (3)交互 此阶段解析接收到的服务器端响应数据。即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody、responseText或responseXML属性存取的格式，为在客户端调用作好准备。状态3表示正在解析数据。 (4)完成 此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过XMLHttpRequest对象的相应属性取得数据。 概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段： 创建－初始化请求－发送请求－接收数据－解析数据－完成 xhr对象status属性：响应的HTTP状态status的值 1XX：信息类，表示收到web浏览器请求，正在进一步处理中 2XX：成功，表示用户请求被正确接收 3XX：重定向，表示请求没成功，需要客户采取进一步的动作（304表示请求的资源未修改，可以直接使用浏览器的缓存版本） 4XX：客户端错误，表示客户端提交的请求有错误，如：404 Not Found，意味着请求中所引用的文档不存在 5XX：服务器错误，表示服务器不能完成对请求的处理 ajax封装get /*ajax封装-get @param url:请求的路径 @param data:发送的数据,格式:{key1:value1,key2:value2} @param callback:回调函数,方便用户处理自己的数据,传递逻辑 */ function get(url, data, callback){ //创建异步对象 var xhr = null if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) {//IE6及以下 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //判断data是否为空 if(data){ url=url+'?'+params(data); } //设置请求行 xhr.open('get',url); //设置请求头(get可以省略) //注册回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ //调用传递的回调函数 callback(xhr.responseText); } } //发送请求主体 xhr.send(null); }调用方式： get('url',{key1:1,key2:3},function (data){ console.log(data); } }); ajax封装post /*ajax封装-post @param url:请求的路径 @param data:发送的数据,格式:{key1:value1,key2:value2} @param callback:回调函数,方便用户处理自己的数据,传递逻辑 */ function post(url, data, callback){ //创建异步对象 var xhr = null if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) {//IE6及以下 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //设置请求行 xhr.open('post',url); //设置请求头(post有数据发送才需要设置请求头) //判断是否有数据发送 if(data){ xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); } //注册回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ //调用传递的回调函数 callback(xhr.responseText); } } //发送请求主体 xhr.send(data); }调用方式： post('url',{key1:1,key2:3},function (data){ console.log(data); } }); ajax封装 /*ajax封装 @param option:传入一个对象 url:请求的路径 type:请求的不同类型get或post data:发送的数据,格式:{key1:value1,key2:value2} callback:回调函数,方便用户处理自己的数据,传递逻辑 */ function myAjax(option){ //创建异步对象 var xhr = null if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveXObject) {//IE6及以下 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //如果是get并且有数据 if(option.type=='get'&&option.data){ option.url=option.url+'?'+params(option.data); } //设置请求行 xhr.open(option.type,option.url); //设置请求头(post有数据发送才需要设置请求头) //判断是否有数据发送 if(option.type=='post'&&option.data){ xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); } //注册回调函数 xhr.onreadystatechange = function(){ if(xhr.readyState==4&&xhr.status==200){ //接收返回的数据类型 var type = xhr.getResponseHeader('Content-Type'); //json格式 if(type.indexOf('json')!=-1){ option.callback(JSON.parse(xhr.responseText)); } //xml格式 else if(type.indexOf('xml')!=-1){ option.callback(xhr.responseXML); } //普通格式 else{ option.callback(xhr.responseText); } } } //发送请求主体 //判断不同的请求类型 xhr.send(option.type=='post'?option.data:null); }调用方式： myAjax({ url:'url', type:'post', data:{key1:1,key2:3}, callback:function (data){ console.log(data); } }); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |