javascript原生ajax写法分享


Posted in Javascript onApril 10, 2016

ajax:一种请求数据的方式,不需要刷新整个页面;
ajax的技术核心是 XMLHttpRequest 对象;
ajax 请求过程:创建 XMLHttpRequest 对象、连接服务器、发送请求、接收响应数据;

/**
 * 得到ajax对象
 */
function getajaxHttp() {
  var xmlHttp;
  try {
    //chrome, Firefox, Opera 8.0+, Safari
    xmlHttp = new XMLHttpRequest();
    } catch (e) {
      // Internet Explorer
      try {
        //IE5,6
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
      } catch (e) {
      try {
        //IE7以上
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (e) {
        alert("您的浏览器不支持AJAX!");
        return false;
      }
    }
  }
  return xmlHttp;
}
/**
 * 发送ajax请求
 * url--url
 * methodtype(post/get)
 * con (true(异步)|false(同步))
 * parameter(参数)
 * functionName(回调方法名,不需要引号,这里只有成功的时候才调用)
 * (注意:这方法有二个参数,一个就是xmlhttp,一个就是要处理的对象)
 * obj需要到回调方法中处理的对象
 */
function ajaxrequest(url,methodtype,con,parameter,functionName,obj){
  var xmlhttp=getajaxHttp();
  xmlhttp.onreadystatechange=function(){
     
    // readyState值说明 
    // 0,初始化,XHR对象已经创建,还未执行open 
    // 1,载入,已经调用open方法,但是还没发送请求 
    // 2,载入完成,请求已经发送完成 
    // 3,交互,可以接收到部分数据 
  
    // status值说明 
    // 200:成功 
    // 404:没有发现文件、查询或URl 
    // 500:服务器产生内部错误 
 
    if(xmlhttp.readyState==4&& XHR.status == 200){
      //HTTP响应已经完全接收才调用
      functionName(xmlhttp,obj);
    }
  };
  xmlhttp.open(methodtype,url,con);
  xmlhttp.send(parameter);
}
//这就是参数
function createxml(){
  var xml="<user><userid>asdfasdfasdf<\/userid><\/user>";//"\/"这不是大写V而是转义是左斜杠和右斜杠
  return xml;
}
//这就是参数
function createjson(){
  var json={id:0,username:"好人"};
  return json;
}
function c(){
  alert("");
}

//测试

ajaxrequest("http://www.baidu.com","post",true,createxml(),c,document);

我们再来看一个示例

ajax({
    url: "./TestXHR.aspx",       //请求地址
    type: "POST",            //请求方式
    data: { name: "super", age: 20 },    //请求参数
    dataType: "json",
    success: function (response, 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("&");
  }

我们来看看原理

1、创建

1.1、IE7及其以上版本中支持原生的 XHR 对象,因此可以直接用: var oAjax = new XMLHttpRequest();

1.2、IE6及其之前的版本中,XHR对象是通过MSXML库中的一个ActiveX对象实现的。有的书中细化了IE中此类对象的三种不同版本,即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0 和 MSXML2.XMLHttp.6.0;个人感觉太麻烦,可以直接使用下面的语句创建: var oAjax=new ActiveXObject('Microsoft.XMLHTTP');

2、连接和发送

2.1、open()函数的三个参数:请求方式、请求地址、是否异步请求(同步请求的情况极少,至今还没用到过);

2.2、GET 请求方式是通过URL参数将数据提交到服务器的,POST则是通过将数据作为 send 的参数提交到服务器;

2.3、POST 请求中,在发送数据之前,要设置表单提交的内容类型;

2.4、提交到服务器的参数必须经过 encodeURIComponent() 方法进行编码,实际上在参数列表”key=value”的形式中,key 和 value 都需要进行编码,因为会包含特殊字符。每次请求的时候都会在参数列表中拼入一个 “v=xx” 的字符串,这样是为了拒绝缓存,每次都直接请求到服务器上。

encodeURI() :用于整个 URI 的编码,不会对本身属于 URI 的特殊字符进行编码,如冒号、正斜杠、问号和井号;其对应的解码函数 decodeURI();
encodeURIComponent() :用于对 URI 中的某一部分进行编码,会对它发现的任何非标准字符进行编码;其对应的解码函数 decodeURIComponent();

3、接收

3.1、接收到响应后,响应的数据会自动填充XHR对象,相关属性如下
responseText:响应返回的主体内容,为字符串类型;
responseXML:如果响应的内容类型是 "text/xml" 或 "application/xml",这个属性中将保存着相应的xml 数据,是 XML 对应的 document 类型;
status:响应的HTTP状态码;
statusText:HTTP状态的说明;

3.2、XHR对象的readyState属性表示请求/响应过程的当前活动阶段,这个属性的值如下
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据;

只要 readyState 的值变化,就会调用 readystatechange 事件,(其实为了逻辑上通顺,可以把readystatechange放到send之后,因为send时请求服务器,会进行网络通信,需要时间,在send之后指定readystatechange事件处理程序也是可以的,我一般都是这样用,但为了规范和跨浏览器兼容性,还是在open之前进行指定吧)。

3.3、在readystatechange事件中,先判断响应是否接收完成,然后判断服务器是否成功处理请求,xhr.status 是状态码,状态码以2开头的都是成功,304表示从缓存中获取,上面的代码在每次请求的时候都加入了随机数,所以不会从缓存中取值,故该状态不需判断。

4、ajax请求是不能跨域的!

Javascript 相关文章推荐
一个JQuery操作Table的代码分享
Mar 30 Javascript
javascript实现TreeView 无刷新展开的实例代码
Jul 13 Javascript
js实现数组转换成json
Jun 26 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
关于JS模块化的知识点分享
Oct 16 Javascript
js判断非127开头的IP地址的实例代码
Jan 05 Javascript
Javascript实现苹果悬浮虚拟按钮
Apr 10 #Javascript
jQuery实现点击水纹波动动画
Apr 10 #Javascript
JavaScript数据绑定实现一个简单的 MVVM 库
Apr 08 #Javascript
jQuery使用Selectator插件实现多选下拉列表过滤框(附源码下载)
Apr 08 #Javascript
JavaScript代码实现左右上下自动晃动自动移动
Apr 08 #Javascript
JS表单验证的代码(常用)
Apr 08 #Javascript
JavaScript事件代理和委托详解
Apr 08 #Javascript
You might like
PHP中使用asort进行中文排序失效的问题处理
2014/08/18 PHP
PHP Reflection API详解
2015/05/12 PHP
PHP使用mysqli同时执行多条sql查询语句的实例
2019/03/22 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
javascript按位非运算符的使用方法
2013/11/14 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
JavaScript window.location对象
2014/11/14 Javascript
javascript实现动态表头及表列的展现方法
2015/07/14 Javascript
HTML Table 空白单元格补全的简单实现
2016/10/13 Javascript
如何提高数据访问速度
2016/12/26 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
2017/02/09 Javascript
javascript设计模式之策略模式学习笔记
2017/02/15 Javascript
微信小程序 连续旋转动画(this.animation.rotate)详解
2017/04/07 Javascript
想用好React的你必须要知道的一些事情
2017/07/24 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
7个好用的JavaScript技巧分享(译)
2019/05/07 Javascript
Python字符串转换成浮点数函数分享
2015/07/24 Python
python删除字符串中指定字符的方法
2018/08/13 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
pygame实现成语填空游戏
2019/10/29 Python
提升python处理速度原理及方法实例
2019/12/25 Python
Python selenium模块实现定位过程解析
2020/07/09 Python
使用pandas读取表格数据并进行单行数据拼接的详细教程
2021/03/03 Python
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
实用求职信范文分享
2013/12/25 职场文书
国家励志奖学金个人先进事迹材料
2014/05/04 职场文书
Spring Boot 整合 Apache Dubbo的示例代码
2021/07/04 Java/Android
Python实现视频中添加音频工具详解
2021/12/06 Python