Ajax概念HTTP请求概念Ajax的原生和jQuery实现跨域知识

Posted 2020-12-22 baimeishaoxia

1、Ajax（读A—jax不是阿贾克斯）原理图：

2、HTTP请求概念

<script>
document.getElementById("search").onclick = function() { 
   var request = new XMLHttpRequest();
   request.open("GET", "server.php?number=" + document.getElementById("keyword").value);
   request.send();
   request.onreadystatechange = function() {
      if (request.readyState===4) {
         if (request.status===200) { 
            document.getElementById("searchResult").innerhtml = request.responseText;
         } else {
            alert("发生错误：" + request.status);
         }
      } 
   }
}

document.getElementById("save").onclick = function() { 
   var request = new XMLHttpRequest();
   request.open("POST", "server.php");
   var data = "name=" + document.getElementById("staffName").value 
                     + "&number=" + document.getElementById("staffNumber").value 
                     + "&sex=" + document.getElementById("staffSex").value 
                     + "&job=" + document.getElementById("staffJob").value;
   request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
   request.send(data);
   request.onreadystatechange = function() {
      if (request.readyState===4) {
         if (request.status===200) { 
            document.getElementById("createResult").innerHTML = request.responseText;
         } else {
            alert("发生错误：" + request.status);
         }
      } 
   }
}
</script>

3、JSON语法规则

4、jQuery实现Ajax

5、跨域