原生AJAX的学习 基础知识

基础知识

  知识点梳理见图:

自己动手实践案例

案例1: 访问本地文件

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">更改内容</button>
</div>

<script>
function loadDoc() {

  const myHttp = new XMLHttpRequest();

  myHttp.onload = function () {
    //响应
    document.getElementById("demo").innerHTML = this.responseText
  };
    //这里是访问跟文件同一层级下的文件夹下的某个文件
  myHttp.open("GET", "./demo/aa.txt",true);

  myHttp.send();
}
</script>

</body>
</html>

文件的位置:

  • 代码效果如下:

 

 

案例2:访问服务端数据

<!DOCTYPE html>
<html>
<body>

<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">更改内容</button>
</div>

<script>
function loadDoc() {

  const myHttp = new XMLHttpRequest();
  
  myHttp.onload = function () {
    //响应
    document.getElementById("demo").innerHTML = this.responseText
  };
  console.log(myHttp.getAllResponseHeaders())
  //定义method url 
  myHttp.open("GET", "http://123.207.32.31:5000/test",true);
  
  //设置请求头 - 请求头的设置要在open之后,此处 是设置token,必须是 key-val 形式
  myHttp.setRequestHeader(
    "Authorization","eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6ImNvZGVyd2h5Iiwicm9sZSI6eyJpZCI6MSwibmFtZSI6Iui2hee6p-euoeeQhuWRmCJ9LCJpYXQiOjE2ODYyMDgxMzMsImV4cCI6MTY4ODgwMDEzM30.Ve6T7h4dGuYmk4Lwch1rlr2pvf11XKfr2F2mxl1kAgp46rvgFxjmUqjhRmq90whydPVYTtrvPnWp1aGY50eVtQcY1olqqwr8ZOngERHIyHgzQxY3zEDLrtcZ5nrNqGeAIutc6kDOgGQFPyOvFOnKKMH7Puwgjydv41XGpEEqNus"
  )
  //定义传输数据
  let str = {
    "name": "dingding",
    "password": "4569841"
  }
  //传递参数
  myHttp.send(JSON.stringify(str));
}
</script>

</body>
</html>
  • 代码效果如下:

案例3:自己尝试封装一个AJAX

 等待更新。。。。。。

热门相关:恭喜你被逮捕了   重生当学神,又又又考第一了!   夫人你马甲又掉了   最强反套路系统   特工重生:快穿全能女神