zoukankan      html  css  js  c++  java
  • 原生JavaScript 封装ajax

    原生JavaScript 封装ajax

     

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

    if(opt.url==""){//如果用户没有输入URL,这样是不允许的 。直接返回,不执行以后的操作
    alert("url不能为空");
    return;
    }
    if(options.type){
    opt.type=options.type.toLowerCase();//将用户输入的POST等方法变成小写
    }
    //新建一个连接对象。标准浏览器中 都创建XMLHttpRequest 对象。非标准的浏览器中新建ActiveXObject
    var xhr=null;
    try{
    xhr=new XMLHttpRequest;
    }catch(e){
    xhr=new ActiveXObject("Micsoft.XMLHTTP");
    }
    //如果用户用get方法,则需要拼接URL,将用户的数据放到URL传到后台
    if(opt.type=="get"&&opt.data){
    opt.url+="?"+opt.data;
    }
    xhr.open(opt.type,opt.url,true);//调用xhr.open方法连接后台借口
    //如果是get方法,则send函数不传值、
    if(opt.type="get"){
    xhr.send(null);
    }else{
    //如果是post方法 则需要加一个连接头。且send函数中 传入用户的数据
    xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
    xhr.send(opt.data);
    }
    //连接完毕,等后台返回结果和数据
    xhr.onreadystatechange=function(){
    if(xhr.readyState==4){//readyState有5种状态码。0,1,2,3,4
    if(xhr.status==200){//http状态码为200代表成功
    var data=xhr.responseText;//新建一个变量保存后台返回的数据
    if(opt.dataType.toLowerCase()=="xml"){
    data=xhr.responseXML;//如果后台返回的XML格式的数据.用responseXML来获取
    }
    if(opt.dataType.toLowerCase()=="json"){
    data=JSON.parse(data);//如果是json 则用parse来将字符串转化为对象
    }
    if(typeof opt.success==='function'){
    opt.success(data);//如果有成功的回调函数 则将后台数据当做回调函数的参数返回过去
    }
    }else{
    alert("出错啦"+xhr.status)//如果状态码不为200,连接失败,返回http状态码
    }

    }

    }
    }

     

    补充:

    readyState的状态码含义

    0:请求未初始化

    1:服务器连接已建立

    2:请求已接受

    3:请求处理中

    4:请求完成,且响应就绪。

    作者:KeerDi —— 北方的后生

    出处:http://www.cnblogs.com/keerdi/

    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    Leetcode979 : Distribute Coins in Binary Tree 二叉树均匀分配硬币问题
    Leetcode547: Friend Circles 朋友圈问题
    线程安全的生产者消费者四种实现方法
    Leetcode823 : 因子二叉树问题
    Leetcode7 : Reverse Integer 整数反转问题
    Leetcode3 : 最长不含重复字符子串问题
    Leetcode6 : ZigZag 转换问题
    leetcode8 : 实现atoi函数将字符串转化为整数问题
    seo域名选择
    利用 Python django 框架 输入汉字,数字,字符,等。。转成二维码!
  • 原文地址:https://www.cnblogs.com/123hll/p/6921759.html
Copyright © 2011-2022 走看看