关于Ajax的技术组成与核心原理

偏执的太偏执、 2023-06-23 07:52 31阅读 0赞

1、Ajax  
　　特点：  
　　局部刷新、提高用户的体验度，数据从服务器商加载

2、AJax的技术组成  
　　不是新技术，而是之前技术的整合  
　　Ajax: Asynchronous Javascript And Xml;  
　　　　　　（异步的JavaScript和XML）  
　　包括的技术：JavaScript、XML、CSS、XMLHttpRequest  
　　异步：发送请求以后，不等结果，由回调函数处理。  
　　JavaScript:向服务器发送请求，获得返回结果，更新页面  
　　XML： 用来封装数据

3、Ajax核心原理  
　　XMLHttpRequst对象：通过该对象向服务器发送请求。  
　　它是异步请求的技术，所有现代浏览器都支持（Chrome、IE5+）

1)创建XMLHttpReuest对象  
　　　　非IE浏览器（Mozilla/Safari）：  
　　　　var xhr=new XMLHttpRequest();  
　　　　IE:  
　　　　xhr=new ActiveXObject(“Msxml2.XMLHTTP”);  
　　　　低版本IE:  
　　　　xhr=new ActiveXObject(“Microsfot.XMLHTTP”);  
　　2)XMLHttpRequest对象的属性与方法  
　　　　a)方法：  
　　　　　open(“GET/POST”,URL,true/false):用来向服务器建立连接  
　　　　　　有三个参数:  
　　　　　　参数1：提交方式，post或get  
　　　　　　参数2：请求的URL  
　　　　　　参数3：表示同步或异步请求，true:表示异步请求  
　　　　　　false: 表示同步请求

send(data):发送请求  
　　　　　　参数：提交的内容。

POST方式:data就是提交的参数，send(username=root&password=abc123);

GET方式:send(null)

b)属性：  
　　　　onreadystatechange:设置状态改变时的回调函数，回调函数用来获取服务器数据。

onreadystatechange=function()\{

｝

readyState:服务器状态响应  
　　　　　　状态码：  
　　　　　　0：未初始化  
　　　　　　1：正在加载  
　　　　　　2：加载完成  
　　　　　　3：请求进行中  
　　　　　　4：请求完成

responseText:服务器返回的数据(文本格式)

responseXML:服务器返回的数据（XML格式）

总结：  
使用XMLHttpRequest的步骤：  
　　1)创建XMLHttpRequest对象  
　　2）设置请求的方法及URL  
　　　　xhr.open(“GET/POST”,“url”,true/false),true表示异步请求，false表示同步请求  
　　3)设置状态改变时的回调函数  
　　　　xhr.onreadystatechange=function()\{\}  
　　　　0:未初始化  
　　　　1:正在加载  
　　　　2:加载完成  
　　　　3：请求进行中  
　　　　4：请求完成  
　　4）发送请求  
　　　　xhr.send(data),  
　　　　如果为post提交，则data为提交的数据，如果为get提交，则参数为null即可。

判断用户登录的HTML页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
        pageEncoding="UTF-8"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>登录</title>
    </head>
    <body>
        用户名：<input type="text" name="username" id="username"><br>
        密码:<input type="password" name="password" id="password">
        <a href="javascript:chkUser();">登录</a>
        <div id="res"></div>
    </body>
    
    <script type="text/javascript">
        var xhr;
       /**
       * 创建XMLHttpRequest对象
       */
      function createXMLHttpRequest(){
        //1、创建XMLHttpRequest对象
           if(window.XMLHttpRequest){
               //非IE内核浏览器
             xhr=new XMLHttpRequest();  
           }else{
               //IE浏览器
               try{
                   xhr=new ActiveXObject("Msxml2.XMLHTTP"); 
               }catch(e){
                 //IE低版本
                   xhr=new ActiveXObject("Microsoft.XMLHTTP"); 
               }
           }
      }
       
       /**
       * 发送请求，用来检查用户名、密码是否正确
       */
       function chkUser(){
           
           //1、创建XMLHttpRequest
           createXMLHttpRequest();
           
           //2、获得用户名、密码
           var username=document.getElementById("username").value;
           var password=document.getElementById("password").value;
           
           //3、与服务器建立连接：open
           var url="login?username="+username+"&password="+password;
           //方式1：get提交
           //xhr.open("GET",url,true);
           
           //方式2：post提交
           var url2="login";
           xhr.open("POST",url2,true);
           
           
           //4、设置回调函数，获得服务器响应的数据
           xhr.onreadystatechange=function(){
               /*
               readyState状态码：
               0：未初始化
               1：正在加载
               2：加载完成
               3：请求进行中
               4：请求完成
               */
               if(xhr.readyState==4){
                   //status,200表示响应正常
                   if(xhr.status==200){
                      //alert("从服务器返回的值为："+xhr.responseText);
                      var res=xhr.responseText;
                      if(res=='0'){
                          document.getElementById("res").innerHTML="登录成功";
                      }else{
                          document.getElementById("res").innerHTML="<font color='red'>登录失败</font>";
                      }
                      
                   }else{
                       alert("出现在了异常:"+xhr.response.Text);
                   }
                   
               }
           }
           //5、发送请求
           //方式1：get方式
           //xhr.send(null);
           
           //方式2:post方式：
           //Post提交需要设置http请求头
           xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
           xhr.send("username="+username+"&password="+password);
           
           
       }
     
    </script>
    
    </html>

### 服务端代码： ###

package com.newer.login.web;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    import com.newer.login.bean.User;
    import com.newer.login.service.UserService;
    
    /**
     * Servlet implementation class LoginServlet
     */
    public class LoginServlet extends HttpServlet {
        private static final long serialVersionUID = 1L;
    
        UserService userService = new UserService();
    
        /**
         * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
         *      response)
         */
        protected void doGet(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            doPost(request,response);
        
        }
    
        /**
         * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
         *      response)
         */
        protected void doPost(HttpServletRequest request,
                HttpServletResponse response) throws ServletException, IOException {
            // 1、获得页面参数
            String username = request.getParameter("username");
            String password = request.getParameter("password");
    
            System.out.println("获得请求的参数username:"+username);
            System.out.println("获得请求的参数password:"+password);        
            // 2、封装User对象
            User user = new User();
            user.setUsername(username);
            user.setPassword(password);
    
            // 3、调用服务类，完成用户名、密码的校验
            User u = userService.login(user);
    
            /*
             * 传统方式 if(u!=null){ //表示登录成功 request.setAttribute("user", user);
             * //跳转至首页... }else{ //登录失败，跳转登录页面
             * 
             * }
             */
            // ajax响应
    
            PrintWriter out = response.getWriter();
    
            if (u != null) {
                //0成功，1失败
                out.print(0);
            }else{
                out.print(1);
            }
            out.close();
    
        }
    
    }