AJAX
是異步向服務(wù)器請(qǐng)求數(shù)據(jù),實(shí)現(xiàn)不刷新瀏覽器更新數(shù)據(jù)
組成
異步的JS
xhr對(duì)象
其他JS
服務(wù)器的數(shù)據(jù)
AJAX特點(diǎn)
提高了頁(yè)面渲染速度
提高了用戶體驗(yàn)
不需要插件支持
缺點(diǎn)
1.破壞了瀏覽器前進(jìn)和后退機(jī)制（因?yàn)閍jax自動(dòng)更新機(jī)制
2.一個(gè)Ajax請(qǐng)求多了，也會(huì)出現(xiàn)頁(yè)面加載慢的情況。
3.搜索引擎的支持程度比較低债查。
4.ajax的安全性問(wèn)題不太好（可以用數(shù)據(jù)加密解決）症昏。
AJAX的基本過(guò)程
使用ajax一共有4個(gè)步驟：1.創(chuàng)建ajax硼啤、2.連接服務(wù)器质况、3.發(fā)送請(qǐng)求聪富、4.接受返回值莺丑。
HTTP請(qǐng)求
HTTP請(qǐng)求有兩種方式
GET：用于獲取數(shù)據(jù)，GET是在URL上傳遞數(shù)據(jù)（網(wǎng)址后面的東西）墩蔓，存儲(chǔ)量較少梢莽，安全系數(shù)比較低。
POST：用于上傳數(shù)據(jù)钢拧，POST安全性一般比（GET好一些）蟹漓，容量幾乎是無(wú)限（多用于表單）。
AJAX GET請(qǐng)求 過(guò)程的簡(jiǎn)單封裝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="name">
<input type="text" id="age">
<input type="button" id="btn" value="提交">
<script>
var oa=document.getElementById('name')
var ob=document.getElementById('age')
var obtn=document.getElementById('btn')
obtn.onclick=function(){
ajaxGet("http://localhost/php/php-get.php",function(res){
alert(res)
},{
user:oa.value,
age:ob.value
})
}
function ajaxGet(url,fn,date){ //url 為 接口 fn 為執(zhí)行方法 date 是發(fā)送的數(shù)據(jù)
date=date||{}
var str=""
for(var i in date){
str+=`${i}=${date[i]}&`
}
var d = new Date() //在url上拼接一個(gè)時(shí)間戳 避免瀏覽器緩存問(wèn)題
url=url+"?"+str+"sjc"+d.getTime()
var xhr=new XMLHttpRequest();
xhr.open('get',url);
xhr.onreadystatechange=function(){
if(xhr.status==200&&xhr.readyState==4){
fn(xhr.responseText)
}else if(xhr.status!=200&&xhr.readyState==4){
fn(xhr.status)
}
xhr.send()
}
</script>
</body>
</html>
<?php
$u = @$_GET["user"];
$p = @$_GET["age"];
// $u = @$_POST["user"];
// $p = @$_POST["age"];
echo "收到的數(shù)據(jù)是：".$u."-----".$p
?>
AJAX POST請(qǐng)求 過(guò)程的簡(jiǎn)單封裝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="name">
<input type="text" id="age">
<input type="button" id="btn" value="提交">
<script>
var oa=document.getElementById('name')
var ob=document.getElementById('age')
var obtn=document.getElementById('btn')
obtn.onclick=function(){
ajaxPost("http://localhost/php/php-post.php",function(res){
alert(res)
},{
user:oa.value,
age:ob.value
})
}
function ajaxPost(url,fn,date){
date=date||{}
var str=""
for(var i in date){
str+=`${i}=${date[i]}&`
}
var d = new Date()
url=url+"?"+"sjc="+d.getTime()
console.log(url)
var xhr=new XMLHttpRequest();
xhr.open('post',url);
xhr.onreadystatechange=function(){
if(xhr.status==200 && xhr.readyState==4){
fn(xhr.responseText)
}else if(xhr.status!=200&&xhr.readyState==4){
fn(xhr.status)
}
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(str)
}
</script>
</body>
</html>
<?php
// $u = @$_GET["user"];
// $p = @$_GET["age"];
$u = @$_POST["user"];
$p = @$_POST["age"];
echo "收到的數(shù)據(jù)是：".$u."-----".$p
?>
AJAX GET 和 POST 二合一的封裝
// 1.預(yù)設(shè)函數(shù)的執(zhí)行方式源内，和要傳入的參數(shù)葡粒，及要實(shí)現(xiàn)的功能
// ajax({
// type:"get", //可選，默認(rèn)get
// url:"", //必選
// success:function(){}, //必選
// error:function(){}, //可選膜钓，默認(rèn)不處理
// data:{} //可選嗽交，默認(rèn)不發(fā)
// })
function ajax(options){
// 2.解析參數(shù)，處理默認(rèn)參數(shù)
let {type,url,success,error,data} = options;
type = type || "get";
data = data || {};
// 3.解析要發(fā)送的數(shù)據(jù)
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 4.根據(jù)發(fā)送方式處理url
if(type == "get"){
var d = new Date();
url = url + "?" + str + "sjc=" + d.getTime();
}
// 5.開(kāi)啟ajax
var xhr = new XMLHttpRequest();
xhr.open(type,url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
success(xhr.responseText);
}else if(xhr.readyState == 4 && xhr.status != 200){
// 6.首先保證ajax的過(guò)程結(jié)束了颂斜，如果http給失敗夫壁，才是真正的失敗
error && error(xhr.status);
// if(error) error(xhr.status);
}
}
// 7.根據(jù)發(fā)送方式，決定發(fā)送的信息
if(type == "get"){
xhr.send()
}else if(type == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(str.slice(0,str.length-1));
}
}
AJAX GET/POST 和Jsonp三合一封裝
// 1.預(yù)設(shè)函數(shù)的執(zhí)行方式沃疮，和要傳入的參數(shù)盒让，及要實(shí)現(xiàn)的功能
// ajax({
// type:"get", //可選，默認(rèn)get
// url:"", //必選
// success:function(){}, //必選
// error:function(){}, //可選司蔬，默認(rèn)不處理
// data:{} //可選邑茄，默認(rèn)不發(fā)
// timeout:毫秒數(shù) //可選，默認(rèn)500俊啼，延遲時(shí)間肺缕，超出時(shí)間就出錯(cuò)誤，用在jsonp身上
// })
function ajax(options){
// 2.解析參數(shù)授帕，處理默認(rèn)參數(shù)
let {type,url,success,error,data,timeout} = options;
type = type || "get";
data = data || {};
timeout = timeout || 500;
// 3.解析要發(fā)送的數(shù)據(jù)
var str = "";
for(var i in data){
str += `${i}=${data[i]}&`;
}
// 4.根據(jù)發(fā)送方式處理url
// Jsonp1.處理url和數(shù)據(jù)
if(type == "get" || type == "jsonp"){
var d = new Date();
url = url + "?" + str + "sjc=" + d.getTime();
}
// Jsonp2.區(qū)分jsonp和ajax的功能
if(type === "jsonp"){
var script = document.createElement("script");
script.src = url;
document.body.appendChild(script);
window[data[data.columnName]] = function(res){
success && success(res);
error = null;
}
// Jsonp3.jsonp的失敗(超時(shí))
setTimeout(() => {
error && error("timeout");
success = null;
}, timeout);
}else{
// 5.開(kāi)啟ajax
var xhr = new XMLHttpRequest();
xhr.open(type,url,true);
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
success(xhr.responseText);
}else if(xhr.readyState == 4 && xhr.status != 200){
// 6.ajax執(zhí)行成功 但網(wǎng)絡(luò)出錯(cuò) 才報(bào)錯(cuò)
error && error(xhr.status);
// if(error) error(xhr.status);
}
}
// 7.根據(jù)發(fā)送方式同木，決定發(fā)送的信息
if(type == "get"){
xhr.send()
}else if(type == "post"){
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.send(str.slice(0,str.length-1));//去掉多余的&
}
}
}
AJAX GET/POST 和Jsonp三合一封裝的調(diào)用
ajax({
type:"get", //可選，默認(rèn)get
url:"", //必選
success:function(){}, //必選
error:function(){}, //可選跛十，默認(rèn)不處理
data:{} //可選彤路，默認(rèn)不發(fā)
timeout:毫秒數(shù) //可選，默認(rèn)500芥映，延遲時(shí)間洲尊，超出時(shí)間缝裤，出錯(cuò)誤，用在jsonp身上
})
