实例如下： /* 封装ajax函数* @param {string}opt.type http连接的方式，包括POST和GET两种方式* @param {string}opt.url 发送请求的url* @param {boolean}opt.async 是否为异步请求，true为异步的，false为同步的* @param {object}opt.data 发送的参数，格式为对象类型* @param {function}opt.success ajax发送并接收成功调用的回调函数*/function ajax(opt) {opt = opt || {};opt.method = opt.method.toUpperCase() || POST;opt...
原生js中ajax访问的实例详解 form表单中 登录名: 失去光标即触发事件 function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } function infoCheck(){var ename=...
ajax 是用来处理前后端交互的技术，可以改善用户体验，其本质是 XMLHttpRequest，异步访问服务器并发送请求数据，服务器返回响应的数据，以页面无刷新的效果改变页面中的局部内容 同步：任务一个一个的执行，只有前面的任务执行完才会执行下一个任务，如果前面的任务是耗时操作，则需要一直等待 异步：多条任务并发执行，也就是一个任务的开启，不需要等待其他任务执行结束，效率较高 ajax的语言载体是JavaScript，最大的特点是页面...
实例如下： // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器return new XMLHttpRequest();}else if(typeof ActiveXObject != "undefined"){ // IE6浏览器var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",];for(var i = 0; i < version.length; i++){try{return new ActiveXObject(version[i]);}catch(e){//跳过}}}else{throw...
前言 众所周知，jquery在我们日常开发中的使用频率非常高，与js相比，我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下...
前言 与js相比，jquery为我们省去了冗长的获取元素的代码，不用考虑一些麻烦的兼容问题，更加方便的动画实现，以及更加方便的方法调用让我们觉得jquery真是越用越舒服。但是jquery说到底还是对js的封装，我们不光要用的舒服还要深入理解其中的原理，这样才能更好的使用它。 首先我们封装的函数为了能实现可传入无限多个参数，在使用我们即将封装的函数时，需要使用对象进行传参，形式如下： //data作为参数传入我们下面封装的函数 ...
上一篇文章写到原生js取代jquery的一些常用函数：原生js仿jquery一些常用方法，那么，ajax如何实现呢？如下是一个比较完整的ajax() function ajax(){ var ajaxData = { type:arguments[0].type || "GET", url:arguments[0].url || "", async:arguments[0].async || "true", data:arguments[0].data || null, dataType:arguments[0].dataType || "text", contentType:arguments[0].contentType || "application/x-www-form-urlencod...
首先，我们需要xhr对象。这对我们来说不难，封装成一个函数。 var createAjax = function() { var xhr = null; try { //IE系列浏览器 xhr = new ActiveXObject("microsoft.xmlhttp");} catch (e1) { try { //非IE浏览器 xhr = new XMLHttpRequest();} catch (e2) { window.alert("您的浏览器不支持ajax，请更换！");}} return xhr; }; 然后，我们来写核心函数。 var ajax = function(conf) { // 初始化 //type参数,可选 var type ...
由于项目中需要在提交ajax前设置header信息，jquery的ajax实现不了，我们自己封装几个常用的ajax方法。jQuery的ajax普通封装var ajaxFn = function(uri, data, cb) { $.ajax({ url: uri, type: POST, dataType: json, data: data, }) .done(cb) .fail(function() { console.log("error"); }) .always(function() { console.log("complete"); }); } 原生ajax封装，设置header，传jsonvar ajaxHdFn = function(uri, data, cb) { var ...
javascript/js的ajax的GET请求代码如下所示：<script type="text/javascript"> /* 创建 XMLHttpRequest 对象 */ var xmlHttp; function GetXmlHttpObject(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); }else{// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp; } // -----------ajax方法-----------// function ...
讲到ajax这个东西，我们要知道两个对象XMLHTTPRequest和ActiveXObject ，提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。XMLHTTPRequest基本上算是标准化了，兼容大部分浏览器ActiveXObject这玩儿意儿是微软的东西，所以是为了兼容IE版本，我们用的只是它的xmlHTTP功能。 为了功能的明确和清晰，我们把...
抛出一个问题，其实所谓的熟悉原生JS，怎样的程度才是熟悉呢？ 最近都在做原生JS熟悉的练习。。。 用原生Js封装了一个Ajax插件，引入一般的项目，传传数据，感觉还是可行的。。。简单说说思路，如有不正确的地方，还望指正^_^ 一、Ajax核心，创建XHR对象 Ajax技术的核心是XMLHttpRequest对象（简称XHR），IE5是第一款引入XHR对象的浏览器，而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的，因此在IE中可能有3个版本，即MS...
Ajax大家每天都在用，jquery库对Ajax的封装也很完善、很好用，下面我们看一下它的内部原理，并手动封装一个自己的Ajax库。一、原理原生Ajax的发送需要四步：1) 创建Ajax对象: XMLHttpRequest2) 设置请求参数: open(请求参数[get/post],url地址, 是否异步[true/false] )3) 设置回调函数: onreadystateChange 用于处理返回的数据4) 发送请求: send()//TODO step1: 创建ajax对象 var xhr = new XMLHttpRequest(); //TODO step2: 设置请...
一.首先看JQuery提供的Ajax方法： $.ajax({url: ,type: ,dataType: ,data: {},success: function(){},error: function(){}}) 二.原生js实现Ajax方法： var Ajax={get: function(url, fn) {// XMLHttpRequest对象用于在后台与服务器交换数据 var xhr = new XMLHttpRequest(); xhr.open(GET, url, true);xhr.onreadystatechange = function() {// readyState == 4说明请求已完成if (xhr.readyState == 4 && xhr.stat...
get请求 let xhr = new XMLHttpRequest(); //构造函数没有参数的情况,括号可以省略 xhr.open('GET', 'http://www.xxx/api/xxx') //open函数，指定请求方式和URL地址，如果请求方式是get,传递参数需要把参数列表用?拼接到url地址后面xhr.send()//send函数，发起Ajax请求，get方法可以写null也可以省略xhr.onreadystatechange = function() {// 监听xhr对象的请求状态 readyState 与服务器响应的状态 statusif (xhr.readyState === 4...