AJAX介绍
AJAX即“Asynchronous Javascript And XML”(异步的JavaScript和XML),是指一种创建交互式网页应用的网页开发技术,用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构,AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换,不会导致页面重载。
1.XMLHttpRequest
浏览器在XMLHttpRequest类上定义了它们的HTTP API,这个类的每个实例都表示一个独立的请求/响应对,并且这个对象的属性和方法允许指定请求细节和提取响应数据。
2.常用请求使用
2.1使用get发送无参请求
<button onclick="getData()">获取数据</button>
<script>
function getData(){
// 发送请求
// 1.使用XMLHttpRequest创建一个实例
var request=new XMLHttpRequest();
// 2.使用open方法设置和服务器的交互信息
request.open('get','https://api.muxiaoguo.cn/api/lishijr');
// 3.设置requestHeader()
// 在AJAX中,如果需要像HTML表单那样POST数据,需要使用setRequestHeader()方法来添加HTTP头
// 4.send()--设置发送的数据,开始和服务器端交互
// 调用send()之后,请求就会发送到服务器
request.send();
// 获取响应,注册事件
request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
// console.log(request.responseText);
var res=JSON.parse(request.responseText);
console.log(res);
// 根据数据添加对应的节点
for(var arrIndex in res.data){
// 创建一个节点
var p=document.createElement('p');
p.innerHTML=res.data[arrIndex].title;
document.body.appendChild(p);
}
}
}
}
</script>
2.2使用get发送有参请求
<!-- 在头部引入qs序列化工具,本地引入或在线引入 -->
<script src="./qs.js"></script>
<button onclick="getParams()">获取有参get请求</button>
<script>
function getParams(){
var request=new XMLHttpRequest();
var params = {
city: '苏州',
type: 1
};
// 参数序列化 要先引入QS序列化工具
var qs=Qs;
// 将参数拼接到url后面
request.open('get', 'https://api.muxiaoguo.cn/api/tianqi?' + qs.stringify(params));
// 发送请求
request.send();
// 获取响应
request.onreadystatechange=function(){
if(request.readyState===4&&request.status===200){
// console.log(request.responseText);
var res=JSON.parse(request.responseText);
console.log(res);
}
}
}
</script>
2.3使用post发送无参请求
<button onclick="postNo()">post无参请求</button>
<script>
function postNo(){
var request=new XMLHttpRequest();
request.open('post','https://api.muxiaoguo.cn/api/Gushici');
request.send();
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request);
}
}
}
</script>
2.4使用post发送有参请求
<button onclick="login()">登录</button>
<script>
function login(){
var request=new XMLHttpRequest();
request.open('post','http://47.100.26.102:8888/user/login');
var params={
password:'123321',
username:'admin1'
};
// 设置请求头
// 登录接口Content-type为json格式
request.setRequestHeader('Content-type','application/json','charset=utf-8');
// 参数放在send()方法中
request.send(JSON.stringify(params));
request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) {
console.log(request.responseText);
}
}
}
</script>
// 常用的数据格式(编码可带可不带)
// 1.发送json格式数据
request.setRequestHeader('Content-type', 'application/json; charset=utf-8');
// 2.发送表单数据
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');
// 3.发送纯文本(不指定Content-type时,此是默认值)
request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');
// 4.发送html文本
request.setRequestHeader('Content-type', 'text/html; charset=utf-8');
2.5使用jQuery发送请求
var baseURL='http://47.100.26.102:7788';
var user={
username:'admin',
password:'123456'
};
$('.login').click(function(){
$.ajax({
// 请求路径
url:baseURL+'/user/login',
// 请求方式
method:'post',
// 请求携带的参数
data:JSON.stringify(user),
// 设置请求头
headers:{
// 设置json
'Content-Type':'application/json'
},
// 成功的回调函数
success:function(res){
console.log(res);
},
// 失败的回调函数
error:function(err){
console.log(err);
}
});
}