JavaScript异步通信
<script type="text/javascript">
// 1.创建xjax对象
let xmlHttp = null;
// 2.针对不同浏览器对ajax对象初始化
if(window.XMLHttpRequest){
//高版本浏览器,得到网页ajax对象
xmlHttp = new window.XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject("Mircrosoft.XMLHTTP")
}
// 3.监听ajax对象状态吗的改变
// 当通信对象状态吗改变时,则会调用onreadystatechange
console.log(xmlHttp.readyState)
xmlHttp.onreadystatechange = function(){
console.log("当前值"+xmlHttp.readyState)
}
// 4.初始化连接
xmlHttp.open("GET","data.txt",true)
// 5.发送请求
xmlHttp.send();
</script>
jQery异步通信
<div>默认内容</div>
<div>默认内容</div>
<p>刷新</p>
<script type="text/javascript">
$("p").click(function(){
//第一个参数请求路径url,
//第二个参数请求方式:不写为get,写{}为post
//第三个参数回调函数可以不写
$("div").load("data.txt",function(data,statuscode,xmlhttp){
console.log(data,statuscode,xmlhttp)
})
})
</script>
<div>默认内容</div>
<div>默认内容</div>
<p>刷新</p>
<script type="text/javascript">
$("p").click(function(){
$.get("data.txt",function(data,statuscode,xmlhttp){
console.log(data,statuscode,xmlhttp)
})
$.post("data.txt",{"name":"pyhton"},function(data,statuscode,xhr){
console.log(data,statuscode,xhr)
})
})
</script>
jQuery的ajax异步通信
$.ajax({
url:" ",
type:" ",
success:function(data){ },
error:function(data){ },
})
<div>默认内容</div>
<div>默认内容</div>
<p>刷新</p>
<script type="text/javascript">
$("p").click(function(){
$.ajax({
//问号拼接路径 &隔开
// url:"data.txt?name=python&age=20",
url:"data.txt",
data:{"name":"python","age":20},
// 跨域请求
// dataType:"jsonp",
type:"get",
success:function(data,satus,xhr){
$("div").text(data)
console.log(data,status,xhr)
},
error:function(){
console.log("++++++")
}
})
})
</script>