基于原生ajax与封装的ajax使用方法,原生封装ajax方法

基于原生ajax与封装的ajax使用方法,原生封装ajax方法。ajax (ajax开发)简介

依据原生ajax与包装的ajax使用方法(详解),封装ajax

当大家不会写后端接口来测验ajax时,大家得以应用node境况来效仿三个后端接口。

1、模拟后端接口可参看网址整站开辟小例子,在打开命令窗口并转到随地项目文件夹下在命令行中输入npm
install express –save,安装express中间件。

图片 1

图片 2

2、把高级中学级的app.js的剧情换来

var express=require('express');
//var path=require('path');
var app=express();

//app.set('view',path.join(__dirname,'views')); //在views目录下搜索所有模板
app.engine('html',require('ejs').__express); //让ejs能够识别后缀为'.html'的文件 or app.engine("html",require("ejs").renderFile);
app.set('view engine','html');//在调用render函数时能自动为我们加上'.html' 后缀。如果没有第二句,我们就得把res.render(‘users')写成res.render(‘users.html'),否则会报错

var service=require('./webService/service.js');

app.use('/public',express.static('public'));

app.get('/',function(req,res){ //路由HTTP GET请求到有特殊回调的特殊路径。
 res.render('index');
});

app.get('/ajax/index',function(req,res){ //创建了一个模拟后端接口
 res.send(service.get_index_data());
});

/*若路径找不到,都返回404报错页面*/
app.use(function(req,res,next){
 var err=new Error('this page Not found');
 err.status=404;
 next(err);
});

app.listen(3003); //在浏览器输入localhost:3003即可浏览

3、index.json内容

{
 "items":"Express 是一个自身功能极简,完全是由路由和中间件构成一个的 web 开发框架:从本质上来说,一个 Express 应用就是在调用各种中间件。中间件(Middleware) 是一个函数,它可以访问请求对象(request object (req)), 响应对象(response object (res)), 和 web 应用中处于请求-响应循环流程中的中间件,一般被命名为 next 的变量。"
} 

4、index.html内容

.content-box{
 width: 400px;
}
#text{
 padding: 0px 10px;
 width: 400px;
 height: 300px;
}

5、html结构

<h3>这是一段不变的内容这是一段不变的内容这是一段不变的内容</h3>
<div class="content-box">
 <textarea id="text">如果要让用户留在当前页面中,同时发出新的HTTP请求,就必须用JavaScript发送这个新请求,接收到数据后,再用JavaScript更新页面,这样一来,用户就感觉自己仍然停留在当前页面,但是数据却可以不断地更新。</textarea>
</div>
<button id="btnchange">换一换</button>

6、原生ajax写法

window.onload=function(){
 function clickbtn(){
  var request;
  if(window.XMLHttpRequest){
   request=new XMLHttpRequest(); // 新建XMLHttpRequest对象
  }else{
   request=new ActiveXObject('Microsoft.XMLHTTP'); //兼容ie
  }
  request.open('GET','/ajax/index',true);
  request.onreadystatechange=function(){ // 状态发生变化时,函数被回调
   if(request.readyState===4){ // 成功完成
    if(request.status===200){
     var text=request.responseText;//成功,通过responseText拿到响应的文本
     document.getElementById('text').value=text;
    }else{
     var err=fail(response.status);// 失败,根据响应码判断失败原因
     alert(err);
    }
   }else{
    // HTTP请求还在继续...
   }
  }
  // 最后调用send()方法才真正发送请求
  request.send();//POST请求需要把body部分以字符串或者FormData对象传进去
 }
 document.getElementById('btnchange').onclick=clickbtn;
}

或jquery写法

$(document).ready(function(){
 $('#btnchange').click(function(){
  $.ajax({
   type:"GET",
   url:"/ajax/index",
   datatype:"json",
   success:function(data){
    $('#text').val(data);
   }
  });
 });
});

图片 3

运行之后在浏览器输入localhost:3003即可浏览

图片 4

图片 5

以上那篇基于原生ajax与包装的ajax使用方法(详解)便是作者分享给大家的全体内容了,希望能给大家二个参谋,也希望大家多多辅助帮客之家。

当大家不会写后端接口来测验ajax时,大家得以利用node情状来效仿七个后端接口。
1、模拟…

实例:

 ajax({
            type:'get',
            // url:'http://tom.com/jsonp.php',
            url:'http://localhost/cross/data.php',
            dataType:'jsonp',
            data:{username:'zhangsan',password:'123'},
            jsonp:'cb',
            jsonpCallback:'abc',
            success:function(data){
                console.log(data.username,data.password);
            }
        });

当大家不会写后端接口来测量检验ajax时,大家能够利用node意况创造二个本地服务器。

