随着互联网的不断发展,前端呈现对后端数据请求的需求也不断增加。页面的用户交互性和动态效果更加丰富,需要后端提供数据支持。而Ajax的出现,也让前端与后端的交互更加顺畅。
那么什么是Ajax呢?它的全称是Asynchronous JavaScript and XML,即异步的JavaScript和XML。它的作用是通过在后台与服务器进行少量数据交换,使页面实现异步更新。简单来说,就是让前端通过js请求后端返回数据,利用js在页面完成数据更新的操作。
function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码 xmlhttp = new XMLHttpRequest(); } else { // IE6, IE5 浏览器执行代码 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("myDiv").innerHTML = this.responseText; } } xmlhttp.open("GET", "ajax_info.txt", true); xmlhttp.send(); }
上面是Ajax请求的基本实现代码。首先,它创建了一个XMLHttpRequest对象,判断浏览器类型后执行对应的操作。在发生状态变化时,它会检查readyState属性,一旦readyState值为4,即请求完成,再检查status属性,确保返回的http状态码为200,然后将返回的数据展示在指定的html元素中。
当然,Ajax并不是只能请求txt文本文件,使用PHP编写的ajax就能够请求PHP后端返回的数据。我们以一个简单的列子来展示:
function showName(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } var xmlhttp=new XMLHttpRequest(); xmlhttp.onreadystatechange=function() { if (this.readyState==4 && this.status==200) { document.getElementById("txtHint").innerHTML=this.responseText; } } xmlhttp.open("GET","ajax.php?name="+str,true); xmlhttp.send(); }
根据输入内容,页面会动态显示请求到的数据。这个请求的方式既可以是GET也可以是POST。
最后,需要注意的是,由于Ajax请求需要抓取、读取、解析和渲染过程,所以它的响应速度不如简单的同步方式。但是,随着技术的不断发展,这个问题已经得到很好的优化,可以保证流畅性不被影响。