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();

     }

 }

关于Ajax的技术组成与核心原理的更多相关文章

  1. 《大型网站技术架构：核心原理与案例分析》【PDF】下载

    <大型网站技术架构:核心原理与案例分析>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062557 内容简介 本书通过梳理大型网站 ...

  2. 阅读《大型网站技术架构：核心原理与案例分析》第五、六、七章，结合《XXX重大技术需求征集系统》，列举实例分析采用的可用性和可修改性战术，将上述内容撰写成一篇1500字左右的博客阐述你的观点。

    这三章主要讲述的是网站的可用性.伸缩性和可扩展性. 首先,网站的可用性描述网站可有效访问的特性,相比于网站的其他非功能特性,网站的可用性更容易引起人们的注意,尤其是大型网站的可用性,如果大公司的网站出 ...

  3. web技术发展历程--读《大型网站技术架构_核心原理与案例分析》

    1 早期的web服务 2 CGI程序的出现.发展.凋零到MVC的兴起 CGI:通用网关接口技术. 随着CGI技术的出现,web服务端可以通过不同的用户请求产生动态页面内容. web服务器将请求数据交给 ...

  4. 【转】分布式环境下5种session处理策略（大型网站技术架构：核心原理与案例分析 里面的方案）

    前言 在搭建完集群环境后,不得不考虑的一个问题就是用户访问产生的session如何处理.如果不做任何处理的话,用户将出现频繁登录的现象,比如集群中存在A.B两台服务器,用户在第一次访问网站时,Ngin ...

  5. Docker容器技术的核心原理

    目录 1 前言 2 docker容器技术 2.1 隔离:Namespace 2.2 限制:Cgroup 2.3 rootfs 2.4 镜像分层 3 docker容器与虚拟机的对比 1 前言 上图是百度 ...

  6. atitit.ajax上传文件的实现原理 与设计

    atitit.ajax上传文件的实现原理 与设计 1. 上传文件的三大难题 1 1.1. 本地预览 1 1.2. 无刷新 1 1.3. 进度显示 1 2.  传统的html4  + ajax 是无法直 ...

  7. SPA 路由三部曲之核心原理

    为了配合单页面 Web 应用快速发展的节奏,近几年,各类前端组件化技术栈层出不穷.通过不断的版本迭代 React.Vue 脱颖而出,成为当下最受欢迎的两大技术栈. 仅 7 个月的时间,两个技术栈的下载 ...

  8. 【算法】(查找你附近的人) GeoHash核心原理解析及代码实现

    本文地址 原文地址 分享提纲: 0. 引子 1. 感性认识GeoHash 2. GeoHash算法的步骤 3. GeoHash Base32编码长度与精度 4. GeoHash算法 5. 使用注意点( ...

  9. 高性能消息队列 CKafka 核心原理介绍（上）

    欢迎大家前往腾讯云技术社区,获取更多腾讯海量技术实践干货哦~ 作者:闫燕飞 1.背景 Ckafka是基础架构部开发的高性能.高可用消息中间件,其主要用于消息传输.网站活动追踪.运营监控.日志聚合.流式 ...

随机推荐

  1. POJ 模拟题集合

    http://www.cppblog.com/Uriel/articles/101592.html 感觉这个暑假没有去年有激情啊,,,还没到状态就已经块上学了,,, 真是弱暴了,,,找几道模拟题刷刷. ...

  2. 输入框提示--------百度IFE前端task2

    第一版本: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <tit ...

  3. jquery mobile touch 实例

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  4. twemproxy 安装

    twemproxy 安装 1. 获取安装包 shell> wget http://ftp.gnu.org/gnu/autoconf/autoconf-2.69.tar.gz shell> ...

  5. Css3小技术

    圆角border-radius border-radius:length *注: 这是一个缩写,相当于四个角设置同样的值,用px或者百分比都可以,想要成为圆形,就用50%,你也可以单独设置每个角,语法 ...

  6. HTML&CSS基础学习笔记1.14—有序列表及列表嵌套

    我们上篇讲到了无序列表,那么今天就来看看有序列表和他们的组合嵌套使用吧. 有序列表 现在我们要做那堆杂事了,但是发现这么多杂事,先做哪个好呢?于是我们给这堆杂事弄个优先级排序,让我们能够按照顺序做下去 ...

  7. EAT/IAT Hook

    标 题: EAT/IAT Hook 作 者: Y4ng 时 间: 2013-08-21 链 接: http://www.cnblogs.com/Y4ng/p/EAT_IAT_HOOK.html #in ...

  8. repo init 时gpg: 无法检查签名:找不到公钥

    i found a solution here: http://www.marshut.com/wrrts/repo-release-1-12-4.html Sorry, I realized tod ...

  9. Qt构建工具QBS之零 —— QBS 概览

    本系列文章起因 自己非常喜欢 QT 这个框架, 使用 QT 这几年, IDE 一直是使用的 QT 自带的 Qt Creator, 这个 IDE 本身比较轻巧, 同事相关的语法提示之类的也算够用, 但是 ...

  10. 新技术：Qt for Native Client (and emscripten)

    http://blog.qt.io/blog/2015/09/25/qt-for-native-client-and-emscripten/