4、原生javascript封装ajax————呱呱二号

//添加事件处理
function addEvent(obj, type, fn) {
  if (obj.addEventListener) {
    obj.addEventListener(type, fn, false);
  } else if (obj.attachEvent) {
    obj.attachEvent(‘on‘ + type, function () {
      fn.call(obj);
    });
  }
}
//移除事件处理
function removeEvent(obj, type, fn) {
  if (obj.removeEventListener) {
    obj.removeEventListener(type, fn, false);
  } else if (obj.detachEvent) {
    obj.detachEvent(‘on‘ + type, fn);
  }
}

//封装ajax
function createXHR(){
  if(XMLHttpRequest){
    return new XMLHttpRequest();
  }else{
    return new ActiveXObject(‘Microsoft.XMLHTTP‘);
  }
}

//名值对转换为字符串
function params(data){
  var arr = [];
  for(var i in data){
    arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i]));
  }
  return arr.join(‘&‘);
}

function ajax(obj){
  var xhr = createXHR();
  obj.method = obj.method.toUpperCase()
  obj.url = obj.url + ‘?rand=‘ + Math.random();
  obj.data = params(obj.data);
  if(obj.method === ‘GET‘){
    obj.url += obj.url.indexOf(‘?‘) == -1? ‘?‘ + obj.data : ‘&‘ + obj.data;
  }
  if(obj.async === true){
    xhr.onreadystatechange = function(){
      if(xhr.readyState == 4){
        callback();
      }
    };
  }
  xhr.open(obj.method,obj.url,obj.async);
  if(obj.method === "POST"){
    xhr.setRequestHeader(‘Content-Type‘,‘application/x-www-form-urlencoded‘);
    xhr.send(obj.data);
  }else{
    xhr.send(null);
  }
  if(obj.async === false){
    callback();
  }
  function callback(){
    if(xhr.status == 200){
      obj.success(xhr.responseText);
    }else{
      alert(‘获取数据错误!错误代码:‘ + xhr.status + ‘,错误信息:‘ . xhr.statusText);
    }
  }
}

//调用ajax
addEvent(document,‘click‘,function(){
ajax({
  method: ‘get‘,
  url: ‘demo.php‘,
  data: {
    ‘name‘: ‘lee‘
  },
  success: function(text){
    var result = JSON.parse(text);
  },
  async: true
  });
});

时间: 2024-10-05 03:19:34

4、原生javascript封装ajax————呱呱二号的相关文章

原生JavaScript 封装ajax

原生JavaScript 封装ajax   function myajax(options){ //新建一个局部对象 用来存放用户输入的各种参数 var opt={ type:options.type||"get",//获取用户输入的传输方法,可选,不写为get data:options.data||"",//获取用户输入的数据 dataType:options.dataType||"",//获取用户输入的数据类型比如json 或者xml url

javascript错误类型————呱呱二号

1.SyntaxError(语法错误) 解析代码时发生的语法错误 eg:var 1a; Uncaught SyntaxError: Unexpected number 2.ReferenceError(引用错误) a.引用了一个不存在的变量 eg: console.log(a); Uncaught ReferenceError: a is not defined b.将变量赋值给一个无法被赋值的对象 eg:console.log()= 1; Uncaught ReferenceError: In

javascript面向对象和原型————呱呱二号

面向对象 1.工厂模式 function createObject(name,age){ let obj = new Object(); this.name = name; this.age = age; return obj; } let objA = createObject('Tom',24); let objB = createObject('Jane',23); typeof ObjA; //Object typeof ObjB; //Object ObjA instanceof Ob

原生 JavaScript 实现 AJAX、JSONP

相信大多数前端开发者在需要与后端进行数据交互时,为了方便快捷,都会选择JQuery中封装的AJAX方法,但是有些时候,我们只需要JQuery的AJAX请求方法,而其他的功能用到的很少,这显然是没必要的. 其实,原生JavaScript实现AJAX并不难,这篇文章将会讲解如何实现简单的AJAX,还有跨域请求JSONP! 一.AJAX AJAX的核心是XMLHttpRequest. 一个完整的AJAX请求一般包括以下步骤: 实例化XMLHttpRequest对象 连接服务器 发送请求 接收响应数据

原生JS封装AJAX

今天我们来说说利用原生JS封装AJAX. jquery框架的AJAX方法确实很好用,但有时候我们写的页面需要引入多个JS插件,不一定哪个插件就会和jquery发生冲突,导致jquery用不了了.或者页面比较简单,不需要加重浏览器的负担,这时我们自己封装一个AJAX就是一个很好的办法. //将数据转换成 a=1&b=2格式;function json2url(json){   var arr = [];   //加随机数防止缓存;   json.t = Math.random();   for(v

原生javaScript完成Ajax请求

使用原生javaScript完成Ajax请求,首先应该创建一个对象XMLHttprequest,考虑到兼容低版本IE浏览器,使用ActiveXObject对象,代码入下: var request; if(windoe.XMLHtprequest){ request=new XMLHttprequest(); }else{ request = new ActiveXObject(); } function success(text) { var textarea = document.getEle

原生JS封装Ajax插件(同域&&jsonp跨域)

抛出一个问题,其实所谓的熟悉原生JS,怎样的程度才是熟悉呢? 最近都在做原生JS熟悉的练习... 用原生Js封装了一个Ajax插件,引入一般的项目,传传数据,感觉还是可行的...简单说说思路,如有不正确的地方,还望指正^_^ 一.Ajax核心,创建XHR对象 Ajax技术的核心是XMLHttpRequest对象(简称XHR),IE5是第一款引入XHR对象的浏览器,而IE5中的XHR对象是通过MSXML库中的一个ActiveX对象实现的,因此在IE中可能有3个版本,即MSXML2.XMLHttp.

JavaScript封装Ajax工具函数及jQuery中的ajax

封装ajax工具函数 /** * ITCAST WEB * Created by zhousg on 2016/5/24. */ /* * 1. 请求的类型 type get post * 2. 请求地址 url * 3. 是异步的还是同步的 async false true * 4. 请求内容的格式 contentType * 5. 传输的数据 data json对象 * * 6.响应成功处理函数 success function * 7.响应失败的处理函数 error function *

使用原生JavaScript发送ajax请求

关于使用原生JavaScript发送异步请求给服务端. 准备工作: 代码编写工具用的是sublime 服务端使用的是wamp搭的一个本地Apache服务器,主要用来返回数据 方便测试 步骤: 浏览器端 html标签绑定事件发送ajax请求----> 五步操作:1 创建异步对象XMLHttpRequest; 2 设置method url 3 发送请求给服务端 4 注册事件   5 在事件中获取服务端返回的数据,进行操作. 服务器端 1 获取请求数据 2 返回结果给浏览器 下面来一个小demo1做一