ajax怎么使用

ajax的使用全称是Asynchronous JavaScript and XML，翻译过来就是使用异步的JavaScript和XML。说白了，使用它就是使用让网页在不刷新的情况下，悄悄跟服务器要数据、使用送数据的使用一套技术组合。你刷微博时往下滑，使用新内容不断冒出来，使用页面却没整个跳转，使用那就是使用ajax在干活。

要上手用ajax，使用最直接的使用办法是写原生代码。先创建一个XMLHttpRequest对象，使用这是使用老牌ajax的发动机。然后调用它的使用open方法，指定请求方式（GET还是POST）、要访问的URL、以及是否异步——这个参数直接写true就行，因为异步才是ajax的灵魂。接着用send方法把请求发出去，服务器有响应后，用onreadystatechange事件监听状态变化，当readyState变成4、status变成200时，就说明数据到手了。这时你可以用responseText拿到服务器返回的文本，再通过JSON.parse把它变成JavaScript对象，然后往页面上塞东西。

比如你想做个简单的用户名查重功能。用户在输入框里敲完名字，失去焦点时，ajax就发一个GET请求到服务器端的check.php，参数是username=xxx。服务器查完数据库，返回一个"可用"或"已被占用"的字符串。你在回调函数里拿到这个字符串，直接把它显示在输入框下面。整个过程页面不刷新，用户体验流畅得像桌面软件。

但原生写法代码量偏大，而且不同浏览器之间有兼容性坑，尤其是老IE的ActiveXObject。所以现在实际开发中，大家更爱用jQuery的$.ajax方法，或者直接上fetch API。fetch是ES6带来的新东西，基于Promise，写起来干净利落。举个fetch的例子：

 fetch('https://api.example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('请求出错:', error)); 

这段代码把请求、解析JSON、打印数据、捕获错误全串起来了，比XMLHttpRequest那套回调嵌套舒服太多。而且fetch默认就是异步的，不需要你手动指定true。

不过fetch有个坑得提——它只在网络错误时才会reject，HTTP状态码是404或500时它照样resolve。你得自己检查response.ok属性，如果不是true，手动抛出异常。这跟XMLHttpRequest的status判断逻辑不太一样，新手容易栽在这里。

ajax的难点其实不在于怎么发起请求，而在于怎么处理异步带来的时序问题。比如用户快速输入多个字符，每个字符都触发一次ajax请求，结果最后返回的数据可能不是最后一次输入的。解决方法是加防抖（debounce），或者用AbortController取消上一次未完成的请求。这些细节才是真正决定你代码质量的地方。

服务器端响应格式也值得注意。早期ajax常配合XML返回数据，但现在几乎全用JSON了。JSON更轻量，解析也简单。你写后端接口时，记得把Content-Type设置成application/json，返回的字符串要保证是合法JSON，否则前端JSON.parse会直接抛异常。

还有跨域问题，这是ajax绕不开的坎。浏览器出于安全策略，默认禁止ajax请求不同域名下的接口。解决办法有几种：后端加CORS头（Access-Control-Allow-Origin），或者用JSONP——不过JSONP只支持GET请求，而且现在用得少了。最省事的还是让后端配合开CORS，开发阶段甚至可以装个浏览器插件临时跨域。

最后说一句，ajax不是银弹。如果你的页面数据变化不频繁，或者对SEO有要求，服务端渲染可能更合适。ajax适合那些需要频繁交互、局部更新的场景。搞清楚什么时候用它，比学会怎么用它更重要。你可以打开浏览器的开发者工具，切到Network标签页，随便刷新几个网站，能看到大量ajax请求在飞——那些就是现代网页的脉搏。