原生js实现Ajax的原理
2020-06-30 16:18
78 查看
Ajax(Asynchronous JavaScript and XML)表示异步的js与xml。有别于传统web的同步开发方式。
原理:通过XMLHttpRequest对象向服务器发送异步请求,从服务器获得数据,然后使用js操作DOM更新数据。
该对象是ajax的核心机制,他是在IE5中首先引入的,是一种支持异步请求的技术。
通过ajax可以及时的向服务器提出请求和处理响应,而不阻塞用户,达到无刷新更新部分页面的效果。
XMLHttpRequest这个对象的属性有:
onreadystatechange 每次状态改变所触发事件的事件处理程序;
responseText 从服务器进程返回数据的字符串形式;
responseXML 从服务器进程返回的DOM兼容的文档数据对象;
status 从服务器返回的数字代码,常见的200(客户端请求成功,已就绪)和404(请求资源不存在)
statusText 伴随状态码的字符串信息 (eg:200 OK)
readyState 对象状态值
0(未初始化状态)对象已建立或已被abort()方法重置,尚未调用open方法。
1(初始化状态)open()方法已经调用,但是send()方法为调用。请求还没有被发送。
2(发送数据)send()方法法以调用,HTTP请求已发送到Web服务器。未接收到响应。
3(数据传送中)所有响应头部都已经接收到。响应体开始接受但未完成。
4(完成加载)HTTP响应已经完全接收。
(拓展:封装ajax?) ajax({ url: "./TestXHR.aspx", //请求地址 type: "POST", //请求方式 data: { name: "super", age: 20 }, //请求参数 dataType: "json", success: function (response, xml) { // 此处放成功后执行的代码 }, error: function (status) { // 此处放失败后执行的代码 } }); function ajax(options) { options = options || {}; options.type = (options.type || "GET").toUpperCase(); options.dataType = options.dataType || "json"; var params = formatParams(options.data); var xhr; //创建 - 第一步 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if(window.ActiveObject) { //IE6及以下 xhr = new ActiveXObject('Microsoft.XMLHTTP'); } //连接 和 发送 - 第二步 if (options.type == "GET") { xhr.open("GET", options.url + "?" + params, true); xhr.send(null); } else if (options.type == "POST") { xhr.open("POST", options.url, true); //设置表单提交时的内容类型 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); xhr.send(params); } //接收 - 第三步 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var status = xhr.status; if (status >= 200 && status < 300 || status == 304) { options.success && options.success(xhr.responseText, xhr.responseXML); } else { options.error && options.error(status); } } } } //格式化参数 function formatParams(data) { var arr = []; for (var name in data) { arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name])); } arr.push(("v=" + Math.random()).replace(".")); return arr.join("&"); } (拓展:什么是jsonp和pjax?) Jsonp:(JSON with Padding/json的补充)是一种跨域的请求方式。 原理:利用script标签可以跨域请求的特点,由其src属性发送请求到服务器,服务器返回js代码(类似于callback(data),其中data就是传回的数据,通过网页端js函数callback引用),这种方式和通过script标签引用外部文件的原理是一样的。 Jsonp由两部分组成:回调函数和数据,回调函数一般是由网页端控制,将回调函数名作为参数发往服务器端,服务器端把该函数和数据拼成字符串返回。
相关文章推荐
- 原生JS实现AJAX及其原理
- 原生js实现Ajax原理
- Ajax原理及用原生js实现Ajax应用
- 原生JS实现AJAX、JSONP及DOM加载完成事件
- 原生js实现Ajax实例讲解
- Ajax原理以及实现(js实现以及jquery实现)
- JS与Ajax实现异步局部刷新的原理
- 原生js实现AJAX(二)
- 原生JS实现ajax图片上传功能(后台java)
- 原生js实现ajax
- js原生Ajax 的封装和原理
- 原生js实现AJAX(一)
- 基于原生JS实现仿JQ中的Ajax
- Javascript 复盘深入解读之—用原生js实现ajax封装
- 原生js实现ajax调用接口功能
- 原生JS实现Ajax跨域请求flask响应内容
- js原生Ajax的封装和原理详解
- js瀑布流 原理实现揭秘 javascript 原生实现
- 原生JS实现Ajax的跨域请求
- Ajax原理-原生js的XMLHttpRequest对象意义