【从0到1】重识前端之AJAX
简介 AJAX asynchronized javascript and XML(异步的javascript XML数据) AJAX = 异步 JavaScript 和 XML。 由来: 在ajax发明之初,主要用于请求XML数据,但是随着技术发展,ajax请求传输的数据格式逐渐被JSON格式替代,但是名字还是ajax 区别: ajax是一种前端开发的请求方法,ajax请求和普通的页面请求最大的区别是: 1,发起方式不同,普通的页面请求通过点击a标签,表单提交,或直接在地址栏输入url地址回车发起,而ajax请求通过页面中的js代码发起。 2,普通的页面请求,浏览器在收到响应时,会直接在页面中打开响应数据,而ajax请求浏览器在收到响应后,会将收到的数据交给本页面的js代码进行处理,而页面不发生跳转。(所以说ajax请求是非跳转式请求) //---------------点击页面按钮btn1发送请求------------------------------ const btn1 = document.getElementById("btn1"); btn1.onclick = e=>{ // XMLHttpRequest类,用于发起ajax请求。 // 1,创建xhr对象。 const xhr = new XMLHttpRequest(); // 2, xhr对象的.onreadystatechange事件,当请求状态发生变化时触发。 // xhr对象刚创建成功时处于初始状态。设置了请求地址、请求方式和请求数据时,变为就绪状态。请求发出之后,变为等待状态,收到响应之后,变为完成状态。 xhr.onreadystatechange = e=>{ // xhr对象的readyState属性表示当前请求的状态,为4时是完成状态。 if(e.target.readyState==4){ // xhr的responseText属性表示请求到的数据。 const data = JSON.parse(xhr.responseText); console.log(data); } } //3,设置请求方式和请求地址 xhr.open("POST","/test"); xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4,设置请求数据(请求体的数据)并发送。 xhr.send("name=sunhuayu&age=23"); } 第一种方式 // jquery的ajax请求支持promise $.post("/test",{name:"sun",age:11}) .then(res=>{ console.log(res); }) .catch(err=>{ console.log(err); }); 第二种方式 // $.get用于发起一个请求方式为get的ajax请求。参数和POST请求一样。 $.get("/get-test") .then(res=>{ console.log(res); }); 第三种方式 // $.ajax,用于发起一个可以高度自定义的ajax请求。 $.ajax({ method:"POST", url:"/test", data:{name:"sun"}, success(res){ console.log(res); }, error(err){ console.log(err); } }); 4,ajax全局配置 // ajax全局配置,参数和$.ajax方法的对象一样,通过全局配置设置的内容会作用到页面中所有的ajax请求。 $.ajaxSetup({ error(err){ alert("您的网络异常"); } }); 我的个人博客:http://www.eotodo.com