ajax发送get请求 · 学习AJAX

[TOC] >[success] # ajax发送get请求 <br/> >[success] ## 前端代码 <br/> ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script> window.onload = function(){ document.querySelector('input').onclick = function(){ // 1. 创建对象 var xhr = new XMLHttpRequest(); // 2. 设置请求行(get请求数据写在url后面) xhr.open('get', 'getData.php?name=rose&skill=swim'); // 3. 设置请求头(get请求可以省略,post不发送数据也可以省略) // 3.5 注册回调函数 xhr.onload = function(){ // 获取数据 console.log(xhr.responseText); // 修改页面的dom元素 document.querySelector('h3').innerText = xhr.responseText; } // 4. 请求主体发送(get请求为空，或者写null，post请求数据写在这里，如果没有数据，直接为空或者写null) xhr.send(null); } } </script> </head> <body> <h2>点击的时候发送请求报文 --不刷新页面</h2> <input type="button" value="get请求"> <h3></h3> </body> </html> ~~~ <br/> >[success] ## 后端代码 <br/> ~~~ <?php // 原封不动的返回发送过来的数据 print_r($_GET); // 延迟一会 sleep(2); ?> ~~~