Ajax用于异步更新网页的内容,在不更新整个网页的状态下,更新页面某一个模块的内容。
通常通过对数据库内容的读取获取数据,异步更新状态,也有对数据整合网站的接口api进行数据的获取
例子:
电商网站 商品类别的更新,在手机目录下通过切换不同的品牌,获取不同品牌的手机信息,页面没有刷新,内容刷新了。
在购物车界面 点击加入购物车,提交到数据库(post方法),在结算界面获取购物车的详情(get方法)。
在Ajax中,有get的方法和post方法
在jquery中
Ajax使用的方法为
$.ajax({
type:"提交的方式(post/get)", //使用$.ajax时候必填
url:"提交的地址", //提交的地址
data:{"key1":"value1","key2":"value2"} ,//传入的内容
dataType:"类型", //服务器返回的数据类型(json,jsonp)
jsonp:"jsonpCallback" ,//jsonp返回中的回调函数
async:true,//布尔值,是否异步请求,默认true,false为同步
success:function(obj){
},//成功请求后的回调函数,obj为服务器传回来的数据
error:function(obj){
}//失败请求访问的函数
})
GET方法
$.get({
type:"提交的方式(post/get)", //使用$.ajax时候必填,使用get时候不用填写
url:"提交的地址", //提交的地址
data:{"key1":"value1","key2":"value2"} ,//传入的内容
dataType:"类型", //服务器返回的数据类型(json,jsonp)
jsonp:"jsonpCallback" ,//jsonp返回中的回调函数
async:true,//布尔值,是否异步请求,默认true,false为同步
success:function(obj){
},//成功请求后的回调函数,obj为服务器传回来的数据
error:function(obj){
}//失败请求访问的函数
})
POSY方法
$.get({
type:"提交的方式(post/get)", //使用$.ajax时候必填,使用get时候不用填写
url:"提交的地址", //提交的地址
data:{"key1":"value1","key2":"value2"} ,//传入的内容
dataType:"类型", //服务器返回的数据类型(json,jsonp)
jsonp:"jsonpCallback" ,//jsonp返回中的回调函数
async:true,//布尔值,是否异步请求,默认true,false为同步
success:function(obj){
},//成功请求后的回调函数,obj为服务器传回来的数据
error:function(obj){
}//失败请求访问的函数
})
JS的原生方法
js的方法有点复杂,但是在没有JQ的情况下也是必须学会掌握的
getXmlHttpRequest方法
function getXmlHttpRequest(){
return XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //判断非IE浏览器和IE浏览器
}
return XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //判断非IE浏览器和IE浏览器
}
定义一个get或者post方法
/**
* 处理AJAX的get请求
* 处理AJAX的get请求
* @param(String) url 需要使用AJAX请求的地址
* @param(Function) success AJAX请求成功时调用的函数
* @param(Function) fail AJAX请求失败时调用的函数
*/
* @param(Function) success AJAX请求成功时调用的函数
* @param(Function) fail AJAX请求失败时调用的函数
*/
function get(url, success, fail){
ajax('GET', url, null, success, fail);
}
ajax('GET', url, null, success, fail);
}
ajax方法本体
/**
* 处理AJAX的get/post请求
* @param(String) method 请求的方式,get或post
* @param(String) url 需要使用AJAX请求的地址
* @param(JSON) params POST方式时需要传递到服务器的数据
* @param(Function) success AJAX请求成功时调用的函数
* @param(Function) fail AJAX请求失败时调用的函数
*/
* 处理AJAX的get/post请求
* @param(String) method 请求的方式,get或post
* @param(String) url 需要使用AJAX请求的地址
* @param(JSON) params POST方式时需要传递到服务器的数据
* @param(Function) success AJAX请求成功时调用的函数
* @param(Function) fail AJAX请求失败时调用的函数
*/
function ajax(method, url, params, success, fail){
var xml = getXmlHttpRequest();
xml.onreadystatechange = function(){
if (xml.readyState == 4){ 4
if (xml.status == 200){
if(success){
success(xml.responseText);
}
}else{ // 服务器出现错误
if(fail){
fail();
}
}
}
};
xml.open(method, url, true);
xml.send();
}
var xml = getXmlHttpRequest();
xml.onreadystatechange = function(){
if (xml.readyState == 4){ 4
if (xml.status == 200){
if(success){
success(xml.responseText);
}
}else{ // 服务器出现错误
if(fail){
fail();
}
}
}
};
xml.open(method, url, true);
xml.send();
}
xml.readyState 的状态值
0 - (未初始化)还没有调用send()方法xml.status 的状态值
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
200——请求成功
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
201——提示知道新文件的URL
202——接受和处理、但处理未完成
203——返回信息不确定或不完整
204——请求收到,但返回信息为空
205——服务器完成了请求,用户代理必须复位当前已经浏览过的文件
206——服务器已经完成了部分用户的GET请求
400——错误请求,如语法错误
401——请求授权失败
403——请求不允许
404——没有发现文件、查询或URl
401——请求授权失败
403——请求不允许
404——没有发现文件、查询或URl
总结
ajax在前端网页中为十分重要的一环,是网页是否能动态刷新的关键,是一门必须掌握的技术