基于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(),最后得到一个