Ajax基础 - 掘金

Ajax简介

什么是Ajax

Ajax===>Asynchronous Javascript And XML
Ajax 是一个令人误导的名称。Ajax 应用程序可能使用 XML 来传输数据，但将数据作为纯文本或 JSON 文本传输也同样常见。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面

我们学习Ajax可以干什么

可以在不刷新页面更新页面的时候拿到数据
在页面加载后从服务器请求数据
在页面加载后从服务器接收数据
在后台向服务器发送数据

Ajax是如何工作的

网页中发送的一个事件(页面加载，按钮点击)
由JavaScript创建XMLHttpRequest对象
XMLHttpRequest对象向web服务器发送请求
服务器处理该请求
服务器将响应发送回网页
由JavaScript读取响应
由JavaScript执行正确的动作，比如更新页面等

XMLHttpRequest 对象

所有现代浏览器都支持 XMLHttpRequest 对象。

XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。

<!DOCTYPE html>
<html>
<body>
<!--<div>用于显示来自服务器的信息-->
<div id="demo">
    <!-- <button> 调用函数（当它被点击）-->
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">修改内容</button>
</div>

<script>
    loadDoc()
    function loadDoc(){
        //实例化ajax请求
        let xhttp=new XMLHttpRequest()
       	xhttp.onreadystatechange=function(){
            //判断是否成功，成功的话就执行里面修改内容
            if(this.readyState==4&&this.statue==200){
 //修改内容             
                document.getElementById('dome').innerHTML=this.responseText
            }
        }
        //xhttp.poen('请求方式','请求地址')
        xhttp.open('GET','http://www.liulongbin.top:3006/api/addbooks')
        xhttp.send()
    }
</script>

</body>
</html>

XMLHttpRequest 对象方法

方法	描述
new XMLHttpRequest()	创建新的XMLHttpREquest对象
abort()	取消当前请求
getAllResponseHeaders()	返回头部信息
getResponseHeader()	返回特定的头部信息
open(method,url,async,user,psw)	规定请求： method:请求类型(默认GET) url:请求的地址 async:true(异步)或false(同步) user:可选的用户名称 psw:可选的密码
send()	将请求发送到服务器，用于Get请求
send(string)	将请求发送到服务器，用于POST请求
setRequestHeader()	向要发送的报头添加标签/键值对

XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。0：请求未初始化1：服务器连接已建立2：请求已收到3：正在处理请求4：请求已完成且响应已就绪
responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号200: "OK"403: "Forbidden"404: "Not Found"
statusText	返回状态文本（比如 "OK" 或 "Not Found"）

GET请求

<!DOCTYPE html>
<html>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">请求数据</button>

<p id="demo"></p>

<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "/demo/demo_get.asp", true);
  xhttp.send();
}
</script>

</body>
</html>

POST请求

<!DOCTYPE html>
<html>
<body>

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc()">请求数据</button>

<p id="demo"></p>
 
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = this.responseText;
    }
  };
  xhttp.open("POST", "/demo/demo_post2.asp", true);
  xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhttp.send("fname=Bill&lname=Gates");
}
</script>

</body>
</html>