1、原生语法
1.1 五步骤
get
function ajaxGet() {
//1.创建对象
let xmlhttp = new XMLHttpRequest();
//4.当服务器响应已做好被处理的准备时所执行的任务
xmlhttp.onreadystatechange = function() {
//当服务器请求完成,响应就绪,这里会做四次请求
if (xmlhttp.readyState === 4) {
//5.服务器返回请求状态
if (xmlhttp.status === 200) {
console.log(xmlhttp.responseText);
}
}
}
//2.向服务器发送请求
/**
*第一个参数为请求方式(GET 或 POST)
*第二参数为 url
*第三参数为 true(异步)或 false(同步)
*/
xmlhttp.open("get","/try/ajax/ajax_info.txt",true);
//3.将请求发送到服务器,send() 为 GET
xmlhttp.send();
}
post
function ajaxPost() {
let xmlhttp = new XMLHttpRequest();
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.onload = function() {
console.log(xmlhttp.responseText);
}
xmlhttp.open("post","/try/ajax/ajax_info.txt",true);
xmlhttp.send('username=zhangsan');
}
如果来自服务器的响应并非 XML,请使用 responseText 属性
如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性
onreadystatechange 事件
readyState
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status
200: “OK”
404: 未找到页面
参数:
get 请求的参数直接拼接在 url 地址中
xmlhttp.open('get',url + '?num=5',true);
post 请求的参数写在 send 方法中
xmlhttp.send('num=5')
1.2 封装get
function get(url, callback) {
let xReq = new XMLHttpRequest();
//当请求加载成功调用指定函数
xReq.onload = function() {
callback(xReq.responseText);
}
xReq.open('get', url, true);
xReq.send();
}
//调用get请求
get('./3.原生语法.txt', function(res) {
console.log(res);
})
2、jQuery 语法
2.1 $.load()
$(selector).load(url,callback)
必需的 url 参数规定加载的 URL
可选的 callback 参数是 load() 方法完成后所执行的回调函数
$("button").click(function(){ $("#div1").load("https://api.ixiaowai.cn/tgrj/index.php",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部内容加载成功!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
responseTxt: 调用成功时的结果内容
statusTxt: 包含调用的状态
success: 成功 //实际开发中只考虑 success
error: 失败
xhr:经过jQuery封装的XMLHttpRequest对象 //一般不会用到,默认
2.2 $.get()
通过 HTTP GET 请求从服务器上请求数据
$.get(url,data,callback)
必需的 url 参数规定加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合
可选的 callback 参数是 get() 方法完成后所执行的回调函数
$("button").click(function(){
$.get({
url: 'https://autumnfish.cn/api/hero/simple',
data:{
name: '提莫'
},
success: function(data,status) {
alert("数据: " + data + "\n状态: " + status);
}
});
});
//迅捷斥候
2.3 $.post()
通过 HTTP POST 请求向服务器提交数据
$.post(url,data,callback)
必需的 url 参数规定加载的 URL
可选的 data 参数规定与请求一同发送的查询字符串键/值对集合 //不常用
可选的 callback 参数是 post() 方法完成后所执行的回调函数
$("button").click(function(){
$.post({
url: 'https://autumnfish.cn/api/user/check',
data: {
username: '张三'
},
success: function(data) {
console.log(data)
}
});
})
//查询是否可以注册
2.4 $.ajax()
$.ajax({
url: //url 地址,
type: //规定请求的类型(GET 或 POST),
dataType: //服务器响应回来的数据以什么类型处理(json,script,php...),
data: {} //发送到服务器的数据,
headers: { //获取请求头参数
Accept: "application/json; charset=utf-8",
//设置 dataType 后,会去 accepts 属性(此属性会预置一些常用类型)中直接拿相应的类型添加到 Accept 中
token: //设置值给后端
}
success(result,status,xhr): //请求成功时运行的函数
//success: function(res){},
async: false //同步请求
})
3、FromData 对象
jquery
<!-- 隐藏一个input -->
<input type="hidden" name="id" id="heroId" />
let id = location.search.split('=')[1]
$('#heroId').val(res.data.id)
//获取第一个form表单
let fd = new FormData($('form')[0])
//添加一个 name
fd.append('id',id)
$.ajax({
type: 'post',
url: 'http://localhost:4399/hero/add',
data: fd,
contentType: false,
processData: false,
success(res) {
if (res.code === 201) {
alert(res.msg)
location.href = './index.html'
} else alert(res.msg)
}
})
原生
let fd = new FormData(document.querySelector('form'));
//发送ajax请求.
let xhr = new XMLHttpRequest();
xhr.open('post','http://localhost:4399/hero/add');
//注意:如果你传递的数据是FormData那就不需要设置请求头
xhr.onload = function(){
console.log(xhr.response);
}
xhr.send(fd);//fd是FormData对象.