封装AJAX

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

 //封装ajax
 function ajax(obj){

    //创建XMLHttpRequest对象
    if(window.XMLHttpRequest){
        var xhr = new XMLHttpRequest();
    }else{
        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }

    obj.url = obj.url+‘?rand=‘+Math.random();      //使用js随机字符串解决IE第二次它就默认获取缓存数据,导致数据不更新
    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‘,
            ‘age‘:100
        },
        success:function(text){
            alert(text);
        },
        async:true
    });

});

encodeURIComponent(URIstring)函数可把字符串作为 URI 组件进行编码。

PS:encodeURIComponent() 函数将转义(;/?:@&=+$,#)这些用于分隔 URI 组件的标点符号

indexOf()返回某个指定的字符串值在字符串中首次出现的位置。

PS:如果要检索的字符串值没有出现,则该方法返回 -1。

join() 方法用于把数组中的所有元素放入一个字符串。

PS:元素是通过指定的参数分隔符进行分隔的。

时间: 2024-10-14 12:50:22

封装AJAX的相关文章

原生JS封装ajax方法

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 6 <title>Examples</title> 10 <script> 11 12 //将对象序列

原生JavaScript 封装ajax

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

原生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

封装ajax原理

封装ajax原理 首先处理 用户如果不传某些参数,设置默认值 type默认get 默认url为当前页 默认async方式请求 data数据默认为{} 处理用户传进来的参数对象 遍历,拼接成key=value&key=value形式,加入数组 通过XMLHttpRequest对象创建xhr,早期的IE浏览器不支持XMLHttpRequest对象,通过var xhr = new ActiveXObject('Msxm12.XMLHTTP')创建 判断用户请求的方法 get:将数据拼接在url后面,

AJAX编程-封装ajax工具函数

即 Asynchronous [e's??kr?n?s] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器进行通信. XMLHttpRequest可以以异步方式的处理程序,浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 封装ajax工具函数 $.ajax = function(options){ if(!options) return fal

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 *

自定义封装ajax,复制即可用

支持get.post请求 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>自定义封装ajax</title> 7 </head> 8 9 <body> 10 </body> 11 12 </html> 13 <script type="text/javasc

Jquery封装ajax

? Load方法 ????<!-- 将jquery.js导入进来 --> ????<script type="text/javascript" src="js/jquery-1.7.2.js"></script> ????<script type="text/javascript"> ????$(function(){ ????????$("a").click(function(

轻松搞定Ajax(分享下自己封装ajax函数,其实Ajax使用很简单,难是难在你得到数据后来怎样去使用这些数据)

hey,guys!今天我们一起讨论下ajax吧!此文只适合有一定ajax基础,但还是模糊状态的同志,当然高手也可以略过~~~ 一.概念 Ajax(Asynchronous Javascript + XML(异步JavaScript和XML )) 二.效果 实现无刷新效果,向后台异步的取数据(不是只有AJAX才能实现这样的效果的哦,如img , script标签中的src属性也可以实现一样的效果,可以自己尝试一下哦) 三.本质 可能我们在学习过程中会觉得ajax好难,我也是这样过来的,我觉得是我们