JavaScript和jQuery异步通信

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>