• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax技术组成与核心原理分析

    本文主要为大家分析了Ajax技术组成原理,供大家参考,具体内容如下

    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=rootpassword=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();
    
      }
    
    }
    

    您可能感兴趣的文章:
    • ajax 技术和原理分析
    • jQuery之ajax技术的详细介绍
    • Ajax技术(WEB无刷新提交数据)-
    • php+ajax实现无刷新动态加载数据技术
    • Tab页界面,用jQuery及Ajax技术实现
    • Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
    • 利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
    • 落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
    • 使用ajax技术无刷新动态调用新浪股票实时数据
    • 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
    上一篇:关于Ajax技术中servlet末尾的输出流
    下一篇:Ajax 异步加载解析
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax技术组成与核心原理分析 Ajax,技术,组成,与,核心,