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);

})