js实现jq的ajax

Posted 元庆

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js实现jq的ajax相关的知识,希望对你有一定的参考价值。

本文将介绍如何使用js封装一段代码,实现jq的ajax功能,每一步代码均有注释便于理解

实现代码

function ajax(){
 //获取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-urlencoded",
    beforeSend:arguments[0].beforeSend || function(){},
    success:arguments[0].success || function(){},
    error:arguments[0].error || function(){}
  }
  ajaxData.beforeSend()
  var xhr = createxmlHttpRequest();    //创建 XMLHttpRequest 对象
  xhr.responseType=ajaxData.dataType;  //预期服务器返回的数据类型
  xhr.open(ajaxData.type,ajaxData.url,ajaxData.async);  //规定请求的类型、URL 以及是否异步处理请求
  xhr.setRequestHeader("Content-Type",ajaxData.contentType);  //发送信息至服务器时内容编码类型(向请求添加 HTTP 头)
  xhr.send(convertData(ajaxData.data));                     //将请求发送到服务器
  //当请求被发送到服务器时,我们需要执行一些基于响应的任务。
  //每当 readyState 改变时,就会触发 onreadystatechange 事件。
  //readyState 属性存有 XMLHttpRequest 的状态信息。
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if(xhr.status == 200){
        ajaxData.success(xhr.response)
      }else{
        ajaxData.error()
      }
    }
  }
}
//创建 XMLHttpRequest 对象
function createxmlHttpRequest() {
  if (window.ActiveXObject) {
    // IE6, IE5 浏览器执行代码
    return new ActiveXObject("Microsoft.XMLHTTP");
  } else if (window.XMLHttpRequest) {
     //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    return new XMLHttpRequest();
  }
}
//解析传入的对象
function convertData(data){
  if( typeof data === ‘object‘ ){
    var convertResult = "" ;
    for(var c in data){
      convertResult+= c + "=" + data[c] + "&";
    }
    convertResult=convertResult.substring(0,convertResult.length-1)
    return convertResult;
  }else{
    return data;
  }
}

调用方法

ajax({
      type:"POST",
      url:"ajax.php",
      dataType:"json",
      data:{"val1":"abc","val2":123,"val3":"456"},
      beforeSend:function(){
        //some js code
      },
      success:function(msg){
        console.log(msg)
      },
      error:function(){
        console.log("error")
      }
    })

 


以上是关于js实现jq的ajax的主要内容,如果未能解决你的问题,请参考以下文章

20180826 优化版留言板 PHP ajax html css js jq

AJAX相关JS代码片段和部分浏览器模型

用js或者jq实现,根据下拉菜单的字段来显示对应的内容?

jq的ajax方法

JQ+AJAX实现多级联动

php结合ajax实现简单的无刷新评论