Ajax 的“测试是否存在”功能,挺实用的。你也遇到过这种场景:用户在表单里输点东西,比如用户名、手机号啥的,前端得先去后端问一句,“这个数据是不是已经存在了?”用 Ajax 异步求搞定,响应也快,用户体验提升不止一点点。
XMLHttpRequest 是老搭档,搞 Ajax 基本都绕不开它。用 open() 和 send() 发个求,再监听 onreadystatechange 搞定响应,状态码 200 就表示搞定了。
异步通信这块,意思就是求还没回来,你页面其他部分照样能用,不会卡住。比如在登录页输入用户名时,边输边查重,感觉比跳转后一堆提示强太多了。
虽然叫 Ajax,但数据格式不限于 XML,现在用 JSON 比较多,前后端都友好。你后台用的是 C# 吗?那就用 SqlConnection 查数据库就行,把查询结果丢成 JSON 回来。
实例场景就比如输入手机号时,前端用 Ajax 发求,后端 C# 查一下 SQL Server,看看这个手机号在不在数据库里,在的话就提示“已存在”,不在就允许提交。挺常见的需求。
注意 事件,别忘了检查 readyState === 4 和 status === 200 再响应,别一回来就傻傻地执行,还没准备好。
跨域问题也要考虑,尤其是前后端不在一个服务器的时候。你可以试试 CORS,把后端加个响应头就能。,JSONP 也是一招,就是稍微老点。
安全性别忽视。像 CSRF 和 XSS 这些,Ajax 不是万能盾牌。Token 校验、数据清洗这些得做好。性能方面嘛,能缓存就缓存,能合并求就别拆太多。
开发时,用浏览器的开发者工具查求蛮方便的,点开“Network”面板,看一眼求头、响应体,问题基本一眼能看出来。
如果你也在用 Ajax 做数据校验,或者想提升表单的实时反馈,不妨把这套“测试是否存在”的思路用起来。前后端配合好,体验能上一个台阶。