Unit01： Ajax　　　　

1. ajax是什么?

(asynchronous javascript and xml)
ajax是一种用来改善用户体验的技术，本质是利用浏览器提供的一个
特殊对象(XMLHttpRequest,我们可以称之为ajax对象)向服务器发送
异步请求;服务器返回部分数据（一般不需要返回一个完整的页面），
浏览器利用这些数据对当前页面做部分更新；整个过程不打断用户的
操作，页面无刷新。
注：异步请求，指的是发请求时，浏览器不会销毁当前页面，用户仍然
可以对当前页面做其它操作。

2. 如何获得ajax对象?

3. ajax对象的几个重要属性

onreadystatechange

用来绑订事件处理函数(用来处理readystatechange事件)。
注：当ajax对象的readystate属性值发生了改变（比如从0变成了1，
就会产生readystatechange事件）。

readyState

它有五个值(0,1,2,3,4),表示ajax对象与服务器通信的进展，
其中4表示ajax对象已经获得了服务器返回的所有的数据。

responseText

用来获得服务器返回的文本数据。

responseXML

用来获得服务器返回的xml数据。

status

用来获得服务器返回的状态码。

4. 编程步骤

step1. 获得ajax对象。
比如: var xhr = getXhr();

step2. 利用ajax对象发请求。
(1)get请求:
比如:

true:异步
false:同步(发请求时，浏览器会锁定当前页面，用户不能够对当前页面
做其它操作)。
(4)post请求:
比如:

注：按照http协议要求，如果发送的是post请求，必须在请求数据包里面 添加content-type消息头。ajax对象默认情况下，不会添加该消息头， 所以，需要调用setRequestHeader方法来添加。
step3. 编写服务器端的程序。
通常只需要返回部分数据。
step4. 编写事件处理函数。

代码：

src/main/java

web

package web;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.Random;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class ActionServlet extends

    HttpServlet{

    public void service(

            HttpServletRequest request,

            HttpServletResponse response)

    throws ServletException,IOException{

        response.setContentType(

                "text/html;charset=utf-8");

        PrintWriter out =

                response.getWriter();

        //获得请求资源路径

        String uri = request.getRequestURI();

        System.out.println("uri:" + uri);

        String action =

            uri.substring(

                    uri.lastIndexOf("/"),

                    uri.lastIndexOf("."));

        System.out.println("action:" + action);

        if("/check_uname".equals(action)){

            //检查用户名是否被占用

            String uname =

                request.getParameter("uname");

            System.out.println("uname:" + uname);

            if("King".equals(uname)){

                out.println("用户名被占用");

            }else{

                out.println("可以使用");

            }

        }else if("/getNumber".equals(action)){

            //返回一个随机整数

            Random r = new Random();

            int number = r.nextInt(100);

            System.out.println("number:" + number);

            out.println(number);

        }

    }

}

ActionServlet.java

webapp/js

/*

 * 用于获得ajax对象

 */

function getXhr() {

    var xhr = null;

    if (window.XMLHttpRequest) {

        // 非ie

        xhr = new XMLHttpRequest();

    } else {

        xhr = new ActiveXObject(

                'MicroSoft.XMLHttp');

    }

    return xhr;

}

//依据id返回节点

function $(id){

    return document.getElementById(id);

}

//依据id找到节点，返回节点的value

function $F(id){

    return $(id).value;

}

ajax.js

WEB-INF

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.5">

  <servlet>

      <servlet-name>action</servlet-name>

      <servlet-class>web.ActionServlet</servlet-class>

  </servlet>

  <servlet-mapping>

      <servlet-name>action</servlet-name>

      <url-pattern>*.do</url-pattern>

  </servlet-mapping>

</web-app>

web.xml

webapp

<%@ page

 contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

<script type="text/javascript"

src="js/ajax.js">

</script>

<script type="text/javascript">

    function showNumber(){

        //step1.获得ajax对象

        var xhr = getXhr();

        //step2.发请求

        xhr.open('get','getNumber.do',true);

        xhr.onreadystatechange=function(){

            //step4.处理服务器返回的数据

            if(xhr.readyState == 4 &&

                    xhr.status == 200){

                //获得服务器返回的数据

                var txt = xhr.responseText;

                //更新页面

                $('d1').innerHTML = txt;

            }

        };

        xhr.send(null);

    }

</script>

</head>

<body style="font-size:30px;">

    <a href="javascript:showNumber();">点这儿显示一个随机数</a>

    <br/>

    <div id="d1"></div>

</body>

</html>

random.jsp

<%@ page

 contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

    <script type="text/javascript"

        src="js/ajax.js">

    </script>

    <script type="text/javascript">

        //检查用户名有没有被占用

        function check_uname(){

            //step1. 获得ajax对象

            var xhr = getXhr();

            //step2. 利用ajax对象发请求

            xhr.open('get',

                    'check_uname.do?uname='

                            + $F('uname'),true);

            xhr.onreadystatechange = function(){

                //step4. 处理服务器返回的数据

                if(xhr.readyState == 4 &&

                        xhr.status == 200){

                    //获得服务器返回的数据

                    var txt = xhr.responseText;

                    //更新页面

                    $('uname_msg').innerHTML = txt;

                }

            };

            xhr.send(null);

        }

    </script>

</head>

<body style="font-size:30px;">

    <form action="" method="post">

        用户名:<input id="uname" name="uname"

        onblur="check_uname();"/>

        <span id="uname_msg"></span>

        <br/>

        密码:<input type="password" name="pwd"/>

        <br/>

        <input type="submit" value="注册">

    </form>

</body>

</html>

regist.jsp

注释：使用post方式

<%@ page

 contentType="text/html; charset=utf-8"

    pageEncoding="utf-8"%>

<html>

