JS 原生 AJax
防止IE下不支持 Ajax
<button id="btn1">请求</button> <button id="btn2">请求</button><script>$("#btn2").click(function () {$.ajax({type: "Get",url: '/Home/ResponseAjax',data: { name: "super", age: 20 },success: function (res) {console.info(res);}})})$("#btn1").click(function () {ajax({url: "./ResponseAjax", //请求地址type: "GET", //请求方式data: { name: "super", age: 20 }, //请求参数dataType: "json",success: function (response, xml) {// 此处放成功后执行的代码 console.info(response);console.info(xml);},fail: function (status) {// 此处放失败后执行的代码 }});})function ajax(options) {options = options || {};options.type = (options.type || "GET").toUpperCase();options.dataType = options.dataType || "json";var params = formatParams(options.data);//创建 - 非IE6 - 第一步if (window.XMLHttpRequest) {var xhr = new XMLHttpRequest();} else { //IE6及其以下版本浏览器var xhr = new ActiveXObject('Microsoft.XMLHTTP');}//接收 - 第三步xhr.onreadystatechange = function () {if (xhr.readyState == 4) {var status = xhr.status;if (status >= 200 && status < 300) {options.success && options.success(xhr.responseText, xhr.responseXML);} else {options.fail && options.fail(status);}}}//连接 和 发送 - 第二步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);}}//格式化参数 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("&");} </script>
转载于:https://www.cnblogs.com/Jacob-Wu/p/6632718.html
JS 原生 AJax相关推荐
- JS原生Ajax和jQuery的Ajax与代码示例
JS原生Ajax和jQuery的Ajax [学习目标] 1,了解JS原生Ajax原理 2,掌握json数据格式 掌握json数据格式方式 掌握json的解析方式 3,掌握jQuery中的Ajax封装 ...
- js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
- js原生ajax写法
博主在大二做数据库课设时,接触的js. 边学边做,当时还没接触ajax,所以在遇到每次请求地址都会刷新这个问题时, 博主干了你们绝对想不到的事:在页面里用了很多"隐形"的frame ...
- JS原生Ajax的使用
1.XHR对象,原生版的Ajax xhr(俗称小黄人,O(∩_∩)O~),全名XMLHttpRequest ajax的onload方法是数据接收完毕后执行的函数. 2.FormData,模拟表单对象, ...
- js原生ajax实例详解
<!DOCTYPE HTML> <html><head><title>please enter your title</title>< ...
- js原生ajax与jquery的ajax的用法区别
什么是ajax和原理? AJAX 是一种用于创建快速动态网页的技术. 通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据 XMLHttpRequest对象的基本属性: onre ...
- 原生JS写Ajax的请求函数
本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体的实现代码和详细的解释,希望对你有所帮助. 一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面: aj ...
- .ajax get 写法,原生Ajax写法(GET)
ajax的GET提交方式的原生代码: var xhr = null; if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else if(w ...
- 原生js实现Ajax,JSONP
Ajax内部的几个执行步骤 创建XMLHttpRequest对象(new XMLHttpRequest()) 设置请求头(setRequestHeader) 连接服务器(open()) 设置回调(on ...
最新文章
- 查找手机型号云服务器,查找手机型号云服务器
- 利用jsoncpp将json字符串转换为Vector
- leetcode 64. 最小路径和(递归 / 动态规划解法图解)(Java版)
- 38Exchange 2010升级到Exchange 2013-安装第二台CAS2013
- 得意而忘乎形:谈葛水平的水墨画
- LeetCode 455. 分发饼干(贪心)
- 三维数据平滑处理_黑白象片的密度信息 卫星数据处理 遥感制图 三维建模 善图科技...
- 【数据分析】基于matlab GUI kmeans聚类分组系统【含Matlab源码 510期】
- proc文件系统、sysfs文件系统、kobject操作
- Chromedriver和Chrome浏览器版本
- round()函数的用法
- 几何公差基础知识之平行度
- 【帝国CMS】灵动标签调用标题图片没有图片时显示默认图片
- 计算机关机界面卡住,Win7关机缓慢,关机后一直卡在正在关机界面
- OSChina 周五乱弹 ——妹子一不小心就被拖到小巷子里
- CTF之Bugku 秋名山老司机+python脚本代码解析
- vb6使用WinRAR压缩和解压文件
- 如何获取vs code中插件Waka Time的API key
- python windows curses库安装教程
- 程序员的悲哀--动车追尾
热门文章
- 关于杨振宁的一些观点的感想
- kafka的offset笔记
- xxxx is not found in PojoType<Order, fields = [amount: Integer, product: String, user: Long]>
- superset设置自动刷新
- 数据仓库设计方案(转载)
- windows下面sublime无法粘贴复制的问题解决(转)
- NLPIR RuntimeError: NLPIR function 'NLPIR_Init' failed 解决方案
- 把汇集多个json文件的txt进行分割,然后批量修改文件名后缀
- GL_RGBA和GL_RGB的差别
- 5.2 最优近似解 $\mathbf{\hat{x}} = A^{-1}_L\mathbf{b}$ 是最小二乘解