js原生ajax与jQuery的ajax

77 阅读 0 评论 51 点赞

我是靠谱客的博主怡然自行车，最近开发中收集的这篇文章主要介绍js原生ajax与jQuery的ajax，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

AJAX 作用：可以实现在不刷新页面情况下，后台请求服务器，局部更新页面数据；
A:异步编程思想
j:js js中做一件是 DATE Math FileReader
通过js请求后台的服务器 XMLHttpRequest对象具备和服务器通信的能力
X:XML 数据传递和存储的格式

ajax get请求:
//用js内置的XMLHttpRequest对象来请求服务器
//创建XMLHttpRequest对象请求服务器
var xhr=new XMLHttpRequest();
//模拟http协议
//请求行请求的url?后面带上ajax的参数
xhr.open(‘get’,’ajax-url?name=’+data);
//请求头在get请求中请求头设置可以省略
xhr.setRequestHeader(‘Content-Type’,’text/html’);
//请求主体设置请求参数为null
xhr.send(null);
//监听服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var r=xhr.responseText; //拿到服务器返回的响应主体
}
}

ajax post请求:
//用js内置的XMLHttpRequest对象来请求服务器
//创建XMLHttpRequest对象请求服务器
var xhr=new XMLHttpRequest();
//模拟http协议
//请求行请求的url?后面带上ajax的参数
xhr.open(‘post’,’ajax-url’);
//设置请求头在post请求中必须这样设置
xhr.setRequestHeader(‘Content-Type’,’application/x-www-form-urlencoded’);
//请求主体设置请求参数
xhr.send(‘name=’+txt);
//监听服务器响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var r=xhr.responseText; //拿到服务器返回的响应主体
}
}

封装一个 ajax 请求的方法 my.ajax

调用封装好的 ajax 方法
my.ajax({
type: ‘get’,
url: ‘starUrl’,
data: null,
callback: function(info){
console.log(info);
}
});

var my = {
ajax:function(obj){
// 验证调用传递的函数
var type = obj.type || ‘get’; //默认请求方式为get
var url = obj.url || location.herf //默认请求当前页面
var callback = obj.callback
var data = this.setParam(obj.data) //转换服务需要的参数格式{name:’zs’,age:18} –> name=zs&age=18

    // 实例化xhr
    var xhr = new XMLHttpRequest();
    // 如果是get请求就把数据拼接好
    if(type == 'get'){
        url = url + '?' + data;
        data = null;
    }
    // 设置请求行
    xhr.open(type, url);
    // 如果是post请求 设置请求头
    if(type == 'post'){
        xhr.setRequestHeader('Content-Type', 'application-www-form-urlencoded');
    }
    // 发送请求主体
    xhr.send(data);
    // 监听服务器响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4 && xhr.status == 200){
            //获取服务器返回数据
            var re = xhr.responseText;//假设服务器返回的数据是json
            r=JSON.parse(r);
            //执行渲染的操作
            callback && callback(r); //渲染服务器返回的数据；
        }
    }
},
//用于将对象 {name:zs,age:18}  转成 name=zs&age=18
setParam:function(data){
    if(typeof data == 'object'){
        var s='';
        for(var key in data){
            s += key + '=' + data[key] + '&';
        }                       
    //去掉最后一个&
    s=s.slice(0,s.length-1); // 截取的起点（索引值） ，截取的长度                       
    return s;
    }
}

}

使用 JQuery 中的 $.ajax 方法$ .ajax({
type:’get’, //请求方式 get post
url:’jqueryAjax’, //请求处理程序的接口
data:{name:’zs’,age:18}, //数据传递对象自动转换 name=zs&age=18
dataType:’json’, //浏览器希望接受数据的类型
//如果dataType:json jquery插件本身自动调用JSON.parse()方法将json字符串转成js对象
timeout:3000, //超时单位ms
beforeSend:function(){
//请求发送之前的回到函数
alert(1);
},
success:function(info){ //当请求成功后的回调函数
//info 服务器返回的数据
console.log(info);
alert(2);
},
error:function(err){//请求出错时的回调函数
console.log(err);
alert(3);
},
complete:function(){ //请求完成的回调函数
alert(4);
//无论请求成功或者失败都会执行通常用于做一些收尾工作
}
});

在 JQuery 中对 get 和 post 请求 ajax 有简写方式，但是存在 JQuery 版本的兼容问题
$.get(‘url’,function(info){ console.log(info); })$ .post(‘url’,function(info){
console.log(info);
})