<head>

    <script type="text/javascript"

        src="js/ajax.js">

    </script>

    <script type="text/javascript">

        function check_uname(){

            //step1.获得ajax对象

            var xhr = getXhr();

            //step2.发请求

            xhr.open('post','check_uname.do',true);

            //添加一个消息头(content-type)

            xhr.setRequestHeader('content-type',

                    'application/x-www-form-urlencoded');

            xhr.onreadystatechange = function(){

                //step4.处理服务器返回的数据

                if(xhr.readyState == 4 &&

                        xhr.status ==200){

                    var txt = xhr.responseText;

                    $('uname_msg').innerHTML = txt;

                }

            };

            xhr.send('uname=' + $F('uname'));

        }

    </script>

</head>

<body style="font-size:30px;">

    <form action="" method="post">

        用户名:<input id="uname" name="uname"

        onblur="check_uname();"/>

        <span id="uname_msg"></span>

        <br/>

        密码:<input type="password" name="pwd"/>

        <br/>

        <input type="submit" value="注册">

    </form>

</body>

</html>

regist_post.jsp

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

    <script type="text/javascript">

    function getXhr(){

        var xhr = null;

        if(window.XMLHttpRequest){

            //非ie

            xhr = new XMLHttpRequest();

        }else{

            xhr = new ActiveXObject(

                    'MicroSoft.XMLHttp');

        }

        return xhr;

    }

    </script>

</head>

<body style="font-size:30px;">

        <a href="javascript:alert(getXhr());">ClickMe</a>

</body>

</html>

test.html

　　

Unit01： Ajax介绍的更多相关文章

  1. django Ajax介绍

    1.Ajax技术 认识ajax之前必须先了解json模块,json(Javascript  Obiect  Notation,JS对象标记)属于一种轻量级的数据交换格式 json的格式来源于js的格式 ...

  2. Ajax介绍

    AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJA ...

  3. Ajax介绍及爬取哔哩哔哩番剧索引追番人数排行

    Ajax,是利用JavaScript在保证页面不被刷新,页面链接不改变的情况下与服务器交换数据并更新部分网页的技术.简单的说,Ajax使得网页无需刷新即可更新其内容.举个例子,我们用浏览器打开新浪微博 ...

  4. 关于Jquery中ajax介绍

    jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...

  5. [Ajax系列]Ajax介绍

    Ajax简介: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. What ? AJAX=异步JavaScript和XML AJAX是一种用于创建快读动态网页的技术 通过在后台语 ...

  6. JQuery AJAX介绍

    new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法.非IE浏览器中创建方法是new XmlHttpReq ...

  7. Ajax 介绍

    Ajax的关键技术:  异步处理数据 使用XHTML(HTML)和CSS构建标准化的展示层 使用DOM(document object model)进行动态显示和交互 使用XML和XSLT进行数据交换 ...

  8. ajax介绍及使用

    一.什么是ajax:(只刷新局部页面的技术) AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发 ...

  9. [TimLinux] JavaScript 原生AJAX介绍

    1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象 从IE7+,以及 ...

随机推荐

  1. 由浅入深了解EventBus:(三)

    原理 EventBus的核心工作机制如下图 在EventBus3.0架构图: EventBus类 在EventBus3.0框架的内部,核心类就是EventBus,订阅者的注册/订阅,解除注册,以及事件 ...

  2. 谷歌模拟手机和真机上显示的各个机型的 dpi--和高度

    **以下数据尚未经过严密测试.待日后工作中再试** var dpi = window.devicePixelRatio;//获取屏幕分辨率 alert("dpi为:"+dpi); ...

  3. 利用国内镜像下载Android源码，并编译生成image镜像文件

    为了编译安卓源码,首先需要一个Linux,本次采用Ubuntu Kylin14.04,内核版本3.13.装在四核.4G内存.1T硬盘的虚拟机上查看内核版本号:$uname -all清华镜像地址清华镜像 ...

  4. root用户下使用sqlplus登录Oracle数据库

    1.把环境变量添加到root用户的环境变量里面2.执行 chmod -R 6777 /tmp           chmod -R 6777 /usr/tmp           chmod -R 6 ...

  5. PHP错误Parse error: syntax error, unexpected end of file in test.php on line 12解决方法

    出现这个错误的原因就是语法错误,肯定是PHP程序的书写不规范造成,PHP语句标识符错了,没有在php.ini中开启短标签!八成是这个原因,啊啊啊! 今天在写PHP程序的时候总是出现这样的错误:Pars ...

  6. 【PL/SQL编程】数据类型说明

    1. 数值类型 数值类型主要包括NUMBER.PLS_INTEGER.和BINARY_INTEGER 3种基本类型.NUMBER可以用来存储整数或浮点数,PLS_INTEGER和BINARY_INTE ...

  7. ZK单机最简配置

    修改zk home/conf下的zoo_sample.cfg,重新命名为zoo.cfg. 修改配置为: dataDir=/root/data/zookeeper-data clientPort=218 ...

  8. Android 贝塞尔曲线解析

    相信很多同学都知道"贝塞尔曲线"这个词,我们在很多地方都能经常看到.利用"贝塞尔曲线"可以做出很多好看的UI效果,本篇博客就让我们一起学习"贝塞尔曲线 ...

  9. Vim技能修炼教程(16) - 浮点数计算函数

    浮点数计算函数 这一节的所有函数,只有在vim编译时支持了+float时才有效. 三角函数 sin() : sine正弦函数 cos() : cosine余弦函数 tan() : tangent正切函 ...

  10. vue-route(三)后台管理路由配置

    在一个后台管理的项目中,关于路由的配置,     我们需要实现的一个布局是header,aside,main三部分,后期还可能添加footer部分,实现的需求是请求数据时,局部的刷新,这个时候我们就需 ...