jquery:写得少做得多。
jquery中对ajax也进行了封装。简单易用,其使用过程中基本上都是照葫芦画瓢,我们来看下葫芦:
$.ajax({
type: "method"
async:boolean,
url: "url",
data: "data",
cache:boolean,
dataType: "dataType",
success: function(response) {
}
});
我们来对这个葫芦详细的解释一下:
type: 要求为String类型的参数,请求方式(post或get)默认为get。注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持。
async:要求为Boolean类型的参数,默认设置为true,所有请求均为异步请求。
如果需要发送同步请求,请将此选项设置为false。注意,同步请求将锁住浏览器,用户其他操作必须等待请求完成才可以执行。
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址。
data: 要求为Object或String类型的参数,发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如{foo1:”bar1″,foo2:”bar2″}转换为&foo1=bar1&foo2=bar2。如果是数组,JQuery将自动为不同值对应同一个名称。例如{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2。
cache:要求为Boolean类型的参数,默认为true(当dataType为script时,默认为false)。
dataType: 要求为String类型的参数,预期服务器返回的数据类型。如果不指定,JQuery将自动根据http包mime信息返回responseXML或responseText,并作为回调函数参数传递。
可用的类型如下:
- xml:返回XML文档,可用JQuery处理。
- html:返回纯文本HTML信息;包含的script标签会在插入DOM时执行。
- script:返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时(不在同一个域下),所有post请求都将转为get请求。
- json:返回JSON数据。(常用)
- jsonp:JSONP格式。使用SONP形式调用函数时,例如myurl?callback=?,JQuery将自动替换后一个“?”为正确的函数名,以执行回调函数。(常用)
- text:返回纯文本字符串。
jsonpCallback:该值用来替代在”callback=?”这种GET或POST请求中URL参数里的”callback”部分。
success:要求为Function类型的参数,请求成功后调用的回调函数,有两个参数。
- 由服务器返回,并根据dataType参数进行处理后的数据。
- 描述状态的字符串。
jquery的ajax用法案例(画瓢):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function() {
$('#search').on('keyup', function() {
var url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=";
$.ajax({
type: "get",
//async:true,//可选
url: url + $(this).val() + "&cb=callback",
// data: "data",//可选
dataType: "jsonp",
cache: true, //可选
jsonpCallback: "callback", //代替请求地址中的callback参数
success: function(response) {
console.log(response); //打印出返回的数据
}
});
});
});
</script>
</head>
<body>
<input type="text" id="search">
</body>
</html>
这里实现的是input输入框按键弹起,就打印百度搜索框里的搜索相关数据,例如我输入12306

数据获取到了,就可以进行你的其他操作了,直观的看出反回了一个jsonp格式的数据,好了以上就是本次的瓢。