Ajax数据请求
Ajax是一种用于创建交互式Web应用程序的技术，它允许在不刷新整个页面的情况下向服务器发送请求并获取响应。Ajax的全称是Asynchronous JavaScript and XML（异步JavaScript和XML），尽管XML在现代的Ajax应用中并不是必需的，常见的替代格式有JSON。
Ajax通过使用JavaScript与服务器进行异步通信，可以实现以下功能：
异步加载数据：在用户与页面交互的同时，通过Ajax从服务器请求数据，并将数据动态更新到页面上，而不需要刷新整个页面。
动态更新内容：通过Ajax，可以根据用户的操作或事件，仅更新部分页面的内容，而不需要重新加载整个页面。
表单验证与提交：通过Ajax，在用户填写表单后可以在不刷新页面的情况下进行表单验证，并将表单数据发送给服务器。
提供实时反馈：通过Ajax可以实现实时数据更新，例如聊天应用中的消息实时推送功能。
加载外部数据：通过Ajax可以从服务器请求并加载外部数据，例如远程API返回的JSON数据。
<script> function getStyle(obj,attr){ return window.getComputedStyle ? getComputedStyle(obj)[attr] : obj.currentStyle[attr]; } //1. 创建XMLHttpRequest对象 // new XMLHttpRequest() // new ActiveXObject() let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // alert(xhr); //2. 与服务器建立连接 xhr.open('get','http://localhost:8888/test/second',true); //3. 发送请求 xhr.send(); //4. 等待响应 xhr.onload = function(){ let data = JSON.parse(xhr.responseText); console.log(data); } </script>
<script> // //1. 创建XMLHttpRequest对象 同步 // let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); // //2. 与服务器建立连接 （同步） // xhr.open('get','http://localhost:8888/test/second',true); // //3. 发送请求 // xhr.send(); //同步 （等待消息-异步） // //4. 等待响应 // //同步 // xhr.onload = function(){ // console.log(JSON.parse(xhr.responseText)); // } //异步： //1. 创建对象 2. 建立连接 3. 发送（同步） 4. 注册事件（同步） 响应（异步） //1. 创建XMLHttpRequest对象 同步 let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2. 与服务器建立连接 （同步） xhr.open('get','http://localhost:8888/test/second',false); //4. 等待响应 //同步 xhr.onload = function(){ console.log(JSON.parse(xhr.responseText)); } //3. 发送请求 xhr.send(); //同步（等待消息-同步） //同步： //1. 创建对象 2. 与服务器建立连接 4. 注册事件 3. 发送请求 响应回数据 //统一成： 1 2 4 3 </script>
Ajax中get传参
<script> //https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=49055317_42_hao_pg&wd=12&fenlei=256&rsv_pq=0x83ef5202000236c9&rsv_t=be13wbQPabfT5yEnV118zeSur%2B%2FSC8d8l1oKH%2FmvvEDr54hb538gQgfQzEIF&rqlang=en&rsv_enter=1&rsv_dl=tb&rsv_sug2=0&rsv_btype=i&inputT=1136&rsv_sug4=1135 const btn = document.querySelector('input'); //添加事件 btn.onclick = function(){ //1. 创建XMLHttpRequest对象 let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2. 与服务器建立连接 //get请求： 'url?key=value&key=value&key=value' xhr.open('get','http://localhost:8888/test/third?name=树民&age=15',true); //4. 注册事件 xhr.onload = function(){ console.log(JSON.parse(xhr.responseText)); } //3. 发送请求 xhr.send(); } </script>
Ajax中post传参
<script> //post传参是在http协议的请求体中传递。通过send发送 //注：在发送请求前，务必先设置请求头。 //1. 获取页面元素 const btn = document.querySelector('input'); //2. 添加事件 btn.onclick = function(){ //1. 创建XMLHttpRequest对象 let xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //2. 与服务器建立连接 xhr.open('post','http://localhost:8888/test/fourth',true); //4. 注册事件 xhr.onload = function(){ console.log(JSON.parse(xhr.responseText)); } //3. 发送请求 //设置请求头 //'application/x-www-form-urlencoded' ： 表单格式 //'application/json' : json格式 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded'); xhr.send('name=张三&age=18'); } </script>
