摘要:内部怎么实现的使用一个文件来模拟服务器返回,代码如下请求的发送实际上我们都通过浏览器的实现,使用,不考虑的兼容,我们实现一个简单的请求如下。
ajax ajax内部怎么实现的?
使用一个php文件来模拟服务器返回,php代码如下
请求的发送实际上我们都通过浏览器的XMLHttpRequest实现,ie6使用ActiveXObject,不考虑IE6的兼容,我们实现一个简单的xhr请求如下。
xhr.readyState状态值
0:刚刚创建初始状态 1:已连接 2:已发送 3:已接受-头(32k上限) 4:已接受-body(1G上限)http状态码
1XX 消息 2XX 成功 3XX 重定向 301 永久重定向——浏览器永远不会再次请求老的地址 302 临时重定向——浏览器下次还会请求老地址 304 (not modified)重定向到缓存请求——因此304也是成功 4XX 请求错误,客户端错误 5XX 服务端错误 6XX 扩展错误码
因此可以通过2XX和304的状态码判断请求成功。
// 接收;4代表结束 xhr.onreadystatechange = function(){ if (xhr.readyState ==4){ if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){ alert("成功:"+xhr.responseText); console.log(xhr); } else { alert("失败"); } } };xhr返回值
xhr.responseText 文本数据
xhr.responseXML XML数据(已经不常用)
xml数据是不固定标签组成的数据,xml数据更加占空间,例如:
xiaoyezi 18 front engineer
json格式:
let json={name:"xiaoyezi",age:18,job:"front engineer"};XMLHttpRequest发送POST请求
按照我们上面代码的思路,post请求的写法推导出来应该是如下写法,实际上如下写法并不行。
// 连接,true代表异步,false代表同步;浏览器对异步的xhr会报错 xhr.open("post","../server/a.php",true,); // 发送;send里面是body,post需要发送 xhr.send("a=12&b=5");
对比form的post提交方式,我们可以看到,Request Headers里面有条设置和form提交的不同:
Content-Type: text/plain;charset=UTF-8 form提交:Content-Type: application/x-www-form-urlencoded
需要增加setRequestHeader的设置,再send请求的body内容,请求成功。
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("a=12&b=5");
text/plain 文本 application/x-www-form-urlencoded &&&连接的方式,eg:a=12&b=5 multippart/form-data 定界符分割各个数据(文件上传)实现简单的自定义ajax
function ajax(options){ // 数据处理 options = options || {}; options.data = options.data || {}; options.type = options.type || "get"; options.dataType = options.dataType || "text"; //解析数据 let arr = []; for (let name in options.data) { arr.push(`${name}=${encodeURIComponent(options.data[name])}`); } let dataStr = arr.join("&"); // 不兼容ie6 let xhr=new XMLHttpRequest(); // 连接,true代表异步,false代表同步;浏览器对异步的xhr会报错 if (options.type == "get"){ xhr.open("get",options.url + "?" + dataStr,true); xhr.send(); } else { xhr.open("post",options.url,true,); // 发送;send里面是body,post需要发送Content-Type xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send(dataStr); } // 接收;4代表结束 xhr.onreadystatechange = function(){ if (xhr.readyState ==4){ if ((xhr.status>=200&&xhr.status<300)||xhr.status==304){ let result = xhr.responseText; switch (options.dataType){ case "text": break; case "json": if (window.JSON && JSON.parse){ result = JSON.parse(result); } else { result = eval("("+result+")"); } break; case "xml": result = xhr.XMLHttpRequest; break; default: break; } options.success && options.success(result); } else { options.error && options.error("error"); } } }; }
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/95610.html
摘要:示例运行函数弹出弹出函数接收参数,返回值。其中,返回一个对象,是的返回值,代表函数是否执行完成。 ES6特性介绍(下) ES6新的标准,新的语法特征:1、变量/赋值2、函数3、数组/json4、字符串5、面向对象6、Promise7、generator8、ES7:async/await 《【Web全栈课程二】ES6特性介绍(上)》见:https://segmentfault.com/a...
摘要:借鉴图片仅用于学习分享,请尊重原创作者,勿用于商用。这其中最关键的一步就是从服务器获得请求数据。基本步骤创建对象也就是创建一个异步调用对象。创建一个新的请求并指定该请求的方法及验证信息。设置响应请求状态变化的函数。使用和实现局部刷新。 欢迎进入JAVA基础课程 博客地址:https://blog.csdn.net/houjiyu...本系列文章将主要针对JAVA一些基础知识点进行讲解...
摘要:借鉴图片仅用于学习分享,请尊重原创作者,勿用于商用。这其中最关键的一步就是从服务器获得请求数据。基本步骤创建对象也就是创建一个异步调用对象。创建一个新的请求并指定该请求的方法及验证信息。设置响应请求状态变化的函数。使用和实现局部刷新。 欢迎进入JAVA基础课程 博客地址:https://blog.csdn.net/houjiyu...本系列文章将主要针对JAVA一些基础知识点进行讲解...
阅读 3395·2021-11-19 09:40
阅读 1276·2021-10-11 11:07
阅读 4788·2021-09-22 15:07
阅读 2862·2021-09-02 15:15
阅读 1939·2019-08-30 15:55
阅读 500·2019-08-30 15:43
阅读 849·2019-08-30 11:13
阅读 1419·2019-08-29 15:36