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 相关文章推荐
JS Excel读取和写入操作(模板操作)实现代码
Apr 11 Javascript
js 弹出菜单/窗口效果
Oct 30 Javascript
Javascript 加载和执行-性能提高篇
Dec 28 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
js实现的四级左侧网站分类菜单实例
May 06 Javascript
jQuery超简单选项卡完整实例
Sep 26 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
JS实现六位字符密码输入器功能
Aug 19 Javascript
Angular工具方法学习
Dec 26 Javascript
JavaScript之事件委托实例(附原生js和jQuery代码)
Jul 22 jQuery
JS中判断字符串存在和非空的方法
Sep 12 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 解决utf-8和gb2312编码转换问题
2010/03/18 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
javascript与CSS复习(《精通javascript》)
2010/06/29 Javascript
下拉列表select 由左边框移动到右边示例
2013/12/04 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jquery序列化方法实例分析
2015/06/10 Javascript
jquery插件pagination实现无刷新ajax分页
2015/09/30 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue-router命名视图的使用讲解
2019/01/19 Javascript
JavaScript 九种跨域方式实现原理
2019/02/11 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
2020/09/11 Javascript
Nodejs实现微信分账的示例代码
2021/01/19 NodeJs
js闭包和垃圾回收机制示例详解
2021/03/01 Javascript
Python 异常处理实例详解
2014/03/12 Python
Python continue继续循环用法总结
2018/06/10 Python
python递归法解决棋盘分割问题
2019/07/17 Python
将Python文件打包成.EXE可执行文件的方法
2019/08/11 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
jupyter notebook 恢复误删单元格或者历史代码的实现
2020/04/17 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
为中国消费者甄选天下优品:网易严选
2016/08/11 全球购物
2014应届本科生自我评价
2014/09/13 职场文书
授权委托书(法人单位用)
2014/09/29 职场文书
写给医生的感谢信
2015/01/22 职场文书
个人党性分析总结
2015/03/05 职场文书
新年晚会开场白
2015/05/29 职场文书
2015暑假社会调查报告
2015/07/13 职场文书
深入解析NumPy中的Broadcasting广播机制
2021/05/30 Python
alibaba seata服务端具体实现
2022/02/24 Java/Android
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
Win11如何设置右键单击显示所有选项?Win11右键单击显示所有选项设置教程
2022/04/08 数码科技
vue使用localStorage持久性存储实现评论列表
2022/04/14 Vue.js