原生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
等待更新。。。。。。