　　　　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介绍的更多相关文章

django Ajax介绍
1.Ajax技术认识ajax之前必须先了解json模块,json(Javascript Obiect Notation,JS对象标记)属于一种轻量级的数据交换格式 json的格式来源于js的格式 ...
Ajax介绍
AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJA ...
Ajax介绍及爬取哔哩哔哩番剧索引追番人数排行
Ajax,是利用JavaScript在保证页面不被刷新,页面链接不改变的情况下与服务器交换数据并更新部分网页的技术.简单的说,Ajax使得网页无需刷新即可更新其内容.举个例子,我们用浏览器打开新浪微博 ...
关于Jquery中ajax介绍
jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.ajax() 返回其创建的 XMLHttpRequest 对象.大多数情况下你无需直接操作该函数,除非你需 ...
[Ajax系列]Ajax介绍
Ajax简介: Ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. What ? AJAX=异步JavaScript和XML AJAX是一种用于创建快读动态网页的技术通过在后台语 ...
JQuery AJAX介绍
new ActiveXObject("Microsoft.XMLHTTP")是IE中创建XMLHttpRequest对象的方法.非IE浏览器中创建方法是new XmlHttpReq ...
Ajax 介绍
Ajax的关键技术: 异步处理数据使用XHTML(HTML)和CSS构建标准化的展示层使用DOM(document object model)进行动态显示和交互使用XML和XSLT进行数据交换 ...
ajax介绍及使用
一.什么是ajax:(只刷新局部页面的技术) AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发 ...
[TimLinux] JavaScript 原生AJAX介绍
1. AJAX 异步JavaScript + XML,用于浏览器内部通过前端JavaScript语言操纵,与HTTP服务器进行连接通信的技术. 2. XMLHttpRequest对象从IE7+,以及 ...

随机推荐

day5-logging模块
一.概述好的程序开发,往往会兼顾到日志输出的需求,以便给用户提供必要的日志信息便于确认程序运行状态.排错等等.这些日志一般包括程序的正常运行日志.访问日志.错误日志.数据保存日志等类型.在pytho ...
main函数的参数：argc和argv
程序一般是从main函数开始执行的,main函数标准格式: int main(int argc,char **argv) 其中argc是来自shell(或CMD)的参数的个数,argv是char型的二 ...
Netty实例几则
Netty是基于JDK NIO的网络框架简化了NIO编程, 不用程序自己维护selector, 将网络通信和数据处理的部分做了分离多用于做底层的数据通信, 心跳检测(keepalived) 1. ...
在 Bash on Ubuntu 上安装Nginx
前言 Win10 上的 Bash on Ubuntu 是个很好用的玩具,让windows开发环境下的人能无缝操练Linux,但是涉及到网络部分还是有很多要该进的地方,比如Nginx的安装就遇到了问题. ...
Alpha冲刺一（2/10）
前言队名:拖鞋旅游队组长博客:https://www.cnblogs.com/Sulumer/p/9960487.html 作业博客:https://edu.cnblogs.com/campus/ ...
cookie和session的区别与联系
http://www.cnblogs.com/s1nker/p/4876284.html 基本概念对于许多人来说,都知道的是,cookie是存储在客户端的,可以用来放需要长期使用的内容,例如用户密码 ...
Eclipse Java EE IDE中jsp页面编码修改
Eclipse Java EE IDE模板编码是ISO8859,肯定不是我们需要的,修改方法如下图: 依次点击:Window---->Preference---->Web---->J ...
C#调用C++编译的DLL--
引用 C#调用C++编译的DLL详解可以单步跟踪进入dll的源码!每种编程语言调用DLL的方法都不尽相同,在此只对用C#调用DLL的方法进行介绍.首先,您需要了解什么是托管,什么是非托管.一般可以认 ...
《Tomcat内核设计剖析》勘误表
<Tomcat内核设计剖析>勘误表书中第95页图request部分印成了reqiest. 书中第311页两个tomcat3,其中一个应为tomcat4. 书中第5页URL应为URI. 书 ...
我也说说Emacs吧(5) - 基本编辑操作
基本编辑操作进入编辑模式标准的emacs用户是遇不到这一节的,因为默认就可以编辑.但是spacemacs用户需要先学习一下强大的vi的模式切换功能了. vi的一个重要特点就是命令特别多,所以一旦学 ...

Unit01： Ajax介绍

Unit01： Ajax

1. ajax是什么?

2. 如何获得ajax对象?

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

onreadystatechange

readyState

responseText

responseXML

status

4. 编程步骤

代码：

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

随机推荐

热门专题

　　　　Unit01： Ajax 　　　　