前端提高篇(118):了解jquery.ajax()的基本使用
手动封装的ajax()与jquery.ajax()
之前在这篇文章中，手动封装了Ajax，形参有：
- method：请求方法
- url：php代码地址
- callback：回调函数
- data：传递的数据
- flag：是否异步
jquery.ajax()中，对这些功能做了进一步的封装，部分参数如下：
- type：请求方法 ，对应前面的method
- url：php代码地址 与前面的url参数是同样的功能
- success：请求成功时的回调函数
- error：请求失败时的回调函数
- data：传递的数据
- async：是否异步，默认true
- cache：是否缓存，默认true
- context：为所有 AJAX 相关的回调函数规定 “this” 值
jquery.ajax()基本使用
GET请求
使用上面提到的那篇文章的案例，用GET请求，获取后台的新闻列表，并打印
$.ajax({
type: "GET",
url: "./getData.php",
success: function(data){
var data = JSON.parse(data);
console.log(data);
}
})
$.ajax()参数为对象形式
默认是异步请求，且在此案例，不用传参，所以没有写data和async参数
另：jquery.get()是jquery专门发送get请求的简易方法
POST请求
向后台发送用户名和年龄数据，后台返回两者规范化后的字符串并打印”成功“
$.ajax({
type: "POST",
url: "./postData.php",
success: function(data){
console.log(data);
console.log('成功')
},
data:"username=ccy&age=18"
})
效果:
其中，data标准格式是字符串，用&连接起多个参数，也可以写成对象格式：
$.ajax({
type: "POST",
url: "./postData.php",
success: function(data){
console.log(data);
console.log('成功')
},
// data:"username=ccy&age=18"
data: {
username: "ccy",
age:18
}
})
效果一致
另：jquery.post()是jquery专门发送post请求的简易方法
缓存cache
之前我们手动封装ajax()时，为了避免数据的缓存，在请求上增加了时间戳，即使请求同样的参数，但每次都发送请求；jquery.ajax()中同样对是否缓存做了封装
缓存默认为true,即同一请求只发送一次：
第一次点击：
第二次点击：
点击两次，请求地址均一致
如果在jquery.ajax()的参数中添加上cache:false，就会给请求加上时间戳，每次请求均会发出
第一次点击：
第二次点击：
上下文context
指的是回调函数的this指向，默认是jquery.ajax()对象本身
效果：
可以修改this，指向ul，把获取的新闻列表以li形式加入ul
此时this已指向ul，再把新闻列表插入：
$('button').on("click", function () {
$.ajax({
type: "GET",
url: "./getData.php",
success: function (data) {
var data = JSON.parse(data);
var str = '';
$.each(data, function(index, ele){
str += "" + ele.title + "";
})
$(this).append(str);
},
context:document.getElementsByTagName("ul")[0]
})
})
请求头headers
在控制台的network中，找到Request Headers栏，就会有一个name:ccy
jquery.ajax()高级使用
JSONP使用
借用百度搜索词功能，输入关键字，在network找到Request URL，修改回调函数名，去掉不必要的参数，将这个url做为案例
$('button').on("click", function () {
$.ajax({
type: "GET",
url: "https://www.baidu.com/sugrec?prod=pc",
data:"wd=d&cb=cbs",//拼接参数：关键词和回调函数名
crossDomain: true,//跨域
dataType: "jsonp"//预期服务器响应的数据类型为jsonp
})
})
function cbs(data){
console.log(data);
}
效果：
或者不把回调函数名写在data参数里，data参数只写关键字：
$('button').on("click", function () {
$.ajax({
type: "GET",
url: "https://www.baidu.com/sugrec?prod=pc",
data:"wd=d",
crossDomain: true,
dataType: "jsonp",
jsonp: "cb",//用cb参数接受回调函数名
jsonpCallback:"cb=cbs"//定义回调函数名
})
})
function cbs(data){
console.log(data);
}
效果一致
再做一次淘宝联想词案例
// 给文本框绑定input事件
$('input').on("input", function () {
$.ajax({
type: "GET",
url: "https://www.baidu.com/sugrec?prod=pc",
data: "wd=" + $("input").val(),
crossDomain: true,
dataType: "jsonp",
jsonp: "cb",
jsonpCallback: "cb=cbs"
})
})
// 回调函数
function cbs(data) {
$("ul").html("").css("display", "none");
if (data["g"]) {
console.log(data["g"]);
var str = '';
$.each(data["g"], function (index, ele) {
str += "" + ele.q + "";
});
$("ul").append(str);
$("ul").css("display", "block")
}
}
html结构：
<div class="wrapper">
<input type="text" name="" id="">
<div class="list">
<ul>ul>
div>
div>
另附：success参数和cb都是定义成功回调函数，当请求成功，都会被调用
作为deferred使用
jquery.ajax()返回的是deferred对象，可以支持done，always和fail方法的链式操作，
还可以使用then：顺序调用，可以代替done和fail，或者用来确保一些请求的顺序进行
1.done、fail的使用：
// 请求成功，执行done；请求失败，执行fail
//用本地file路径，即请求失败
$('button').on('click',function(){
$.ajax({
type:"GET",
url:"./getData.php"
}).done(function(){
console.log('success');
}).fail(function(){
console.log("fail")
})
})
2.then的使用
// 请求成功，执行第一个匿名函数；请求失败，执行第二个匿名函数
$('button').on('click',function(){
$.ajax({
type:"GET",
url:"./getData.php"
}).then(function(){
console.log('666')
},
function(){
console.log('nonono')
})
})
3.always的使用
// 不论请求成功或者失败，均执行此匿名函数
$('button').on('click',function(){
$.ajax({
type:"GET",
url:"./getData.php"
}).always(function(){
console.log('发送了')
})
})
好文链接
好文链接