原生AJAX的学习

2023/6/8 18:22:07

编程Tag： js

本文主要是介绍原生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案例浏览器报错：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>

代码效果如下：

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

等待更新。。。。。。

这篇关于原生AJAX的学习的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

原生AJAX的学习

基础知识

自己动手实践案例

案例1： 访问本地文件

案例2：访问服务端数据

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

相关编程文章

案例1：访问本地文件