原生AJAX的学习

基础知识 知识点梳理见图: 自己动手实践案例 案例1: 访问本地文件 <!DOCTYPE html> <html> <body> <div id="demo"> <h1>XMLHttpRequest 对象</h1> <button type="button" onclick="loadDoc()"> …

基础知识

  知识点梳理见图:

原生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>

文件的位置:

原生AJAX的学习

  • 代码效果如下:

原生AJAX的学习

  • 如果本地测试报错的话,可以看这篇文章原生AJAX案例浏览器报错:Cross origin requests are only supported for protocol

案例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>
  • 代码效果如下:

原生AJAX的学习

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

等待更新。。。。。。

                       

点击阅读全文

上一篇 2023年 6月 9日 pm8:49
下一篇 2023年 6月 9日 pm8:50