AJAX即“Asynchronous Javascript And
XML”(异步JavaScript和XML),是指一种创制交互式网页应用的网页开辟技能。

 

1、创立二个当地服务器可参看
install express –save,安装express中间件。

AJAX = 异步 JavaScript和XML(标准通用标志语言的子集)。

function ajax(obj){
    var defaults = {
        type : 'get',
        async : true,
        url : '#',
        dataType : 'text',
        jsonp : 'callback',
        data : {},
        success:function(data){console.log(data);}
    }

    for(var key in obj){
        defaults[key] = obj[key];
    }

    if(defaults.dataType == 'jsonp'){
        ajax4Jsonp(defaults);
    }else{
        ajax4Json(defaults);
    }
}

function ajax4Json(defaults){
    // 1、创建XMLHttpRequest对象
    var xhr = null;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    // 把对象形式的参数转化为字符串形式的参数
    /*
    {username:'zhangsan','password':123}
    转换为
    username=zhangsan&password=123
    */
    var param = '';
    for(var attr in defaults.data){
        param += attr + '=' + defaults.data[attr] + '&';
    }
    if(param){
        param = param.substring(0,param.length - 1);
    }
    // 处理get请求参数并且处理中文乱码问题
    if(defaults.type == 'get'){
        defaults.url += '?' + encodeURI(param);
    }
    // 2、准备发送(设置发送的参数)
    xhr.open(defaults.type,defaults.url,defaults.async);
    // 处理post请求参数并且设置请求头信息(必须设置)
    var data = null;
    if(defaults.type == 'post'){
        data = param;
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    // 3、执行发送动作
    xhr.send(data);
    // 处理同步请求,不会调用回调函数
    if(!defaults.async){
        if(defaults.dataType == 'json'){
            return JSON.parse(xhr.responseText);
        }else{
            return xhr.responseText;
        }
    }
    // 4、指定回调函数(处理服务器响应数据)
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                var data = xhr.responseText;
                if(defaults.dataType == 'json'){
                    // data = eval("("+ data +")");
                    data = JSON.parse(data);
                }
                defaults.success(data);
            }
        }
    }
}
function ajax4Jsonp(defaults){
    // 这里是默认的回调函数名称
    // expando: "jQuery" + ( version + Math.random() ).replace( /\D/g, "" ),
    var cbName = 'jQuery' + ('1.11.1' + Math.random()).replace(/\D/g,"") + '_' + (new Date().getTime());
    if(defaults.jsonpCallback){
        cbName = defaults.jsonpCallback;
    }

    // 这里就是回调函数,调用方式:服务器响应内容来调用
    // 向window对象中添加了一个方法,方法名称是变量cbName的值
    window[cbName] = function(data){
        defaults.success(data);//这里success的data是实参
    }

    var param = '';
    for(var attr in defaults.data){
        param += attr + '=' + defaults.data[attr] + '&';
    }
    if(param){
        param = param.substring(0,param.length-1);
        param = '&' + param;
    }
    var script = document.createElement('script');
    script.src = defaults.url + '?' + defaults.jsonp + '=' + cbName + param;
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(script);
}

图片 6

AJAX 是一种用于成立火速动态网页的本领。

 

图片 7

透过在后台与服务器举行少些数据沟通,AJAX
能够使网页达成异步更新。那意味能够在不另行加载整个网页的情况下,对网页的某部分实行更新。

2、把高级中学级的app.js的原委换来

在事实上的层次里,ajax的使用作用非常高,所以就算jquery可能另外的有的近乎的js库做了拾贰分不利的包装,如故有更进一竿封装简化的空大壮必备

var express=require('express');
//var path=require('path');
var app=express();

//app.set('view',path.join(__dirname,'views')); //在views目录下搜索所有模板
app.engine('html',require('ejs').__express);  //让ejs能够识别后缀为’.html’的文件  or   app.engine("html",require("ejs").renderFile);
app.set('view engine','html');//在调用render函数时能自动为我们加上’.html’ 后缀。如果没有第二句,我们就得把res.render(‘users’)写成res.render(‘users.html’),否则会报错

var service=require('./webService/service.js');

app.use('/public',express.static('public'));

app.get('/',function(req,res){  //路由HTTP GET请求到有特殊回调的特殊路径。
    res.render('index');
});

app.get('/ajax/index',function(req,res){   //创建了一个后端接口
    res.send(service.get_index_data());
});

/*若路径找不到,都返回404报错页面*/
app.use(function(req,res,next){
    var err=new Error('this page Not found');
    err.status=404;
    next(err);
});

app.listen(3003);  //在浏览器输入localhost:3003即可浏览

相关文章