简述Ajax，以及使用原生js书写Ajax案例

╰+攻爆jí腚メ 2021-11-23 04:26 290阅读 0赞

> Ajax，这里的第一个字母A值的是asynchronous，意思是异步的，j值的就是JavaScript，第二个a是and，x值的是xml  
> 合在一起就是 异步的javascript和xml

**什么是异步的？**

跟java中的同步（synchronized）是相反的。什么是同步呢？以前的服务器请求，都必须是第一个请求结束了，第二个请求才能开始，第二个请求结束了，才能开始第三个请求。

什么是异步呢，异步就是第一个请求发出之后，不用等待第一个请求的结果，整个页面不会刷新。第一个请求没有结束的情况下我可以发出第二个请求。  
ajax可以实现无刷新技术对服务器的请求。

无刷新，就减少了页面一晃而逝的等待时间，用户的体验会更好，并且有效的利用了带宽资源。

**如何实现Ajax呢？**

js中有一个核心对象，XmlHttpRequest。这个是ajax的核心类，通过这个对象我们就可以创建ajax并通过他的方法发送请求。  
他有两个重要的方法：  
open()方法可以跟tomcat服务器上的请求建立连接。  
send():让js代码发出reqeust请求。

**ajax怎么接受服务器端的响应？**

XmlHttpRequest对象有这样的几个属性：

readyState = =0: XmlHttpRequest刚被创建  
readyState= =1：XmlHttpRequest准备发出请求  
readyState= =2：服务器开始解析请求  
readyState= =3：服务器开始做出响应  
readyState= =4：响应接收。

status= =400：携带数据有问题  
status= =404：没有找到服务器  
status= =500：服务器内部出错  
status= =200:服务器响应了正常的数据

**通过以上这些就可以创建出Ajax 的第一个案例：**

例如:注册时候当我们的鼠标光标离开用户名输入框的时候就提示该用户名是否可以注册。  
jsp页面和发送Ajax请求的js代码如下所示：

<html>
      <head>
        <title>$Title$</title>
        <script type="text/javascript"> function doAjax(){ //1.创建出ajax核心对象XmlHttpRequest var xhr=new XMLHttpRequest(); //2.建立连接，第一参数是请求的类型，第二参数，请求谁。 var username=document.getElementById("username").value; xhr.open("get","${pageContext.request.contextPath}/user/regist.do?name="+username); //3.ajax的回调函数，告知xhr做完服务器端事情后，做什么 xhr.onreadystatechange=function(){ //表示xhr得到了响应 if(xhr.readyState==4){ //服务器响应的状态码，响应的数据是正常的。 if(xhr.status==200){ //服务器端响应的0或者1 var result=xhr.responseText; if(result=="0"){ //在span里面增加错误提醒 document.getElementById("mess").innerHTML="用户名已存在"; }else{ document.getElementById("mess").innerHTML="该用户可以注册"; } } } } //4.发出请求 xhr.send(); } </script>
      </head>
      <body>
      <form>
        用户名:<input type="text" name="username" onblur="doAjax()" id="username"/><span id="mess"></span><br/>
        密码:<input type="password"/><br/>
        <input type="submit"/><br/>
      </form>
      </body>
    </html>

请求的服务器端代码为：  
此时返回的不再是一个页面，而是通过输出流返回一个字符：

package com.baizhi.action;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    import java.io.PrintWriter;
    
    @Controller
    @RequestMapping("/user")
    public class UserController { 
        @RequestMapping("/regist")
        //这个方法时接收ajax请求的，响应的数据不是一个jsp，而是一个标记。0：不可以注册，1：可以注册
        public void regist(String name, HttpServletResponse response) throws IOException { 
         
            System.out.println("-------------------"+name+"----------------------");
            //通过response的out给用户响应信息。
            PrintWriter out = response.getWriter();
            //判断收的name是否是zhangsan，是的话就响应0.不是的话就响应1
            if(name.equalsIgnoreCase("zhangsan")){ 
                out.print("0");
            }else{ 
                out.print("1");
            }
            out.flush();
        }
    }

这样就完成了一个原生js实现的ajax操作，但这其中有太多太多重复性代码了，使用jQuery开发ajax会使我们的代码优化许多，下一篇讲解.