Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
如何使用
1.原生JavaScript
创建XMLHttpRequest 对象
var xmlhttp;
if (window.XMLHttpRequest){
// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
xmlhttp=new XMLHttpRequest();
}else{
// IE6, IE5 浏览器执行代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
向服务器发送请求
GET请求
xmlhttp.open("GET","/a/b/c.php?page=1&sex=false",true);
xmlhttp.send();
POST请求
xmlhttp.open("POST","/a/b/c_post.php",true);
//向请求添加 HTTP 头。
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("par1=value1&par2=value2");
监听请求成功的回调函数
xhr.onreadystatechange = function(){
if(xhr.status == 200 && xhr.readyState == 4){ //成功了
//拿到请求结果
console.log(JSON.parse(xhr.responseText));
}
}
好麻烦有木有,但是有灵魂
2.jQuery
$.get("test.php?a=1&b=2",function(data,status){
alert("数据: " + data + "状态: " + status);
});
$.post("/post.php",
{
name:"123"
},
function(data,status){
alert("数据:" + data + "状态: " + status);
});
$.ajax({
type: "GET",
url: "test.json",
data: {
username:"123", content:"123",
dataType: "json",
success: function(data){
//拿到data干点想干的
}
});
3.axios
cdn引用
axios .get('path?id=123') .then(response => (
console.log(response);
)) .catch(function (error) {
// 请求失败处理 console.log(error);
});
当然也可以
axios.get('/user',
{
params: { ID: 12345 }
}) .then(function (response) {
console.log(response);
}) .catch(function (error) {
console.log(error);
});
axios.post('/path',
{ name: '123',
age: 18
}) .then(function (response) {
console.log(response);
}) .catch(function (error) {
console.log(error);
});
执行多个并发请求
function getOne() {
return axios.get('onePath');
}
function getOther() {
return axios.get('otherPath');
}
axios.all([getOne(), getOther()]) .then(
axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));
其他的当然也有很多啦,小白才疏学浅
如有不当,敬请指正,谢谢