Ajax交互流程图
1，js ajax流程
GET
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GET</title>
</head>
<body>
<button type="button" id="bt">发送</button>
<div id="con"></div>
<script type="text/javascript">
var bt = document.getElementById('bt')
var con = document.getElementById('con')
bt.onclick = function(){
//1.创建
var xml = new XMLHttpRequest();
//2.打开链接
xml.open("GET",'be.text',false) //打开链接(方法，地址，是否同步)
//3.监听readystate
xml.onreadystatechange = function(){ //监听readystate
//==4准备完毕，==200响应成功
if(xml.readyState==4&&xml.status==200){
con.innerHTML = xml.responseText;
//xml.responseText返回文本
}
}
//4.发送
xml.send()//发送
}
</script>
</body>
</html>
POST
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>POST</title>
</head>
<body>
<form action="" method="POST">
<input type="text" name="name" id="name" value="" />
<input type="text" name="age" id="age" value="" />
<button type="button" id="bt">发送</button>
</form>
<div id="con"></div>
<script type="text/javascript">
var bt = document.getElementById('bt')
var con = document.getElementById('con')
bt.onclick = function(){
//1.创建
var xml = new XMLHttpRequest();
//2.获取数据
var name = document.getElementById('name').value
var age = document.getElementById('age').value
//3.建立链接
xml.open('POST','http://127.0.0.1/echo.php',false)
//监听
xml.onreadystatechange = function(){
if(xml.status==200 && xml.readyState){
con.innerHTML = xml.responseText
}
}
//设置请求头格式
xml.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
//设置编码形式
xml.send(`name=${name}&age=${age}`);
}
</script>
</body>
</html>
2，jq ajax流程
$.ajax()
$.ajax({
url: "/greet", //链接地址，字符串表示
data: {name: 'jenny'}, //需发送到服务器的数据，GET与POST都可以
type: "POST",//"POST" 或 "GET"，请求类型
dataType: "json",//服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
success: function(data) {
//请求成功后，服务器回调的函数
...
}
});
$.post()
//参数类似$ajax
$.post(
"/greet", //链接地址，字符串表示
{name: 'Brad'}, //需要发送到服务器的数据，格式为{A: '...', B: '...'}
function(data) {
//请求成功后，服务器回调的函数
},
"json" //服务器返回数据的格式
);
//2.发送请求到服务器
var name = $('#name').val()
var age = $('#age').val()
var data = {name,age}
$.post('https://www.xxx.com/ajax/echo.php',data)
.then(res=>{
console.log(res)
})
.catch(err=>{
console.log(err)
})
$.get()
三种写法，jq的所有ajax方法都可使用
//同上
//1.回调函数写法
$.get(
"/greet", //链接地址，字符串表示
{name: 'Brad'}, //需要发送到服务器的数据，格式为{A: '...', B: '...'}
function(data) {
//请求成功后，服务器回调的函数
},
"json" //服务器返回数据的格式
);
//2.回调写法
$.get('be.text')
.done(res=>{
console.log(res)//成功之后的回调
})
.fail(err=>{
console.log(err)//失败之后的回调
})
.always(xhr=>{
console.log(xhr)//失败成功都执行
})
//3.promise写法
$.get('be.text')
.then(res=>{
console.log(res)//成功之后的回调
})
.catch(err=>{
console.log(err)//失败之后的回调
})
$.getJSON()
$.getJSON(
"/greet",
{name: 'Brad'},
function(data,sta,xhr) {//请求成功后，服务器回调的函数
//data获取的json对象
//sta是否成功的状态
//xhrjq封装的xhr对象
//补充,JSON.stringify装换json为字符串
},
);
$.getJSON(url, data, func);
因为确定服务器返回json编码的数据，故相较于$.get()不必再指定dataType
$.load()
该方法将服务器加载的数据直接插入到指定DOM中。
其中data如果存在则使用POST方式发送请求，不存在则使用GET方式发送请求。
<div id="ret"></div>
$('#ret').load(
"/greet" .? #?, //地址后空格加上选择器可以选中选择的标签
{name: 'Brad'}
);
$.getScript()
使用 AJAX 请求，获取和运行 JavaScript
$("button").click(function(){
$.getScript("demo_ajax_script.js");
});