HTML-封装原生Ajax

function ajax(data){
    //data{data:"",dataType:"xml/json",type:"get/post",url:"",asyn:"true/false",success:funtion(){},failure:function(){}}
    //datapost={username:123,pwd=456}
    //dataGet="username=123&pwd=456"
    //第一步:创建XHR对象
    var xhr=null;
    if(window.XMLHttpRequest){//标准的浏览器
      xhr=new XMLHttpRequest();
    }else{
      xhr=new ActiveXObject(‘Microsoft.XMLHTTP‘);
    }
    //第二步:准备发送前的一些配置参数
    var type=data.type==‘get‘?‘get‘:‘post‘;
    var url=‘‘;
    if(data.url){
        url=data.url;
        if(type==‘get‘){
            url+="?"+data.data+‘&_t=‘+new Date().getTime();//(就是dataGet)
        }
    }
    var flag=data.asyn==‘true‘?‘true‘:‘false‘;
    xhr.open(type,url,flag);
    //第三步:执行发送的动作
    if(type==‘get("Content-Type","application/x-www-form-urlencoded")
        xhr.send(data.data);//就是dataPost
    }

    //第四步:指定回调函数
    xhr.onreadstatechange=function(){
       if(this.readyState==4){
            if(this.status==200){
                 if(typeof data.success==‘function‘){
                     var d=data.dataType==‘xml‘?this.responseXML:this.responseText;
                     data.success(d);
                }
            }else{
                  if(typeof data.failure==‘function‘){
                       data.failure();
                  }
            }
        }
    }
}                    
时间: 2024-11-08 08:55:58

HTML-封装原生Ajax的相关文章

Ajax_原生ajax写法、理解异步请求、js单线程+事件队列、封装原生ajax

1.原生Ajax 一定要理解Ajax出现的背景 Ajax通过url查询后端接口的数据,在前端做数据的解析和局部更新 1.隐藏帧iframe方式实现页面局部更新---只是为了比较好的用户体验 访问后台接口数据显示在iframe页面中显示,没有做主页面的刷新,但页面实际上也刷新了  看左上角的转圈圈了 2.Ajax异步请求,真正实现页面局部刷新,没有跳转,坐上角小圈圈没转 原生Ajax写法---注意ajax的缩写 3.服务器放回了xml数据格式 解析过程还是很麻烦的,所以这种数据格式很少用了. 4.

封装原生Ajax发送请求

(function(window){ function AjaxTool(){} AjaxTool.ajaxRequest = function(params,successCallBack,errCallBack){ /* 获取传入的参数 */ //请求的类型 let requestType = params['requestType'] || 'get'; //请求的路径 let url = params['url']; //传入的数据 let paramObj = params['para

原生AJAX请求教程

ajax 即 Asynchronous Javascript And XML,AJAX 不是一门的新的语言,而是对现有持术的综合利用.本质是在 HTTP 协议的基础上以异步的方式与服务器进行通信. 异步:指某段程序执行时不会阻塞其它程序执行,其表现形式为程序的执行顺序不依赖程序本身的书写顺序,相反则为同步. XMLHttpRequest 对象 浏览器内建对象,用于在后台与服务器通信(交换数据) ,由此我们便可实现对网页的部分更新,而不是刷新整个页面. 所有现代浏览器(IE7+.Firefox.C

原生ajax与封装的ajax使用方法

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考http://www.cnblogs.com/heyujun-/p/6793900.html网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'

原生封装的ajax

原生封装的ajax的代码如下: //将数据转换成 a=1&b=2格式; function json2url(json){ var arr = []; //加随机数防止缓存; json.t = Math.random(); for(var name in json){ arr.push(name+'='+json[name]); } return arr.join('&'); } function ajax(json){ //1.创建一个ajax对象; if(window.XMLHttpRe

js原生Ajax的封装与使用

一.原生Ajax代码的封装如下: (function() { var XHR = { createStandardXHR: function() { return new XMLHttpRequest(); }, createIEXHR: function () { return new ActiveXObject("Microsoft.XMLHTTP"); }, createErrorXHR: function () { alert("Your browser does n

原生ajax 方法封装

封装的技巧:将公共的代码提取出来,将可能会变化的代码,通过参数传递; 例如:请求服务器的方式.服务器地址.携带的参数.以及期望什么类型的数据,都得通过参数传递: 下面是封装的ajax操作的代码: 原文地址:https://www.cnblogs.com/lxc-bky/p/9568217.html

jQuery_review之 原生Ajax的写法

最低层的ajax的实现是基于浏览器的一个标准,就是XMLHttpRequest对象,这种对象在MS浏览器上面的实现与其他浏览器上面的实现是不一样的.尽管现在非常多的第三方框架采用"模板模式"封装了如何获取XMLHttpRequest对象以及如何发送和处理中间出现的异常,但是还是非常有必要对ajax进行一次复习,这样才能在看其他的方法的时候温故而知新的效果. 编写原生的ajax的代码,需要需要采用的步骤是,首先,我们应当在function中定义一个XMLHttpRequest的变量对象,

JavaWEB小知识学习--原生AJAX

AJAX的作用局部刷新,作为提升页面体验还是很重要的,不过大家都说对SEO不是很友好,一直使用jQuery封装的AJAX,没有了解过原生的是什么样子的,特此学习下,补充知识 1.原生AJAX的Get方式 页面中定义一个a标签.想要实现的效果点击a标签,能够请求服务器,弹出服务器返回的字段 <body> <a href="/ajaxTest">点击我!</a> </body> 对应的AJAX请求如下,注释步骤很详细的 //具体的函数可以参考

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne