ajax请求的介绍:
ajax请求 是JavaScript提供的与后端交互的方法
- ajax请求的基本步骤:
-
创建ajax对象
const xhr =new XMLHttpRequest()
-
定义ajax请求相关设定
xhr.open()
get方式：xhr.open('get' , url地址？拼接参数) post方式： xhr.open('post' , url地址) -
发送ajx请求
xhr.send()
get方式：xhr.send() post方式：先定义请求头内容、再xhr.send(参数) -
接收请求
xhr.onload = function(){}
- JavaScript中的ajax请求要考虑兼容问题
- 请求兼容的兼容形式：
if(){
var xhr = new XMLHttpRequest();
}else{
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
- 获取响应体的兼容形式：
xhr.onreadystatechange = function(){
// 当状态码为4时,请求状态为2开头的3位数值时,有正确的响应体内容
if(xhr.readyState == 4 && /^2\d{2}$/.test(xhr.status)){
// 执行程序
}
}
jQuery中封装好的ajax请求的使用
不用考虑兼容、跨域等问题, jQuery全都已经封装好了。 只需要在设定请求时设定不同的参数,就可以完成不同的请求。
一、常规请求（有三种方式）
1. get方式
-
语法（两种形式）：
（1）$.get({url， data，dataType，success})-----顺序任意
url : 地址(必填) data : 携带的参数，对象形式 dataType : 期望的数据类型,如果为json,会将后端返回的json串自动解析 success : function(){ 请求成功时执行的函数 }（2）$.get(url， data，callback，dataType)------顺序不能改变
-
代码展示
- 发送请求的jquery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>get请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script> <!-- 必须加载jQuery文件 -->
<script>
$('button').click(function(){
$.get({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求时携带参数,参数以对象形式定义
data : {name:'jack' , pwd:222333},
// 没有设定 dataType 参数,res中的响应体存储后端给的数据
// 设定 dataType : 'json', 会自动解析响应体json串
dataType : 'json',
// 请求成功时,执行的函数
// 函数的参数,存储响应体
// 自定义形参 res 中 存储的就是响应体
success : function(res){
console.log(res)
}
})
})
</script>
</body>
</html>
- 接收请求、发送响应体的PHP代码
<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
$arr = [
'msg' => 'get请求方式：直接返回参数内容',
'data' => [
'name' => $name,
'pwd' => $pwd,
]
];
echo json_encode($arr);
- 请求结果
2. post方式
-
语法（两种形式）：
（1）$.post({url， data，dataType，success})-----顺序任意
url:地址（必填） data : 携带的参数，对象形式 dataType : 期望的数据类型,如果为json,会将后端返回的json串自动解析 success : function(){ 请求成功时执行的函数 }（2）$.post(url， data，callback，dataType)------顺序不能改变
-
代码展示
- 发送请求的jquery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>post请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
$('button').click(function(){
$.post({
// 对 url 地址的PHP文件发起请求
url : './post.php',
// 请求时携带参数,参数以对象形式定义
data : {name:'jack' , pwd:123456},
// 没有设定 dataType 参数,res中的响应体
// 后端给什么,res中,就存储什么
// 设定 dataType : 'json', 会自动解析响应体json串
dataType : 'json',
// 请求成功时,执行的函数
// 函数的参数,存储响应体
// 自定义形参 res 中 存储的就是响应体
success : function(res){
console.log(res)
}
})
})
</script>
</body>
</html>
- 接收请求、发送响应体的PHP代码
<?php
$name = $_POST['name'];
$pwd = $_POST['pwd'];
$arr = [
'msg' => 'post请求方式：直接返回参数内容',
'data' => [
'name' => $name,
'pwd' => $pwd,
]
];
echo json_encode($arr);
- 请求结果
3. 综合方式
- 语法（两种形式）：
（1）$.ajax(url：地址)
其余都是默认值
（2） $.ajax(url，{type,data......其他参数})
1）常用参数:
url : 地址;
type / method : 请求方式 默认值是get方式
data : { } 传参参数,必须是对象形式
dataType : json, 设定为json,会自动解析反应提中的json串
success : function(){} 请求成功执行的函数
2）不常用参数:
async : 设定是否异步,默认值是true,异步执行ajax请求
error : function(){} 请求错误时执行的函数
请求成功时不会执行
timeout : 设定时间,单位 毫秒
如果请求时间超过设定的时间,认为是请求失败
必须是异步执行
cache : 设定是否缓存请求结果
默认值是 true,缓存请求结果
post方式不会缓存,设定也没有效果
context : 指定 执行函数中 this的指向
- 代码展示
- 发送请求的jquery代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>ajax请求</h1>
<button>请求</button>
<script src="../jquery.min.js"></script>
<script>
const obj = {};
$('button').click(function(){
$.ajax({
// 对 url 地址的PHP文件发起请求
url : './get.php',
// 请求方式,不写就是默认值get.
type: 'get',
data : {name:'jack',pwd:111222333},
//设定 json 解析响应体的json串
dataType : 'json',
success : function(res){
console.log(res);
console.log(this);
},
error : function(res){
console.log(res)
},
cache : false, // 如果是不缓存,会在数据后有一个 _数值 的时间戳
// 告诉程序,这个结果的获取时间
context : obj , // this默认指向 ajax对象 , 可以设定this的指向
})
console.log('我是同步执行的程序');
})
</script>
</body>
</html>
- 接收请求、发送响应体的PHP代码
<?php
$name = $_GET['name'];
$pwd = $_GET['pwd'];
$arr = [
'msg' => 'get请求方式：PHP直接返回参数内容',
'data' => [
'name' => $name,
'pwd' => $pwd,
]
];
echo json_encode($arr);
- 请求结果
二、跨域请求（jsonp方式）
jQuery中封装好的ajax
url : 地址是一个跨域地址
dataType : 必须是 jsonp
jsonp : 设定函数名称,默认是callback
php中:
echo 的内容是字符串拼接形式
echo "$函数名称变量(" . json_encode($返回数据) . ")";
函数名称存储在变量中,使用 " " 双引号解析， 返回的数据必须是 json串格式，使用 json_encode() 转化,拼接在函数的参数位置中。
