ajax通过url获取服务器数据库数据

ajax的通过全称是Asynchronous JavaScript and XML，翻译过来就是取服异步JavaScript和XML。它的数据核心能力就一句话：在不刷新整个页面的情况下，向服务器要数据。库数

我去年接手了一个内部管理系统，通过那个系统有个毛病——每次点一下筛选按钮，取服整个页面就白屏加载，数据转圈转个两三秒。库数用户骂了三个月。通过后来我用ajax把筛选功能重构了，取服点完按钮数据就悄悄更新，数据页面纹丝不动。库数那种感觉就像把一扇吱呀作响的通过铁门换成了静音滑轨。

具体怎么实现？取服先看一个最基础的GET请求写法：

var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/users?page=1', true); xhr.onreadystatechange = function() {  if (xhr.readyState === 4 && xhr.status === 200) {  var data = JSON.parse(xhr.responseText); renderTable(data); } }; xhr.send();

这段代码干了三件事：创建一个请求对象，告诉它去哪个url取数据，数据然后等服务器回应。那个true参数是关键——它代表异步，意思是浏览器不会傻等服务器回复，你可以继续操作页面。等数据到了，onreadystatechange这个监听器会主动通知你。

但这里有个容易踩的坑。你请求的url如果是/api/users，服务器返回的通常不是直接能用的数据，而是JSON字符串。你得用JSON.parse把它转成JavaScript对象。我见过不少新手直接拿字符串去渲染表格，结果页面上显示一堆带花括号的原文。

再说说url本身。ajax请求的url决定了你访问的是哪个接口。比如你想从数据库拿用户列表，后端会提供一个类似/api/users的接口。但数据库不能直接暴露在浏览器端，所以中间必须有个后端程序做翻译。ajax请求打到后端，后端再操作数据库，然后把结果原路返回。

有一次我调试一个bug，发现ajax请求一直报404。排查了半天，原来是url写成了/api/user，而后端定义的是/api/users。少一个字母，整个请求就废了。这种事情很蠢，但确实会发生。所以写url一定要跟后端开发对清楚，最好直接复制他的接口文档。

服务器返回的数据格式也值得注意。有些老系统返回的是XML，但现在的接口99%都返回JSON。JSON的好处是轻量、易解析，而且JavaScript原生支持。你只需要关心responseText字段，它包含了服务器响应的全部文本内容。

实际操作中，你还会遇到跨域问题。如果你的页面在http://localhost:3000，而ajax请求发往http://api.example.com，浏览器会拦下这个请求。这是安全机制，防止恶意网站偷数据。解决办法是让后端开启CORS（跨域资源共享），或者在开发环境配个代理。

最后提醒一句：ajax拿到的数据是服务器某个时刻的快照。如果你在页面上改了数据，没有再次发送请求，那页面显示的和数据库里的可能已经不一致了。所以做编辑操作时，记得先用ajax把新数据提交给服务器，再根据返回结果更新页面。顺序别搞反。

写ajax代码不难，难的是理解它背后的请求-响应模型。你发一个请求，服务器处理，返回结果，你更新页面。这个过程是单向的，服务器不会主动推送数据给你。如果你想要实时数据，比如股票价格，那就得用WebSocket了——那是另一个话题。