基於JS的ajax的實現，JSON和JSONP，基於JQuery的ajax的實現
1.基於JS的ajax的實現
step1: var xmlhttp = XMLHttprequest() #實例化一個對象
step2: xmlhttp.open("") #url地址
step3: xmlhttp.send("name=alex") #請求體的內容 if GET請求 ：send(null)
step4: 監聽：xmlhttp(if ==4:{var context=xmlHttp.responsetext})
GET:ajax具體實現（JS方式）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button onclick="func1()">ajax提交</button>
</body>
<script>
function func1(){
//step1
var xmlhttp=createXMLHttpRequest();
//step4：推薦放到這個位置
xmlhttp.onreadystatechange=function() {//監聽
{#alert(xmlhttp.status);//返回狀態碼#}
if(xmlhttp.readyState==4 && xmlhttp.status==200){
{#alert(xmlhttp.readyState);//查看狀態過程#}
var data=xmlhttp.responseText;
alert(data);
};
}
//step2
xmlhttp.open("GET","/ajax/",true);//打開服務器連接
//step3
xmlhttp.send(null);//發送請求
};
{#處理瀏覽器兼容問題#}
function createXMLHttpRequest(){
var xmlHttp;
//適用於大多數瀏覽器，以及IE7和更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e){
//適用於IE6
try{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e){
//適用於IE5.5，以及更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
</script>
</html>
POST:請求注意事項
POST請求必須設置ContentType請求頭的值為：application/x-www-form-urlencoded。
表單的enctype默認值就是為application/x-www-form-urlencoded，因為默認值就是這個，
當設置了<form>的enctype="application/x-www-form-urlencoded"時，等同於設置了Con
tent-Type請求頭。但在ajax發送請求時，就沒有默認值了，這需要自行設置請求頭：
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
實例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form>
<p>用戶名：<input type="text" name="username" onblur="func1(this)">
<span id="error"></span>
</p>
<p>密碼：<input type="password" name="pwd"></p>
<input type="submit" value="submit">
</form>
</body>
<script>
function func1(self){
var username=self.value;
var xmlhttp=createXMLHttpRequest();
xmlhttp.open("POST","/register/",true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send("username="+username);
xmlhttp.onreadystatechange=function() {
if(xmlhttp.readyState==4 && xmlhttp.status==200){
var s=xmlhttp.responseText;
if (s=="1"){
document.getElementById("error").innerHTML="用戶名已經注冊過了";
}
};
}
}
{#處理瀏覽器兼容問題#}
function createXMLHttpRequest(){
var xmlHttp;
//適用於大多數瀏覽器，以及IE7和更高版本
try{
xmlHttp = new XMLHttpRequest();
} catch (e){
//適用於IE6
try{
xmlHttp = new ActiveXObject("Msxm12.XMLHTTP");
} catch (e){
//適用於IE5.5，以及更早版本
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){}
}
}
return xmlHttp;
}
</script>
</html>
2.JSON和JSONP
JSON與XML比較：
可讀性：XML好；
解碼難度：JSON本身就是Js對象（主場作戰），所以簡單很多；
流行度：xml已經流行很多年，但在AJAX領域json更受歡迎；
js接受python的json對象：
在json的編碼過程中，會存在從python原始類型向json類型的轉換過程，具體的轉換如下：
python json對象
dict object
list，tuple array
str,unicode string
int,long,float number
True true
False false
None null
JSON.parse()
.parse()方法：parse用於從一個字符串中解析出json對象
JSON.stringify()
.stringify()方法：stringify用於從一個對象解析出字符串
示例：
$.post("/jquery/",function(data){
console.log(data);
console.log(typeof data);
data=JSON.parse(data);#parse用於從一個字符串中解析出json對象
console.log(typeof data);
console.log(data["name"]);
});
json示例：//注：字符串必須雙引號，否則不是json
#author：wylkjj
#date：2019/9/6
import json
f=open('text','r')
data=f.read()
data=json.loads(data)
f.close()
print(data["name"])
import json
dic={'name':'eric'}
data=json.loads(data)
print(data["name"])
3.基於JQuery的ajax的實現:(最底層方法：$.ajax())
$.ajax(
url:
type:"POST"
)
$.get()
$.post()
$.getJson():相當於$.get( type:Json)
$.getScript():實時加載，現用現取，不用不加載
兩種書寫方式：
（1）.$.ajax({
url:"/ /",
type:"POST"
})
（2）.$.ajax("",{})
請求數據：data,processDate,contentType,traditional,dataType,sucess
data:當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式（urlencoded?a=1&b=2）
發送給服務端；此外，ajax默認以get方式發送求。
processDate:聲明當前的data數據是否進行轉碼或預處理，默認為true，即預處理；if為false，那么對data：{a:1,b:2}會調用
json對象的toString()方法，即{a:1,b:2}.toString(),最后得到一個[object，
