前端 AJAX

ajax

使用

• ajax异步的JavaScript和xml，异步刷新技术
• ssm框架会把json数据自动封装进pojo
• 无需加载整个网页的基础上，能够更新部分网页的技术
• 不是编程语言，是用于创建更快更好以及交互性更强的web应用程序技术
• 当你在搜索框内输入关键字时，JavaScript能把这些数据发送到服务端，然后服务端返回一个搜索建议的列表
• 通过在后台进行是少量的数据交换，实现异步局部更新
• 将文本输出的值发送给服务器，接受服务器返回的值

可以做什么

• 输入用户名时检测用户是否已经存在
• 登陆时提示用户名和密码错误
• 删除数据行时，将行数据发送到后台，后台在数据库中删除，数据库删除成功后，在页面dom中将数据行也删除
• 一条产业链：h5 html 手机端 客户端 小程序
• jq有好多js的库，可以提供js的ajax xmlhtmlrequest jq就是一个封装库，一个搬运工 https://jquery.com/download/ 下载地址

底层原理

ajax请求和相应视图

创建XHR对象 XMLHttpRequest
XHR对象是一个javascript对象，它可以在用户没有感觉的情况下，就像背后运行的一根小线程一般，和服务器进行数据交互
AJAX就是通过它做到无刷新效果的

<script>
    var xmlhttp =new XMLHttpRequest();
    document.write(xmlhttp);
</script>

设置响应函数

XHR对象的作用是和服务器进行交互，所以既会发消息给服务器，也能接受服务器返回的响应。
当服务器响应回来的时候，调用怎么处理呢？
通过 xmlhttp.onreadystatechange=checkResult 就可以指定用checkResult 函数进行处理。

设置并发送请求

通过open函数设置背后的这个小线程，将要访问的页面url ，在本例中就是
    /study/checkName.jsp
xmlhttp.open("GET",url,true);
通过send函数进行实际的访问 
xmlhttp.send(null);

null表示没有参数，因为参数已经通过“GET" 方式，放在url里了。
只有在用"POST"，并且需要发送参数的时候，才会使用到send。
类似这样：
xmlhttp.send("user="+username+"&password="+password)

处理响应信息

在checkResult 函数中处理响应
 
function checkResult(){
  if (xmlhttp.readyState==4 && xmlhttp.status==200)  
     document.getElementById('checkResult').innerHTML=xmlhttp.responseText;
}
 
xmlhttp.readyState 4 表示请求已完成
xmlhttp.status 200 表示响应成功
xmlhttp.responseText; 用于获取服务端传回来的文本
document.getElementById('checkResult').innerHTML 设置span的内容为服务端传递回来的文本

1. 创建XHR对象
2. 设置响应函数
3. 设置要访问的页面
4. 发出请求
5. 当服务端的响应返回，响应函数被调用。
6. 在响应函数中，判断响应是否成功，如果成功获取服务端返回的文本，并显示在span中。